HTML Input Types

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.

You can also search for these topics, html input types mdn, html input types number, decimal, textbox, date, file, number maxlength, web address, slider, search, float, file accept, html5, hidden, multiline, example.

Input Type Text and Input Type Password

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" />

Output :-

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

You can also search for these topics, input type=text, bootstrap, max value, attributes, input type text allow only numbers, input type text multiline, allow only alphabets, input type text size, how to show and hide password using eye icon in html, input type password asterisk html, html input type password autocomplete off, password and number, min length, maxlength, password hidden.

Input Type Radio and Input Type Checkbox

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">
  <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" />

Output :-


Your Interest:

You can also search for these topics, input type=radio checked, radio value in html, radio disabled, required, attributes, radio button, how to use input type radio in html, radio button list, radio button group example, input type=checkbox, checked, checkbox disabled, multiple checkbox in html, checkbox value, checkbox attributes properties, checked event html, how to use input type checkbox in html.

Input Type Submit, Reset, and Button

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.


<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 />
  <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 />
  <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" />

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.

You can also search for these topics, input type=submit onclick, submit attributes in html, submit html onclick, submit vs button, action, submit example, html input type reset onclick, reset not working, file reset, reset attributes, image reset button, date reset, go to url, money, input type=button onclick, input type button in html form, bootstrap, how to use input type button in html, how to add icon in input type button, button method, margin, mailto.

Input Restrictions

A list of some common input limitations is provided below :

Attribute Description
checked When the page loads, this property specifies that an input field should be pre-selected.
disabled Allows you to disable a certain input field.
max Sets the maximum value for input field.
min Sets the minimum value for input field.
maxlength Sets the maximum amount of characters that can be entered into an input field.
pattern Sets a regular expression to compare the supplied value to.
readonly Declares a field to be read-only (cannot be changed).
required Indicates whether or not an input field is necessary (must be filled out).
size The width of an input field (in characters) is specified.
step For an input field, this property specifies the allowed number intervals.
value Sets the value of an input field's default value.

You can also search for these topics, html input name, number and text restrictions, html5 date and time restrictions, input box restrict characters.

Input Type Number and Input Type Range

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" />

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.

You can also search for these topics, html input type number example, maxlength, decimal, number without arrows, min max, only positive number, default value, number not working in firefox, allow only numbers, hide arrows, number validation, min max not working, box size, number limit length, decimal places, set default value, input type range vertical html, html range slider with labels, range min max, range attributes, range size, multiple range.

Input Type Email, Input Type URL, and Input Type Tel

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" />

Output :-

You can also search for these topics, HTMl Input Type Email example, Email pattern and validation, equired, Email not working, input type url example, html url pattern and validation, url without http, submit url, html input type tel example, accepting characters, tel format, tel only numbers, tel validation, tel not working, maxlength.

Input Type Color

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" />

Output :-

You can also search for these topics, html input type color example, color list, attributes, set default value, get color value.

Input Type Date, Input Type Time, and Input Type Datetime Local

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.


<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" />

Output :-

You can also search for these topics, how to set current date in input type=date in html, how to display current date in html textbox, date default value, date format change, date not working, how to set input date format, date today, min max, date mask, minimum, input type=time with am/pm in html, input type=time 24 hour format in html, time step 15 minutes, without am/pm, set current time, time min max, time change format, datetime-local format value, seconds, default value, datetime local pattern, date time local example.

Input Type Month and Input Type Week

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" />

Output :-

You can also search for these topics, input type=month example, month default value, month format, month min max, month and year, day and month, date calendar, week size, week month, multiline, week number decimal.