Input Types

Text

• Defines a single-line text input field
• Default value of the type attribute is "text". <input type="text">

Password

• Defines a password field <input type="password">

Checkbox

• Defines a checkbox.
• Allows user to select ZERO or MORE options.

<form>  
	<input type="checkbox" id="published"  name="published">  
	<label for="published">Published</label><br>  
</form>

<form>  
	Skill Sets<br>
	<input type="checkbox" id="html"  name="skills" value="html">  
	<label for="html">HTML</label><br>  
	<input type="checkbox" id="css"  name="skills"  value="css">  
	<label for="css">CSS</label><br>  
	<input type="checkbox" id="js"  name="skills"  value="javascript">  
	<label for="js">Javascript</label>  
</form>

Radio

• Defines a radio button
• Allows user to select only one choice

<form>  
Gender<br>
<input type="radio" id="female"  name="gender" value="female">  
<label for="female">Female</label><br>  
<input type="radio" id="male"  name="gender"  value="male">  
<label for="male">Male</label><br>  
</form>

Button

Submit

• Submit: defines a button for submitting form data to a form-handler.
• Form-handler is typically a file on the server with a script for processing input data.
• Form-handler is specified in the form's action attribute.
• Submit button has default value Submit

<input type="submit">
<input type="submit" value="Register">

Reset

• Reset: defines a reset button that will reset all form values to their default values. Has default value Reset

<input type="reset">

Button

• Button: defines a normal button that doesn't submit the form

<input type="button" value="Click">

Image

• Defines an image as a submit button.
• Path to the image is specified in the src attribute.

<input type="image" src="img_submit.gif" alt="Submit">

Hidden

• Defines a hidden input field
• Allows to include data that cannot be seen or modified by users when a form is submitted.
• Often stores the id of the database record that needs to be updated when the form is submitted.
• Do not use hidden inputs as a form of security!

<input type="hidden" value="1" name="product-id">

File

• Defines a file-select field and a "Browse" button for file uploads.

<form>
  <label for="user-profile">Select a file:</label>
  <input type="file" id="user-profile" name="user-profile">
</form>

Number

• Defines a numeric input field.
• You can also set restrictions on what numbers are accepted.

<form>
  <label for="quantity">Quantity (between 1 and 10):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="10" step="2">
</form>

Range

• Defines a control for entering a number
• Displayed like a slider control
• Default range is 0 to 100.
• You can set restrictions on what numbers are accepted with the min, max, and step attributes:

Email

• Used for input fields that should contain an e-mail address.
• Depending on browser support, the e-mail address can be automatically validated when submitted.

<form>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email">
</form>

Tel

<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">

Url

• Used for input fields that should contain a URL address.
• Depending on browser support, the url field can be automatically validated when submitted.

<input type="url">

Date and time

<input type="date">
<input type="datetime-local">
<input type="time">

Month Year and Week

• Allows the user to select a month and year.
• Depending on browser support, a date picker can show up in the input field.

<input type="month">
<input type="week">

Color

<input type="color" id="favcolor" name="favcolor">