An HTML form can be used to collect information from the user. A form normally contains one or more fields and a submit button. The role of the latter is obvious. You cannot submit a form without a submit button. A form would also specify an action, which is normally an Internet resource, to handle the form data.
To create a form, you use the form element. A form element may contain zero or more input fields. The structure of a form element is as follows.
<form> <input .../> <input .../> ... </form>
Each input element represents a data unit. For example, if you need the user’s first name and last name, then you would have a form with two input fields, one for the first name and one for the last name.
Creating an HTML form is easy, you just need a form element and a couple of input elements. Making the form look good is always the difficult part.
The label element represents a caption in a form. A label can be associated with a form field, known as the label element’s labeled control, either by using the for attribute or by putting the form control inside the label element itself.
Here is an example of using the for attribute.
<label for="username">Username : </label><input id="username" name="userName"/>
The value of for must match the value of the id attribute of the labeled control.
Here is an example of the same input field enclosed in a label. No for attribute is necessary.
<label>Username : <input type="text"/></label>
For each row, you can use a p element, like this:
<form> <p> <label>Username : <input type="text" name="username"/></label> </p> <p> <label>Password : <input type="password" name="password"/></label> </p> </form>
However, if you decide to use CSS to style your form, no p element is required:
<form> <label>Username : <input type="text" name="username"/></label> <label>Password : <input type="password" name="password"/></label> </form>
Text Input Fields
There are four input fields for carrying text data: text field, password field, hidden field and textarea. The text field is an ordinary text field. A password field is like a text field, but all characters entered are masked. It is used for entering a password so the nosy colleague sitting next to you won’t be able to see your password every time you log in to check your personal mail.
The hidden field is also similar, except that it is hidden. Normally you need this to pass certain information, such as a country code, to the server. It is not uncommon to dynamically generate the value of a hidden field.
A textarea is unique as it it a multiline input field. You can decide how many columns or rows it can take.
<!DOCTYPE html> <html> <head> <title>Contact Us</title> </head> <body> <form action="" method="post"> <h1>Contact Us</h1> <p> <label> <span>Your Name :</span> <input id="name" type="text" name="name" placeholder="Your full name" /> </label> </p> <p> <label> <span>Your Email :</span> <input id="email" type="email" name="email" placeholder="Your email address" required="required" /> </label> </p> <p> <label> <span>Message :</span> <textarea id="message" name="message" placeholder="Type your message here"></textarea> </label> </p> <p> <label> <span> </span> <input type="submit" value="Send" /> </label> </p> </form> </body> </html>
Output
Radio Buttons
Radio buttons are used to provide the user with a selection of choices. It is uncommon to use a single radio button in a form as for this you can use a checkbox.
You construct a radio button by using the input element, specifying “radio” as its type. Remember that you almost always need multiple instances. Here is an example:
<input type="radio" name="orgType" value="type1"/>Individual <input type="radio" name="orgType" value="type1"/>Business
In addition to the type attribute, you also need the name and value attributes. A group of radio buttons that make up a selection of choices must have the same name to tell the browser that only one in the group can be selected. The value attribute specifies the value that will be submitted if the radio button is selected.
E.g using Radio Button
<!DOCTYPE html> <html> <head> <title>Radio Button Demo</title> </head> <body> <form action="" method="post"> <h1>Register</h1> <p> <label> <span>Your Email :</span> <input id="name" type="email" name="name" placeholder="Your email"/> </label> </p> <p> <label> <span>Organization type : </span> <input type="radio" name="orgType" value="type1"/> <span>Individual</span> <input type="radio" name="orgType" value="type2"/> <span>Business</span> </label> </p> <p> <label> <span> </span> <input type="submit"/> </label> </p> </form> </body> </html>
Output
Good to know forms are so useful.