Form elements
Input
<input> element is used to creat several different form controls. The value of the type attribute determines what kind of input they will be creating.
Input Types – text
There are many ways to obtain data from the user. The most common input type is the text type. Using text as the input type give you a single entry field that by default is about 20 to 25 characters in length. It is written like this:
<input name="first name">There is no closing tag on the <input type> element, but it does make use of attributes. The most common attribute is name. The name attribute is important because it identifies what text box goes with what data when you receive the form data via email or other means. The name attribute can be anything you like, but it should be given a meaningful name for better clarity.
Size attribute should not be used on new forms. It was used in older forms to indicate the width of the text input (measured by the number of characters that would be seen)
<input name="first name" size="15">
In this example, user can type in more characters in the field, but only 15 characters will display.
Input Types – text area
The textarea input type is like the text input type, but instead of a single line, it can contain multiple lines of text. This is typically used for comments or email body text input. It is written like this:
<textarea name="body-message">Tell us how you feel!</textarea>
The textarea property can have some text included. This is accomplished by placing your message text between the opening and closing tags. Take the note that the textarea element requires a closing tag. This is very important.
Input Types - radio
Radio buttons are the round buttons that you tick when making selections within a form. They are written like this:
<input name="pasta" value="linguine" checked > Linguine
<input name="pasta" value="fussili" > Fussili
<input name="pasta" value="penne" > Penne
Input Types - checkbox
The checkbox input type is almost identical to the radio type, but it allows the user to select multiple checkboxes. It is written like this:
<input name="meal-request" value="Kosher"> Kosher
<input name="meal-request" value="Vegetarian"> Vegetarian
Input Types - select
The select property gives you a drop down list. This is great when you need a user to select one item from multiple items in a list. The HTML is written like this:
<select name="animal">
<option value="cat" selected>Cat</option>
<option value="dog ">Dog</option>
<option value="dolphin">Dolphin</option>
</select>
Note that the selected attribute means that that particular item will be the default selection in the list. This same behavior works for radio buttons and checkboxes, as well.
Input Types - submit
Finally, there needs to be an action that sends the user input data to the server or via email, and this is accomplished with the submit input type. Submit creates a browser default button and is written like this:
<input name="submit" value="Submit Form"> __________
The Label Element
The label element allows us to associate a text description to a particular input type.
The <label> element can be used in two ways.
1. Wrap around both the text description and the from input
<lable>Age:<input name="Age"/></label>2. Be kept separate from the form control and use the for attribute to indicate which form control it is a label for
<div >
<label for="username">Tell us your name</label>
<input id="username" name="username" >
</div>
______
HTML5 Form elements
Form validation
You have probably seen forms on the web that give users messages if the form control has not been filled in correctly. This is know as form validation.
<form action="http://wnmaau.com/login/" method="post">
<input type ="text" name="username" required="required"/>
</form>
Date input, email and URL
Many forms need to gather information such as dates, email address, and URLs. This has traditionally done by text inputs. HTML5 introduces new form controls to standardize the way that some information is gathered. Older browsers that do not recognize these inputs will just treat them as a single line text box.
<form action="http://wnmaau.com/login/" method="post">
<input type ="date" name="startingdate" />
</form>
<form action="http://wnmaau.com/login/" method="post">
<input type ="email" name="username"/>
</form>
<form action="http://wnmaau.com/login/" method="post">
<input type ="url" name="username"/>
</form>
Browsers that support HTML5 validation will check that the user has provided information in the correct format of an email address or URL. Some smart phones also optimize their keyboard to display the keys you are most likely to need when entering an email address such as the @ symbol for email and .com of URL.
Search input
If you want to create a single line text box for search queries HTML5 provides special search input.
<input name="search" placeholder="Enter keyword"/>You can add placeholder attribute to any text input. Older browser simply ignore this attribute.
<input> element is used to creat several different form controls. The value of the type attribute determines what kind of input they will be creating.
Input Types – text
There are many ways to obtain data from the user. The most common input type is the text type. Using text as the input type give you a single entry field that by default is about 20 to 25 characters in length. It is written like this:
<input name="first name">There is no closing tag on the <input type> element, but it does make use of attributes. The most common attribute is name. The name attribute is important because it identifies what text box goes with what data when you receive the form data via email or other means. The name attribute can be anything you like, but it should be given a meaningful name for better clarity.
Size attribute should not be used on new forms. It was used in older forms to indicate the width of the text input (measured by the number of characters that would be seen)
<input name="first name" size="15">
In this example, user can type in more characters in the field, but only 15 characters will display.
Input Types – text area
The textarea input type is like the text input type, but instead of a single line, it can contain multiple lines of text. This is typically used for comments or email body text input. It is written like this:
<textarea name="body-message">Tell us how you feel!</textarea>
The textarea property can have some text included. This is accomplished by placing your message text between the opening and closing tags. Take the note that the textarea element requires a closing tag. This is very important.
Input Types - radio
Radio buttons are the round buttons that you tick when making selections within a form. They are written like this:
<input name="pasta" value="linguine" checked > Linguine
<input name="pasta" value="fussili" > Fussili
<input name="pasta" value="penne" > Penne
Input Types - checkbox
The checkbox input type is almost identical to the radio type, but it allows the user to select multiple checkboxes. It is written like this:
<input name="meal-request" value="Kosher"> Kosher
<input name="meal-request" value="Vegetarian"> Vegetarian
Input Types - select
The select property gives you a drop down list. This is great when you need a user to select one item from multiple items in a list. The HTML is written like this:
<select name="animal">
<option value="cat" selected>Cat</option>
<option value="dog ">Dog</option>
<option value="dolphin">Dolphin</option>
</select>
Note that the selected attribute means that that particular item will be the default selection in the list. This same behavior works for radio buttons and checkboxes, as well.
Input Types - submit
Finally, there needs to be an action that sends the user input data to the server or via email, and this is accomplished with the submit input type. Submit creates a browser default button and is written like this:
<input name="submit" value="Submit Form"> __________
The Label Element
The label element allows us to associate a text description to a particular input type.
The <label> element can be used in two ways.
1. Wrap around both the text description and the from input
<lable>Age:<input name="Age"/></label>2. Be kept separate from the form control and use the for attribute to indicate which form control it is a label for
<div >
<label for="username">Tell us your name</label>
<input id="username" name="username" >
</div>
______
HTML5 Form elements
Form validation
You have probably seen forms on the web that give users messages if the form control has not been filled in correctly. This is know as form validation.
<form action="http://wnmaau.com/login/" method="post">
<input type ="text" name="username" required="required"/>
</form>
Date input, email and URL
Many forms need to gather information such as dates, email address, and URLs. This has traditionally done by text inputs. HTML5 introduces new form controls to standardize the way that some information is gathered. Older browsers that do not recognize these inputs will just treat them as a single line text box.
<form action="http://wnmaau.com/login/" method="post">
<input type ="date" name="startingdate" />
</form>
<form action="http://wnmaau.com/login/" method="post">
<input type ="email" name="username"/>
</form>
<form action="http://wnmaau.com/login/" method="post">
<input type ="url" name="username"/>
</form>
Browsers that support HTML5 validation will check that the user has provided information in the correct format of an email address or URL. Some smart phones also optimize their keyboard to display the keys you are most likely to need when entering an email address such as the @ symbol for email and .com of URL.
Search input
If you want to create a single line text box for search queries HTML5 provides special search input.
<input name="search" placeholder="Enter keyword"/>You can add placeholder attribute to any text input. Older browser simply ignore this attribute.