The submit, reset, and button types of input element create buttons
that are very similar to those created when using the button element.
The input Element Types That Create Buttons are listed as follows.
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.
The following code uses the input Element to Create Buttons
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<p>
<label for="name"> Name: <input value="XML" id="name"
name="name" />
</label>
</p><!--from w w w. j a v a 2s .c om-->
<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 Vote" />
<input type="reset" value="Reset Form" />
<input type="button" value="My 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.
The following code shows the password type in use.
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<p>
<label for="name"> Name:
<input value="XML" id="name" name="name" />
</label>
</p><!--from w w w .j av a 2s . c om-->
<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 following list summarizes these new type values.
The number value for the type attribute creates an input box that will only accept numeric values.
The following lists describes the additional attributes that are available when using number input type.
The values for the min, max, step, and value attributes can be expressed as integer or decimal numbers; for example, 3 and 3.14.
The following code shows the number type of input in use.
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<p>
<label for="price"> $ per unit in your area: <input
type="number" step="1" min="0" max="100" value="1" id="price"
name="price" />
</label>
</p><!--from w w w .jav a 2 s. c o m-->
<input type="submit" value="Submit Vote" />
</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,
The following code shows the range type in use.
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<p>
<label for="price"> $ per unit in your area: 1 <input
type="range" step="1" min="0" max="100" value="1" id="price"
name="price" />100
</label>
</p><!--from www . j a va 2 s. c o m-->
<input type="submit" value="Submit Vote" />
</form>
</body>
</html>The checkbox type of the input element creates a check box that allows the user to make a true/false choice.
This value for the type attribute supports the additional attributes shown in the following list.
The following code shows the checkbox type of input element in use.
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<p>
<label for="veggie"> Are you vegetarian:
<input type="checkbox" id="veggie" name="veggie" />
</label>
</p><!-- ww w . j a va 2s. c o m-->
<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 Vote" />
</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.
The following list describes the additional attributes supported by radio type input element.
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.
You can see how this works in the following code.
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<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><!--from w w w . jav a 2s. c om-->
<input type="submit" value="Submit Vote" />
</form>
</body>
</html>The code above created three radio type input elements.
The value of the name attribute for all three is fave, which means that the browser will treat them as a group.
Selecting one of the radio buttons will unselect the other two. The value attribute sets the data value to send to the server when the form is submitted.
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.
It supports the additional attributes shown in the following list.
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="http://example.com/form">
<p>
<label for="email"> Email: <input type="email"
placeholder="user@domain.com" id="email" name="email" />
</label>
</p><!--from w ww . ja va2s . co m-->
<input type="submit" value="Submit Vote" />
</form>
</body>
</html>The tel type value configure the input element to accept only input that is a telephone number.
It supports the additional attributes shown in the following list.
The following code shows how to use tel input.
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<!--from w ww . ja v a2 s. com-->
<p>
<label for="tel"> Tel: <input type="tel"
placeholder="(XXX)-XXX-XXXX" id="tel" name="tel" />
</label>
</p>
<input type="submit" value="Submit Vote" />
</form>
</body>
</html>The url type values configure the input element to accept only input that is a URL.
It supports the additional attributes shown in the following list.
The following code shows how to use url input.
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<!-- w w w . jav a 2s. com-->
<p>
<label for="url"> Your homepage: <input type="url" id="url"
name="url" />
</label>
</p>
<input type="submit" value="Submit Vote" />
</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.
The following code shows the date type in use.
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<p>
<label for="lastbuy"> When did you last buy:
<input type="date" id="lastbuy" name="lastbuy" />
</label>
</p><!--from www . j a v a 2 s .com-->
<input type="submit" value="Submit Vote" />
</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).
You can see this type of input element in use in the following code.
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<p>
<label for="color"> Color:
<input type="color" id="color" name="color" />
</label>
</p><!-- ww w . j a v a2 s . co m-->
<input type="submit" value="Submit Vote" />
</form>
</body>
</html>The search type of input element presents the user with a single-line text box for entering search terms.
The following code shows how to use search input.
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<p>
<label for="search"> Search: <input type="search" id="search"
name="search" />
</label>
</p><!-- w w w .ja va 2 s . c o m-->
<input type="submit" value="Submit Vote" />
</form>
</body>
</html>To send data items to the server without showing them to the user, use the hidden input element.
The following code shows how you can use this type of input element.
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<input type="hidden" name="recordID" value="1234" />
<input type="submit" value="Submit Vote" />
</form>
</body>
</html>The image type of input element creates buttons that display an image and submit the form when clicked.
This type of input element supports the additional attributes shown in the follows.
The following code shows the image type of the input element in use.
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<p>
<label for="name"> Name: <input value="XML" id="name"
name="name" />
</label>
</p><!--from w ww . j a v a 2 s. c om-->
<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.
This type of input supports the additional attributes shown as follows.
The following code shows the file type of input element in use.
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form"
enctype="multipart/form-data">
<p>
<input type="file" name="filedata" />
</p><!--from www . j a v a 2s . co m-->
<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.