form input


button input


The submit, reset, and button types of input element create buttons that are very similar to those created when using the button element.


  • submit - Creates a button that submits the form. Additional Attributes: formaction, formenctype, formmethod,formtarget, formnovalidate
  • reset - Creates a button that resets the form
  • button - Creates a button that performs no action

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.



password input


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.


  • maxlength - Sets the maximum number of characters that the user can enter into the password box.
  • pattern - Specifies a regular expression pattern for input validation.
  • placeholder - Specifies a hint to the user as to the kind of input that you expect.
  • readonly - If present, makes the password box read-only, and the user cannot edit the content.
  • required - Specifies that the user must enter a value for the purposes of input validation.
  • size - Specifies the width of the element, in the number of characters.
  • value - Specifies the initial value for the password.

	      	<!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>
	      


Restrict Data Entry input


HTML5 introduces new values for the input element's type attribute and we can collect more specific data from the user.


  • checkbox - Restricts the input to a true/false check box
  • color - Restricts the input to a color
  • date - Restricts the input to a date
  • datetime - Restricts the input to a global date and time with time zone
  • datetime-local - Restricts the input to a global date and time without time zone
  • email - Restricts the input to a properly formatted e-mail address
  • month - Restricts the input to a year and month
  • number - Restricts the input to an integer or floating-point number
  • radiobutton - Restricts the input to a fixed set of choices
  • range - Restricts the input to a specified range
  • tel - Restricts the input to a properly formatted telephone number
  • time - Restricts the input to a time of day
  • week - Restricts the input to a year and week
  • url - Restricts the input to a fully qualified URL

number input


The number value for the type attribute creates an input box that will only accept numeric values.


  • list - Sets id of a datalist element that provides values for this element
  • min - Sets the minimum value for the purposes of input validation
  • max - Sets the maximum value for the purposes of input validation
  • readonly - If present, makes the input box read-only, and the user cannot edit the content
  • required - user must provide a value for the purposes of input validation
  • step - Sets the step of increments and decrements to the value
  • value - Specifies the initial value for the element


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>
	      

range input


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>
	      


checkbox input


The checkbox type of the input element creates a check box that allows the user to make a true/false choice.


  • checked - If applied, check the checkbox when initially displayed or when the form is reset
  • required - Specifies that the user must check the check box
  • value - Sets the value submitted to the server when the check box is checked

	      	<!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>
	      

radio input


The radio type of the input element creates a group of radio buttons that let the user pick from a fixed set of options.


  • checked - If applied, select the radio button when initially displayed or when the form is reset
  • required - User must select one of the radio buttons
  • value - Specifies the data value that is submitted to the server when the check box is checked


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.


email input


The email type value configure the input element to accept only input that is a valid e-mail address.


  • list - Sets the id of a datalist element that provides values for the element
  • maxlength - Specifies the maximum length that the user can enter into the text box
  • pattern - Specifies a regular expression pattern for input validation
  • placeholder - Specifies a hint to the user
  • readonly - If present, make the text box read-only
  • required - Specifies that the user must provide a value
  • size - Specifies the width of the element
  • value - Specifies the initial value for the element. For the email type, this can be a single address, or multiple addresses separated by commas


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="[email protected]" id="email" name="email">
			</label>
			</p>
			<input type="submit" value="Submit">
			</form>
			</body>
			</html>
	      

tel input


The tel type value configure the input element to accept only input that is a telephone number.


  • list - Sets the id of a datalist element that provides values for the element
  • maxlength - Specifies the maximum length that the user can enter into the text box
  • pattern - Specifies a regular expression pattern for input validation
  • placeholder - Specifies a hint to the user
  • readonly - If present, make the text box read-only
  • required - Specifies that the user must provide a value
  • size - Specifies the width of the element
  • value - Specifies the initial value for the element

	      	<!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>
	      


url input


The url type values configure the input element to accept only input that is a URL.


  • list - Sets the id of a datalist element that provides values for the element
  • maxlength - Specifies the maximum length that the user can enter into the text box
  • pattern - Specifies a regular expression pattern for input validation
  • placeholder - Specifies a hint to the user
  • readonly - If present, make the text box read-only
  • required - Specifies that the user must provide a value
  • size - Specifies the width of the element
  • value - Specifies the initial value for the element

	      	<!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>
	      

time date input


HTML5 has introduced some input element types to gather dates and times from the user. The following list describes these input types.


  • datetime - Obtains a global date and time, including time zone. Example:2018-12-15T16:42:39.421Z
  • datetime-local - Obtains a local date and time, (with no time zone information). Example:2018-12-15T16:42:39.421
  • date - Obtains a local date (with no time or time zone). Example:2018-12-15
  • month - Obtains a year and month (no day, time, or time zone information). Example:2018-12
  • time - Obtains a time. Example:17:42:44.746
  • week - Obtains the current week. Example:2018-W42

The following list has additional attributes available for the Date and Time input Element Types.


  • list - Sets the id of a datalist element that provides values for the element
  • min - Sets the minimum acceptable value
  • max - Set the maximum acceptable value
  • readonly - Marks the text box to read-only
  • required - Specifies that the user must provide a value
  • step - Specifies the granularity of increments and decrements to the value
  • value - Specifies the initial value for the element

	      	<!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>
	      


color input


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>
	      

search input


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>
	      

hidden input


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>
	      


image input


The image type of input element creates buttons that display an image and submit the form when clicked.


  • alt - Provides a text description of the element
  • formaction - As for the button element
  • formenctype - As for the button element
  • formmethod - As for the button element
  • formtarget - As for the button element
  • formnovalidate - As for the button element
  • height - Specifies the height of the image in pixels
  • src - Specifies the URL for the image that should be displayed
  • width - Specifies the width of the image in pixels

	      	<!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.


file upload input


The file input element uploads files to the server during the form submission.


  • accept - Specifies the set of mime-types that will be accepted. RFC2046 defines MIME types
  • multiple - Specifies that the input element can upload multiple files. At the time of writing, none of the mainstream browsers have implemented this attribute.
  • required - Specifies that the user must provide a value for the purposes of input validation

	      	<!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