HTML Input Types

The various forms of HTML input elements are described in this chapter.

The various HTML input types are listed below :

• type="button"
• type="checkbox"
• type="color"
• type="date"
• type="datetime-local"
• type="email"
• type="file"
• type="hidden"
• type="image"
• type="month"
• type="number"
• type="password"
• type="radio"
• type="range"
• type="reset"
• type="search"
• type="submit"
• type="tel"
• type="text"
• type="time"
• type="url"
• type="week"

Tip :- The type attribute has the value "text" as its default value.

The type="text" defines a single line text input field. Its used to get an input (general or non-sensitive information) from users like name, city, and so on.

The type="password" defines a password field. Its used to get an input (sensitive information) from users like password, credit card number, and so on.

Tip: The characters in a password field are masked (shown as asterisks or circles).

Example :-

<form action="html-resources/submit.aspx" target="_blank">
  <label for="name">Name:</label><br />
  <input type="text" id="name" name="name" /><br />
  <label for="pwd">Password:</label><br />
  <input type="password" id="lname" name="lname" /><br />
  <input type="submit" value="Submit" />
</form>

Output :-

Password fields have their characters masked (shown as asterisks or circles).

The type="radio" defines a single radio button. The Radio Buttons allow a user to choose ONLY ONE option from a group of options.

The type="checkbox" defines a single checkbox. A user can select multiple items from a list of items using checkboxes.

Example :-

<form action="html-resources/submit.aspx" target="_blank">
  Gender: 
  <input type="radio" id="gender1" name="gender" value="Male" />
  <label for="gender1">Male</label>
  <input type="radio" id="gender2" name="gender" value="Female" />
  <label for="gender2">Female</label>
  <input type="radio" id="gender3" name="gender" value="Others" />
  <label for="gender3">Others</label><br /><br />
  Your Interest: 
  <input type="checkbox" id="hobby1" name="hobby" value="Sports" />
  <label for="hobby1">Playing Sports</label>
  <input type="checkbox" id="hobby2" name="hobby" value="Movies " />
  <label for="hobby2">Watching Movies</label>
  <input type="checkbox" id="hobby3" name="hobby" value="Books" />
  <label for="hobby3">Reading Books</label><br /><br />
  <input type="submit" value="Submit" />
</form>

Output :-

There are 3 types of buttons in html, which is:

• Submit button
• Reset button
• Javascript/Normal button

The type="submit" defines a button for submitting form data to a form-handler. A server page with a script for processing input data is commonly used as the form-handler.

The action property of the form specifies the form-handler.

The type="reset" specifies a button that resets all form values to their default settings.

The type="button" defines a button that is used to execute javascript code on a html page. It is the most used button on html page to validate user inputs, perform any client side action, and so on.

Example:-

<form action="html-resources/submit.aspx" target="_blank">
  <label for="name">Name:</label><br />
  <input type="text" id="Text3" name="name" value="Suresh" /><br />
  <label for="pwd">Password:</label><br />
  <input type="password" id="Password3" name="pwd" value="123" /><br />
  Payment: 
  <input type="radio" id="Radio7" name="payment" value="Cash" checked="checked" />
  <label for="Radio7">Cash</label>
  <input type="radio" id="Radio8" name="payment" value="Credit Card" />
  <label for="Radio8">Credit Card</label><br />
  Items: 
  <input type="checkbox" id="Checkbox1" name="items" value="Laptop" checked="checked" />
  <label for="Checkbox1">Laptop</label>
  <input type="checkbox" id="Checkbox2" name="items" value="Mobile" checked="checked" />
  <label for="Checkbox2">Mobile</label><br /><br />
  <input type="submit" value="Submit" />
  <input type="reset" value="Reset" />
  <input type="button" onclick="alert('Hello World!')" value="Click Me" />
</form>

Output :-

If you click "Submit", the form-data will be sent to a page called "submit.aspx".

Tip: When you change the input values and then click the "Reset" button, the form-data is reset to its default values.

A list of some common input limitations is provided below :

The type="number" defines a numeric input field (look like a text field).

The type="range" defines a numeric input field (look like a slider control).

Both fields are used to set limitations on the accepted numbers and display a range of values from 1 to 5, or from 10 to 100, and etc.

You can use the min, max and step attributes to add numeric restrictions in the input field.

Exmaple :-

<form action="html-resources/submit.aspx" target="_blank">
  <label for="quantity">Quantity (between 1 and 20 with increment 2):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="20" step="2" /><br /><br />
  <label for="age">Age (between 18 and 60):</label>
  <input type="range" id="Range2" name="age" min="18" max="60" /><br /><br />
  <input type="submit" value="Submit" />
</form>

Output :-

Note: Enter or type some out of range number and then click the "submit" button.

Note: Depending on browser support: The input type "range" can be displayed as a slider control.

The type="email" defines a input text fields that need to contain an e-mail address.

The type="url" defines a input text fields that need to contain a URL address.

The type="tel" defines a input text fields that need to contain a telephone number.

These input fields (e-mail, url and telephone numbers) are automatically validated when submitted, depending on browser support.

Note: To match email input and url input, some smartphones recognise the input type and add ".com" to the keyboard.

Example :-

<form action="html-resources/submit.aspx" target="_blank">
  <label for="email">Enter your email:</label><br />
  <input type="email" id="email2" name="email" /><br />
  <label for="homepage">Add your homepage:</label><br />
  <input type="url" id="Url2" name="homepage" /><br />
  <label for="phone">Enter a phone number:</label><br />
  <input type="tel" id="Tel2" name="phone" placeholder="123-45-678" 
            pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required /><br />
  <input type="submit" value="Submit" />
</form>

Output :-

The type="color" defines an input fields that should contain a color.

A color picker dialog might appear in the input area depending on browser support.

Example :-

<form action="html-resources/submit.aspx" target="_blank">
  <label for="favcolor">Select your favorite color:</label>
  <input type="color" id="favcolor" name="favcolor" value="#25796f" />
  <input type="submit" value="Submit" />
</form>

Output :-

The type="date" is used to defines a input date field. A date picker dialog may appear to select a date from the input field. It display only date without time.

The type="time" is used to defines a input time field. A time picker dialog may appear and it allows the user to select a time (without time zone). It show only time not date.

The type="datetime-local" defines a input field to set date and time (no time zone).

All dialog picker may appear in the input box if your browser supports it.

Example:-

<form action="html-resources/submit.aspx" target="_blank">
  <label for="mydate">Select a date:</label>
  <input type="date" id="Date2" name="mydate" /><br /><br />
  <label for="mytime">Select a time:</label>
  <input type="time" id="Time1" name="mytime" /><br /><br />
  <label for="mydatetime">Select a date and time:</label>
  <input type="datetime-local" id="Datetime-local1" name="mydatetime" /><br /><br />
  <input type="submit" value="Submit" />
</form>

Output :-

The type="month" permits a month and a year to be selected.

The type="week" enables the user to select a week and a year.

Example :-

<form action="html-resources/submit.aspx" target="_blank"><br />
  <label for="bdaymonth">Select a month and year:</label>
  <input type="month" id="Month2" name="bdaymonth" /><br /><br />
  <label for="week">Select a week and year:</label><br />
  <input type="week" id="week3" name="week" /><br /><br />
  <input type="submit" value="Submit" />
</form>

Output :-