<input>

Published Jul 1, 2022Updated Jul 7, 2023

The <input> element creates an interactive element, usually used within a form to allow user input. It can be used to make text boxes, color pickers, date pickers, and other UI elements.

Syntax

<input />

The <input> element has no closing tag, meaning that it cannot have elements inside of it.

Attributes

Some common attributes used to set properties for the <input> element are shown below:

Attribute	Data Type	Description
`autocomplete`	String	Allows the browser to help the user fill in the field with previously typed data.
`checked`	Boolean	Used with radio buttons to indicate which one is currently selected, and checkboxes to indicate if it is currently checked.
`disabled`	Boolean	Marks the input field so that it will not accept input.
`max`	Number/String	Sets the maximum value for numeric inputs, ranges, dates, and times.
`min`	Number/String	Sets the minimum value for numeric inputs, ranges, dates, and times.
`maxlength`	Integer	Sets the maximum length of text, email, and password inputs.
`minlength`	Integer	Sets the minimum length of text, email, and password inputs.
`required`	Boolean	Specifies that the field must include a value. Can be written as `required="true"` or as just `required`.
`type`	String	Represents the input type, including common values like: `text`: Creates a single-line text box. `email`: Creates a single-line text box that can validate email addresses. `password`: Creates a single-line text box that hides the input from view. `checkbox`: Creates a box that can be selected/deselected. `radio`: creates a radio button allowing a user to select one choice from many options. `number`: Creates a text box that accepts numeric inputs only. `range`: Creates a slider that can accept values from a certain range. `date`: Creates a calendar picker to choose a date. `time`: Creates a text field for entering valid times. `file`: Creates a button that allows the user to send a file with the other form data. `submit`: Creates a button to submit a form.

Example

The following example uses <form> input elements. Within these elements, the for attribute is used to link the <label> to the id of the <input> element:

<html>
  <head> </head>
  <body>
    <form>
      <!-- This input type requires the user to enter a valid email address -->
      <label for="email">Email Address</label>
      <input type="email" id="email" />

      <!-- This input hides the typed password with ****s -->
      <label for="password">Password</label>
      <input type="password" id="password" name="password" />

      <!-- This input provides a checkbox -->
      <input type="checkbox" id="remember" value="remember" /><label
        for="remember"
        >Remember Me</label
      >

      <!-- This input provides a radio button group -->
      <label>
        <input type="radio" value="yes" name="contact_me" />
        Contact Me
      </label>
      <label>
        <input type="radio" value="no" name="contact_me" />
        Do Not Contact Me
      </label>

      <!-- This input will submit the form -->
      <input type="submit" value="Create Account" />
    </form>
  </body>
</html>