<input>



HTML <input> Tag


The <input> tag is used to create interactive controls for web-based forms in order to accept data from the user.

The <input> tag does not have closing tag.

The <input> tag must have type attribute, or else it will be considered as a text box.

The type attribute of the <input> element can be: button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text (default), time, url or week.


 Following is a list of all  <input> elements of HTML

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

1. <input type="text">

<input> element of type "text" is used to define a single-line input text field.


Example :

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

Output :


2. <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. A user can enter the date by text field or by date picker interface.


Example :

<!DOCTYPE html>
<html>
  <head>
    <title>HTML date Type</title>
  </head>

  <body>
    <h2>Example of date Type</h2>
    <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>
  </body>
</html>

Output :


3. <input type="datetime-local">

The <input> element of type "datetime-local" creates input filed which allow 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 :


4. <input type="email">

The <input> type "email" creates an input filed that allows a user to enter the e-mail address with pattern validation. The multiple attributes allow a user to enter more than one email address


Example :

<form>
  <label><b>Enter your Email-address</b></label>
  <input type="email" name="email" required />
  <input type="submit" />
  <p>
    <strong>Note:</strong>User can also enter multiple email addresses separating by comma or whitespace as following:
  </p>
  <label><b>Enter multiple Email-addresses</b></label>
  <input type="email" name="email" multiple />
  <input type="submit" />
</form>

Output :


5. <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 :


6. <input type="number">

The <input> element type number creates input filed which allows a user to enter the numeric value. You can also restrict entering a minimum and maximum value using the min and max attributes.


Example : 

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

Output :


7. <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="url" name="website" placeholder="http://example.com" /><br />
  <input type="submit" value="send data" />
</form>

Output :


8. <input type="week">

The <input> type week creates an input field that allows a user to select a week and year from 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 :


9. <input type="search">

The <input> type "search" creates an input filed that allows a user to enter a search string. These are functionally symmetrical to the text input type but may be styled differently.


Example :

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

 


Output :


10. <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 telephone number patterns 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 :


Note: Here we are using two attributes that are "pattern" and"required" which will allow the user to enter the number in a given format and it is required to enter the number in the input field.

Other Input Fields in this Topic: Click Here