|
HTML Advanced Tutorial
Forms
Form tag
Input tags
Input Attributes:
Text
Password
Submit
Radio
Checkbox
Practice HTML (Use
it or Notepad)
Form tag:
Form tag is normally used to make sign up, login or information fill up
forms in web page. Forms have a significant roll in any web site. With
the help of these forms you can collect information of your visitors/customers.
As any other tags forms could be defined with form tags. It should have
opening and closing tags.
Ok Le't type our basic html tag first.
Now let's add form tag.
Notepad Users: Open your notepad by clicking
"Start menu (bottom left) - Programs - Accessories - Notepad".
Now type the following html code in your Notepad.
Don't forget to save your code often :).
Practice HTML users: Type the code inside
the blue box of practice html.
<html>
<head>
<title> </title>
</head>
<body>
<form> </form>
</body>
</html> |
Form has two attributes called Method
and Action.
There are two methods called Get and Post.
1. GET method (Get is a default method. It sends data as part of url hence
this method is not much secure.)
2. POST method (it is more desired method because of secutiry.)
Action - where the form is suppose to be submitted.
It could be email address, page url, or cgi programs. Action
= "url"
Let's add method and action to form tag. So now your
<form> tag should look like this.
<form method="post" action="mailto:email@jasminecorp.net">
<html>
<head>
<title> </title>
</head>
<body>
<form method="post" action="mailto:email@jasminecorp.net">
</form>
</body>
</html> |
Input Tags:
Input tag specifies input elements of form. It has many
attributes like text, radio, checkbox, submit, password etc. As we move
along we'll learn more about it.
Text: <input
type="text" name="firstname"> creates
a textbox or text entery field which allows user to enter single line of
text.
Now let us add <input> tag in our form.
<html>
<head>
<title>
My Web Page
</title>
</head>
<body>
<form method="post" action="mailto:email@jasminecorp.net">
First Name: <input
type="text" name="firstname">
</form>
</body>
</html> |
Notepad users: save your form and look it at your
browser.
Practice HTML users: Click on test button and look (upper white box)
how it looks like.
In your browser textbox should look like this:
Password:
In your <input> tag add password instead of text
Password: <input type="password"
name="password">
Add Password in your previous <input> tag.
Or type this below code again. Make sure to add <br> to create line
break.
I've added Username instead of Firstname just for an example. You can
ignore it if you wish.
<html>
<head>
<title>
My Web Page
</title>
</head>
<body>
<form method="post" action="mailto:email@jasminecorp.net">
Username: <input
type="text" name="firstname"><br>
Password: <input
type="password" name="password">
</form>
</body>
</html> |
Now your textbox should look like this. When
you type your password in your browser it will show up as *** astrics
in your text field (see below pic).
Submit:
Now let's add submit button as shown in above pic.
Submit: <input type="submit"
name="Submit" value="Submit">
We've added value="Submit" the same value will
show up on button. Add "Reset" or "Clear" in value=""
and see what happens. You got it over the button Reset or Clear label would
appear instead of Submit and it would also indicate the value of the button.
So you can add any text according to your need. Make sure to change the
field name i.e. name="" according to your value so that
it should match with your value or title.
|
<html>
<head>
<title>
My Web Page
</title>
</head>
<body>
<form method="post" action="mailto:email@jasminecorp.net">
Username: <input
type="text" name="firstname"><br>
Password: <input
type="password" name="password"><br>
Submit: <input
type="submit" name="Submit" value="Submit">
</form>
</body>
</html>
|
Radio: Ok
let's try radio attribute of <input> tag.
Male:
<input type="radio" name="gender" value="male">
Female:
<input type="radio" name="gender" value="female">
Note: You can keep title
text at any side as your need is. I kept title text "Male" &
"Female" at the right side of the <input> tag. See below.
Type this code (tag) and see how your form appears in your browser now.
<html>
<head>
<title>
My Web Page
</title>
</head>
<body>
<form method="post" action="mailto:email@jasminecorp.net">
Username: <input
type="text" name="firstname"> <br>
Password: <input
type="password" name="password"> <br>
Submit: <input type="submit"
name="Submit" value="Submit"><br><br>
<input type="radio" name="gender"
value="male">: Male<br>
<input type="radio" name="gender"
value="female">: Female
</form>
</body>
</html> |
Now your Radio button should look like this.
Tip: To make radio button
work in a proper way name="" should be the same in both radio
<input> tag. See I kept name="gender"
same in both <input> tag. Change one and see what it does. It will
select both Male and Female radio button at the same time. So it would
not work properly.
Check Box:
Checkbox could also be added to the forms in similar
way as before. This time <input type=""> would be "checkbox"
instead of text, radio, submit etc. You can also add name field and value
for it.
Fruits:
Apple: <input type="checkbox" name="apple" value="apple">
Banana: <input type="checkbox" name="banana" value="banana">
Orange: <input type="checkbox" name="orange" value="orange">
<html>
<head>
<title>
My Web Page
</title>
</head>
<body>
<form method="post" action="mailto:email@jasminecorp.net">
Username: <input type="text" name="firstname">
<br>
Password: <input type="password" name="password">
<br>
Submit: <input type="submit" name="Submit"
value="Submit"><br><br>
<input type="radio" name="gender" value="male">:
Male<br>
<input type="radio" name="gender"
value="female">: Female
<br><br>
Fruits: <br>
Apple: <input type="checkbox"
name="apple" value="apple"><br>
Banana: <input
type="checkbox" name="banana" value="banana"><br>
Orange: <input type="checkbox"
name="orange" value="orange">
</form>
</body>
</html> |
Your checkbox should look like this in browser. Unlike
radio button you can select as many boxes.
Do not forget to use your closing tags. In next lesson
we'll see some more <form> elements.
|
