The submit, reset, and button types of input element create buttons that are very similar to those created when using the button element.
The additional attributes that are available when you use the submit type are the same as when you use the submit button element.
The reset and button types don't define any additional attributes
For all three of these input types, the label that is displayed on the button is taken from the value attribute.
<!DOCTYPE HTML> <html> <body> <form method="post" action="#"> <p> <label for="name"> Name: <input value="XML" id="name" name="name"> </label> </p> <p> <label for="password"> Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"> </label> </p> <p> <label for="fave"> Fruit: <input value="Apples" id="fave" name="fave"> </label> </p> <input type="submit" value="Submit"> <input type="reset" value="Reset"> <input type="button" value="Button"> </form> </body> </html>
The input button elements cannot use the button element to display marked up text.
Setting type attribute to password creates an input element for entering a password.
The characters that the user types are represented by a masking character, such as an asterisk (*).
password input element can have the following the additional attributes. Many of these are shared with the text type and work in the same way.
<!DOCTYPE HTML> <html> <body> <form method="post" action="#"> <p> <label for="name"> Name: <input value="XML" id="name" name="name"> </label> </p> <p> <label for="password"> Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"> </label> <br>Another Password: <input type="password" name="pwdPassword" value="" size="20" maxlength="20" /><br> </p> <p> <label for="fave"> Fruit: <input value="Apples" id="fave" name="fave"> </label> </p> <button type="submit">Submit Vote</button> </form> </body> </html>
HTML5 introduces new values for the input element's type attribute and we can collect more specific data from the user.
The number value for the type attribute creates an input box that will only accept numeric values.
The values for the min, max, step, and value attributes can be expressed as integer or decimal numbers
<!DOCTYPE HTML> <html> <body> <form method="post" action=""> <p> <label for="price"> Rs. per unit in your area: <input type="number" step="1" min="0" max="100" value="1" id="price" name="price"> </label> </p> <input type="submit" value="Submit"> </form> </body> </html>
We can get a numeric value using the range type of input element.
The value from range input element restricts the user to selecting a value from a predetermined range.
The range type supports the same set of attributes as the number type.
<!DOCTYPE HTML> <html> <body> <form method="post" action=""> <p> <label for="price"> Rs. per unit in your area: 1 <input type="range" step="1" min="0" max="100" value="1" id="price" name="price">100 </label> </p> <input type="submit" value="Submit"> </form> </body> </html>
The checkbox type of the input element creates a check box that allows the user to make a true/false choice.
<!DOCTYPE HTML> <html> <body> <form method="post" action=""> <p> Which of the following skills do you possess? Select all that apply.<br> <input checked type="checkbox" name="chkSkills" value="html">HTML <br> <input type="checkbox" name="chkSkills" value="xhtml">XHTML <br> <input type="checkbox" name="chkSkills" value="CSS">CSS<br> <input checked type="checkbox" name="chkSkills" value="JavaScript">JavaScript<br> <input type="checkbox" name="chkSkills" value="aspnet">ASP.Net<br> <input checked type="checkbox" name="chkSkills" value="php">PHP </p> <input type="submit" value="Submit"> </form> </body> </html>
The radio type of the input element creates a group of radio buttons that let the user pick from a fixed set of options.
Each input element with the type radio represents a single option to the user
A set of exclusive options should have the same value for the name attribute.
<!DOCTYPE HTML> <html> <body> <form method="post" action=""> <p> <fieldset> <legend>Vote for your favorite fruit</legend> <label for="apples"> <input type="radio" checked value="Apples" id="apples" name="fave" /> Apples </label> <label for="oranges"> <input type="radio" value="Oranges" id="oranges" name="fave" /> Oranges </label> <label for="cherries"> <input type="radio" value="Cherries" id="cherries" name="fave" /> Cherries </label> </fieldset> </p> <input type="submit" value="Submit"> </form> </body> </html>
Fieldset and legend attributes give the user a visual cue that the three buttons are related.
The checked attribute is set on the first of the radio elements so that there is always a value selected.
The email type value configure the input element to accept only input that is a valid e-mail address.
The email type also supports the multiple attribute which, when applied, allows the input element to accept multiple e-mail addresses.
<!DOCTYPE HTML> <html> <body> <form method="post" action=""> <p> <label for="email"> Email: <input type="email" placeholder="enter your email" id="email" name="email"> </label> </p> <input type="submit" value="Submit"> </form> </body> </html>
The tel type value configure the input element to accept only input that is a telephone number.
<!DOCTYPE HTML> <html> <body> <form method="post" action=""> <p> <label for="tel"> Tel: <input type="tel" placeholder="enter number" id="tel" name="tel"> </label> </p> <input type="submit" value="Submit"> </form> </body> </html>
The url type values configure the input element to accept only input that is a URL.
<!DOCTYPE HTML> <html> <body> <form method="post" action=""> <p> <label for="url"> Your homepage: <input type="url" id="url" name="url"> </label> </p> <input type="submit" value="Submit"> </form> </body> </html>
HTML5 has introduced some input element types to gather dates and times from the user. The following list describes these input types.
The following list has additional attributes available for the Date and Time input Element Types.
<!DOCTYPE HTML> <html> <body> <form method="post" action=""> <p> <label for="lastbuy"> When did you last buy: <input type="date" id="lastbuy" name="lastbuy"> </label> </p> <input type="submit" value="Submit"> </form> </body> </html>
The color type of input element restricts the user to selecting a color.
Color values are expressed as exactly seven characters: a leading #, followed by three two-digit hexadecimal values representing the red, green, and blue values (for example, #FF1234 ).
<!DOCTYPE HTML> <html> <body> <form method="post" action=""> <p> <label for="color"> Color: <input type="color" id="color" name="color"> </label> </p> <input type="submit" value="Submit"> </form> </body> </html>
The search type of input element presents the user with a single-line text box for entering search terms.
<!DOCTYPE HTML> <html> <body> <form method="post" action=""> <p> <label for="search"> Search: <input type="search" id="search" name="search"> </label> </p> <input type="submit" value="Submit"> </form> </body> </html>
To send data items to the server without showing them to the user, use the hidden input element
<!DOCTYPE HTML> <html> <body> <form method="post" action=""> <input type="hidden" name="recordID" value="1234"> <input type="submit" value="Submit"> </form> </body> </html>
The image type of input element creates buttons that display an image and submit the form when clicked.
<!DOCTYPE HTML> <html> <body> <form method="post" action=""> <p> <label for="name"> Name: <input value="XML" id="name" name="name"> </label> </p> <input type="image" src="accept.png" name="submit"> </form> </body> </html>
When the user clicks the image, the browser submits the form and includes two data items representing the x and y coordinates where the user clicked, relative to the top-left corner of the image.
The coordinates are provided to representing different regions on the image.
The file input element uploads files to the server during the form submission.
<!DOCTYPE HTML> <html> <body> <form method="post" action="" enctype="multipart/form-data"> <p> <input type="file" name="filedata"> </p> <input type="submit" value="Submit"> </form> </body> </html>
You can upload files only when the encoding type for the form is multipart/form-data
When the user clicks the Choose File button, they are presented with a dialog that allows a file to be selected.
When the form is submitted, the contents of the file will be sent to the server