HTML form tag summary
| Here is a form element: | Here's the HTML which made it: |
|---|---|
| <form action="/cgi-bin/echo_form.cgi" method="post"> | |
|
(A submit button) |
<input type="submit" name="sendit" value="Send the Form" > |
|
(A reset button) |
<input type="reset" name="clearit" value="Reset the Form" > |
| Course Name (A basic text input) |
Course Name: <input type="text" size="10" maxlength="24" name="Course" value="IT 581" > |
|
(A password field - the value is replaced by asterisks on the rendered page.) |
<input type="password" name="passwd" value= "Secret Password" > |
|
(A hidden field - it does not show anything on the rendered page.) |
<input type="hidden" name="secret" value="Find me!" > |
| Class: Undergrad Graduate Other (Radio buttons that have the same name form a group. Only one can be selected.) |
Class: <input type="radio" name="level" value="UG"> Undergrad<br> <input type="radio" name="level" value="Gr" checked="checked"> Graduate <input type="radio" name="level" value="Oth" > Other |
| Course Benefit Learning a lot Having fun! Earning 3 credits (Checkboxes that have the same name form a group. More than one can be selected.) |
Course Benefit <input type="checkbox" name="bennie" value="learn" checked >Learning a Lot <input type="checkbox" name="bennie" value="fun">Having fun! <input type="checkbox" name="bennie" value="credit">Earning 3 credits |
| Month (A selection list functions the same as a radio group. Only one option can be selected. If the value is not provided for an option, the text will be used.) |
Month <select name="month"> <option value="1">January</option> <option value="2">February</option> <option value="3" selected>March</option> <option value="4">April</option> <option value="5">May</option> </select> |
| Favorite Teams: (A multiple selection list (scrolling menu) functions the same as a checkbox group. More than one option can be selected. If the value is not provided for an option, the text will be used.) |
Favorite Teams: <select name="teams" multiple="multiple" size="3"> <option>Alyssum</option> <option>Balsam</option> <option>Begonia</option> <option>Coleus</option> <option>Hibiscus</option> <option>Magnolia</option> </select> |
| Comments: (A textarea lets the user type multiple lines of text, including spaces and line breaks.) |
Comments: <textarea name="comments" rows="5" cols="25"> Your comments </textarea> |
| (The end of the form) |
</form> |
Example
Here is a form with four different types of input elements, as rendered by the client software you are currently using:
Form showing different types of input elements
The example as a separate page.
fieldset and legend elements
Blocks of form elements can be grouped using fieldset. The fieldset block may include an optional legend element. User agents may apply special rules to the group of elements such as distinctive styling and keeping the fieldset text on the same page when printing, if possible.
Example: fieldset & legend
Fieldset with and without a legend
<form action="">
<fieldset>
<legend>It's legendary!</legend>
<input type="text"
name="demo"
value="Initial text" >
</fieldset>
<fieldset>
<input type="text"
name="demotoo"
id="d2"
value="More Initial text" >
</fieldset>
</form>
Selection list options
Options in a selection list may be grouped using optgroup. This provides additional flexibility for different user agents.
The option element also has an optional label attribute which is not the same as the label element. The label attribute provides alternative text that may be used in the selection list by some user agents, such as shorter text to used by handheld devices.
Warning:
The attribute multiple for the select element indicates that multiple options may be selected. It is often displayed as a list with scrollbars.
Example 11: Selection list options
optgroup and option labels
<select name="entered" id="entered">
<optgroup label="This year.">
<option label="2007" value="07" selected="selected">Current: 2007</option>
</optgroup>
<optgroup label="Recent">
<option label="2006" value="06">Recent: 2006</option>
<option label="2005" value="05">Recent: 2005</option>
<option label="2004" value="04">Recent: 2004</option>
<optgroup label="Not-so-recent">
<option label="2003" value="03">A while ago: 2003</option>
<option label="2002" value="02">A while ago: 2002</option>
<option label="2001" value="01">A while ago: 2001</option>
<option label="2000" value="00">A while ago: 2000</option>
</optgroup>
<option label="Pre Y2K" value="oldie">Ages ago: 1999 or earlier</option>
</select>
Form Validation
Note: the following are based on w3schools JavaScript tutorial.
JavaScript validation
HTML form validation can be done by a JavaScript.
For example, if a form field (fname) is empty, this function alerts a message, and returns false, to prevent the form from being submitted.
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.asp"
onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
HTML Form Validation
HTML form validation can be performed automatically by the browser.
For example, if a form field (fname) is empty, the required attribute prevents this form from being submitted.
<!DOCTYPE html> <html> <body> <form action="demo_form.asp" method="post"> <input type="text" name="fname" required> <input type="submit" value="Submit"> </form> <p>If you click submit, without filling out the text field, your browser will display an error message.</p> </body> </html>
If you click submit, without filling out the text field, your browser will display an error message.
HTML Constraint Validation
HTML5 introduced a new HTML validation concept called constraint validation. HTML constraint validation is based on:
- Constraint validation HTML Input Attributes
- Constraint validation CSS Pseudo Selectors
- Constraint validation DOM Properties and Methods
For example, the The min and max Attributes specify the minimum and maximum value for an <input> element. They work with the following input types: number, range, date, datetime, datetime-local, month, time and week.
<!DOCTYPE html> <html> <body> <form action=""> Enter a date before 1980-01-01: <input type="date" name="bday" max="1979-12-31"><br> Enter a date after 2000-01-01: <input type="date" name="bday" min="2000-01-02"><br> Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"><br> <input type="submit"> </form> <p><strong>Note:</strong> The max and min attributes of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Firefox.</p> <p><strong>Note:</strong> The max and min attributes will not work for dates and time in Internet Explorer 10, since IE 10 does not support these input types.</p> </body> </html>
Note: The max and min attributes of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Firefox.
Note: The max and min attributes will not work for dates and time in Internet Explorer 10, since IE 10 does not support these input types.