------------------- HTML Input Types ------------------- Here are the different input types you can use in HTML. * ```` * ```` * ```` * ```` * ```` * ```` * ```` * ```` * ```` * ```` * ```` * ```` * ```` * ```` * ```` * ```` * ```` * ```` * ```` * ```` * ```` * ```` Input Type Text ------------------- ```` defines a **one-line text input field**. Example: .. code-block:: html :linenos:

Text field

The input type="text" defines a one-line text input field:

First name:

Last name:

Note that the form itself is not visible.

Also note that the default width of a text field is 20 characters.

Input Type Password --------------------- ```` defines a **password field**. .. code-block:: html :linenos:
User name:

User password:
.. note:: The characters in a password field are masked (shown as asterisks or circles). Input Type Submit ---------------------- ```` defines a button for **submitting** form data to a **form-handler**. The form-handler is typically a server page with a script for processing input data. The form-handler is specified in the form's ``action`` attribute. Example: .. code-block:: html :linenos:
First name:

Last name:

Input Type Reset -------------------- ```` defines a **reset button** that will reset all form values to their default values. .. code-block:: html :linenos:
First name:

Last name:

.. Note:: If you change the input values and then click the **Reset button**, the form-data will be reset to the default values. Input Type Radio -------------------- ```` defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices. .. code-block:: html :linenos:
Male
Female
Other
Input Type Checkbox -------------------- ```` defines a **checkbox**. Checkboxes let a user select ZERO or MORE options of a limited number of choices. .. code-block:: html :linenos:
I have a bike
I have a car
Input Type Button -------------------- ```` defines a button. .. code-block:: html :linenos: HTML5 Input Types -------------------- HTML5 added several new input types: * color * date * datetime-local * email * month * number * range * search * tel * time * url * week .. Note:: New input types that are not supported by older web browsers, will behave as . .. code-block:: html :linenos:

Birthday:

Enter a date before 1980-01-01:

Enter a date after 2000-01-01:

Birthday (date and time):

E-mail:

Select a file:

Birthday (month and year):

Quantity (between 1 and 5):


Search Google:

Telephone:

Select a time:

Add your homepage:

Input Restrictions ------------------- Here is a list of some common input restrictions: +---------------+-----------------------------------------------------------------------+ | Attribute | Description | +===============+=======================================================================+ | disabled | Specifies that an input field should be disabled | +---------------+-----------------------------------------------------------------------+ | max | Specifies the maximum value for an input field | +---------------+-----------------------------------------------------------------------+ | maxlength | Specifies the maximum number of character for an input field | +---------------+-----------------------------------------------------------------------+ | min | Specifies the minimum value for an input field | +---------------+-----------------------------------------------------------------------+ | pattern | Specifies a regular expression to check the input value against | +---------------+-----------------------------------------------------------------------+ | readonly | Specifies that an input field is read only (cannot be changed) | +---------------+-----------------------------------------------------------------------+ | required | Specifies that an input field is required (must be filled out) | +---------------+-----------------------------------------------------------------------+ | size | Specifies the width (in characters) of an input field | +---------------+-----------------------------------------------------------------------+ | step | Specifies the legal number intervals for an input field | +---------------+-----------------------------------------------------------------------+ | value | Specifies the default value for an input field | +---------------+-----------------------------------------------------------------------+ The following example displays a numeric input field, where you can enter a value from 0 to 100, in steps of 10. The default value is 30: .. code-block:: html :linenos:

Numeric Steps

Depending on browser support:
Fixed steps will apply in the input field.

Quantity:

Note:type="number" is not supported in IE9 and earlier.