<input>

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 that 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 examples uses a <form> element that features <input> elements:

<html>
<head> </head>
<body>
<form>
<!-- This input type requires the user to enter a valid email address -->
<label>Email Address</label>
<input type="email" />
<!-- This input hides the typed password with ****s -->
<label>Password</label>
<input type="password" />
<!-- This input provides a checkbox -->
<input type="checkbox" /><label>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>

Rendered <input> tag example

Edit this page on GitHub

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your feedback form.

Learn HTML on Codecademy