HTML Form Input Types

The different types for the HTML <input> element.

text – One-line text input field

password – One-line password input field

submit – Submit button to submit the form to the server

reset – Reset all values in the form

radio – Radio button which allows select one option

checkbox – Checkboxes which allow select multiple options form

button – Simple push button

file – Select the file from device storage

image – Graphical submit button

HTML5 added new types on <input> element:

color – Input field with a specific color

date – Input field for selection of date

datetime-local – Input field for entering a date without time zone

email – Entering an email address

month – Control with month and year, without time zone

number –  Input field to enter a number

URL – Entering URL

week – Enter the date with week-year, without time zone

search –  Entering a search string

tel – Entering the telephone number

<input type=”text”>:

<input type=”text”> are used to define a single-line input text field.

Example:

<form>
      <label>Enter first name</label><br>
      <input type="text" name="firstname"><br>
      <label>Enter last name</label><br>
      <input type="text" name="lastname"><br>      
</form>

OUTPUT:

<input type=”password”>: 

The <input> element of type “password” allow a user to enter the password securely on a webpage. The entered text in the password filed converted into “*” or “.” so that it cannot be read by another user.

Example:

<form>
      <label>Enter User name</label><br>
      <input type="text" name="firstname" ><br>
      <label>Enter Password</label><br>
      <input type="Password" name="password"><br>
      <br><input type="submit" value="submit">
</form>

OUTPUT:

<input type=”submit”>:

The <input> element of type “submit” defines a submit button to submit the form to the server-side when the “click” event occurs.

Example:

<form action="https://www.i2tutorials.com/">
     <label>Enter User name</label><br>
     <input type="text" name="firstname"><br>
     <label>Enter Password</label><br>
     <input type="Password" name="password"><br>
     <br><input type="submit" value="submit">
</form>

OUTPUT:

<input type=”reset”>:

The <input> type “reset” is also defined as a button but when the user performs a click event, it by default reset all inputted values.

Example:

<form>
      <label>User id: </label>
      <input type="text" name="user-id" value="user">
 <label>Password: </label>
      <input type="password" name="pass" value="pass"><br><br>       
      <input type="submit" value="login">
       <input type="reset" value="Reset">
</form>

OUTPUT:

<input type=”radio”>:

The <input> type “radio” defines the radio buttons, which allow choosing an option between a set of related options. At a time only one radio option can be selected.

Example:

<form>
 <p>Kindly Select your favorite color</p>
 <input type="radio" name="color" value="red"> Red <br>
 <input type="radio" name="color" value="blue"> blue <br>
 <input type="radio" name="color" value="green">green <br>
 <input type="radio" name="color" value="pink">pink <br>
 <input type="submit" value="submit">       
</form>

OUTPUT:

<input type=”checkbox”>:

The <input> type “checkbox” is displayed as square boxes that can be checked or unchecked to select the choices from the given options.

Example:

<form>
       <label>Enter your Name:</label>
       <input type="text" name="name">
   <p>Kindly Select your favorite sports</p>
   <input type="checkbox" name="sport1" value="cricket">Cricket<br>
       <input type="checkbox" name="sport2" value="tennis">Tennis<br>
       <input type="checkbox" name="sport3" value="football">Football<br>
       <input type="checkbox" name="sport4" value="baseball">Baseball<br>
       <input type="checkbox" name="sport5" value="badminton">Badminton<br><br>
       <input type="submit" value="submit">
</form>

OUTPUT:

<input type=”button”>:

The <input> type “button” defines a simple push-button, which can be programmed to control a functionally on any event such as, click event.

Example:

<p>Click the button to see the result: </p>
  <form>
  <input type="button" value="Click me" onclick="alert('you are learning HTML')">
 </form>

OUTPUT:

<input type=”file”>:

The <input> element with type “file” is used to select one or more files from user system device storage. Once you select the file, and after submission, this file can be uploaded to the server-side with the help of JS code and file API.

Example:

<form>
   <label>Select file to upload:</label>
   <input type="file" name="newfile">
   <input type="submit" value="submit">
</form>

OUTPUT:

HTML5 added new types on <input> element:

<input type=”color”>:

The <input> type “color” is used to define an input field that contains a color. Users specify the color by the visual color interface on a browser.

Example:

<form>
      Pick your Favorite color: <br><br>
      <input type="color" name="upclick" value="#a52a2a"> Up-click<br><br>
      <input type="color" name="downclick" value="#f5f5dc"> Down-click
</form>

OUTPUT:

<input type=”date”>:

The <input> element of type “date” generates an input field, which allows a user to input the date in a given format. User can enter the date by text field or date picker interface.

Example:

<form>
      Select Start and End Date: <br><br>
       <input type="date" name="Startdate"> Start date:<br><br>
       <input type="date" name="Enddate"> End date:<br><br>
        <input type="submit">
</form>

OUTPUT:

<input type=”datetime-local”>:

The <input> element of type “DateTime-local” creates an input filed that allows a user to select the date as well as local time in the hour and minute without time zone information.

Example:

<form> 
  <label> 
    Select the meeting schedule: <br><br> 
    Select date & time: <input type="datetime-local" name="meetingdate"> <br><br> 
  </label> 
    <input type="submit"> 
</form>

OUTPUT:

<input type=”email”>:

The <input> type “email” creates an input filed that allows a user to enter the e-mail address with pattern validation.

Example:

<form>
              <label><b>Enter your Email-address</b></label>
    <input type="email" name="email" required>
    <input type="submit">
    <br>
     <label><b>Enter multiple Email</b></label>
     <input type="email" name="email"  multiple><br>
    <input type="submit">
</form>

OUTPUT:

<input type=”month”>:

The <input> type “month” creates an input field that allows a user to easily enter month and year in the format of “MM, YYYY” where MM defines month value, and YYYY defines the year value.

Example:

<form>
    <label>Enter your Birth Month-year: </label>
    <input type="month" name="newMonth">
    <input type="submit">
</form>

OUTPUT:

<input type=”number”>:

The <input> element type number creates an input filed that allows a user to enter the numeric value and also restrict to enter a minimum value and maximum value using min and max attribute.

Example:

<form>
      <label>Enter your age: </label>
      <input type="number" name="num" min="50" max="80">
   <input type="submit">
</form>

OUTPUT:

<input type=”url”>:

The <input> element of type “URL” creates an input filed that enables the user to enter the URL.

Example:

<form>
      <label>Enter your website URL: </label>
      <input type="https://www.i2tutorials.com/" name="website" placeholder="http://example.com"><br>
      <input type="submit" value="send data">
</form>

OUTPUT:

<input type=”week”>:

The <input> type week creates an input field that allows a user to select a week and year form the drop-down calendar without a time zone.

Example:

<form>
      <label><b>Select your best week of year:</b></label><br><br>
      <input type="week" name="bestweek">
      <input type="submit" value="Send data">
</form>

OUTPUT:

<input type=”search”>:

The <input> type “search” creates an input filed that allows a user to enter a search string.

Example:

<form>
      <label>Search here:</label>
      <input type="search" name="q">
      <input type="submit" value="search">
</form>

OUTPUT:

<input type=”tel”>:

The <input> element of type tel creates an input filed to enter the telephone number. The “tel” type does not have default validation such as email, because the telephone number pattern can vary worldwide.

Example:

<form>
      <label><b>Enter your Telephone Number(in format of xxx-xxx-xxxx):</b></label>
   <input type="tel" name="telephone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
   <input type="submit"><br><br>
</form>

OUTPUT: