HTML

HTMLInputElement

HTMLInputElement <input>

The HTMLInputElement interface provides special properties and methods for manipulating the options, layout, and presentation of <input>elements.

The <input> tag designates a field for user-enterable data.
The most significant form element is the <input> element.
Depending on the type property, the <input> element can be presented in a number of different ways.

Attribute Value Description Example
accept file_extension Specify the file extension(s) (e.g: .gif, .jpg, .png, .doc) the user can pick from <input accept="file_extension|audio/*|video/*|image/*|media_type">
audio/* The user can pick all sound files
video/* The user can pick all video files
image/* The user can pick all image files
media_type A valid media type, with no parameters. Look at IANA Media Types for a complete list of standard media types
alt text Specifies an alternate text for images (only for type="image") <input type="image" src="submit.gif" alt="Submit" width="48" height="48">
autocomplete on Default. Specifies that autocomplete is on (enabled) <input type="email" id="email" name="email" autocomplete="off">
off Specifies that autocomplete is off (disabled)
autofocus autofocus Specifies that an <input> element should automatically get focus when the page loads <input type="text" id="fname" name="fname" autofocus>
checked checked Specifies that an <input> element should be pre-selected when the page loads (for type="checkbox" or type="radio") <form action="/action_page.php" method="get"> <input type="checkbox" name="vehicle1" value="Bike"> <label for="vehicle1"> I have a bike</label><br> <input type="checkbox" name="vehicle2" value="Car"> <label for="vehicle2"> I have a car</label><br> <input type="checkbox" name="vehicle3" value="Boat" checked> <label for="vehicle3"> I have a boat</label><br><br> <input type="submit" value="Submit"> </form>
dirname inputname.dir Specifies that the text direction will be submitted <input type="text" id="fname" name="fname" dirname="fname.dir">
disabled disabled Specifies that an <input> element should be disabled <input type="text" id="lname" name="lname" disabled>
form form_id Specifies the form the <input> element belongs to <input form="form_id">
formaction URL Specifies the URL of the file that will process the input control when the form is submitted (for type="submit" and type="image") <form action="/action_page.php"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="Submit"> <input type="submit" formaction="/action_page2.php" value="Submit to another page"> </form>
formenctype application/x-www-form-urlencoded Default. All characters are encoded before sent (spaces are converted to "+" symbols, and special characters are converted to ASCII HEX values) <input type="submit" formenctype="multipart/form-data" value="Submit as Multipart/form-data">
multipart/form-data This value is necessary if the user will upload a file through the form
text/plain Sends data without any encoding at all. Not recommended
formmethod Defines the HTTP method for sending data to the action URL (for type="submit" and type="image") <input formmethod="get|post">
get Default. Appends the form-data to the URL in name/value pairs: URL?name=value&name=value
post Sends the form-data as an HTTP post transaction
formnovalidate formnovalidate Defines that form elements should not be validated when submitted <input type="submit" formnovalidate="formnovalidate" value="Submit without validation">
formtarget _blank The response is displayed in a new window or tab <input formtarget="_blank|_self|_parent|_top|framename">
_self The response is displayed in the same frame (this is default)
_parent The response is displayed in the parent frame
_top The response is displayed in the full body of the window
framename The response is displayed in a named iframe
height pixels Specifies the height of an <input> element (only for type="image") <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
list datalist_id Refers to a element that contains pre-defined options for an <input> element <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Google Chrome"> <option value="Opera"> <option value="Safari"> </datalist>
max number Specifies the maximum value for an <input> element <input type="date" id="datemax" name="datemax" max="1979-12-31">
date Specifies the maximum date for an <input> element <input type="number" id="quantity" name="quantity" min="1" max="5">
maxlength number Specifies the maximum number of characters allowed in an <input> element <input type="text" id="username" name="username" maxlength="10">
min number Specifies the minimum value for an <input> element <input type="date" id="datemin" name="datemin" max="1979-12-31">
date Specifies the minimum date for an <input> element <input type="number" id="quantity" name="quantity" min="1" max="5">
minlength number Specifies the minimum number of characters required in an <input> element <input type="password" id="password" name="password" minlength="8">
multiple multiple Specifies that a user can enter more than one value in an <input> element <input type="file" id="files" name="files" multiple>
name text Specifies the name of an <input> element <input type="text" id="lname" name="lname">
pattern regexp Specifies a regular expression that an <input> element's value is checked against <input type="text" id="country_code" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
placeholder text Specifies a short hint that describes the expected value of an <input> element <input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
readonly readonly Specifies that an input field is read-only <input type="text" id="country" name="country" value="Norway" readonly>
required required Specifies that an input field must be filled out before submitting the form <input type="text" id="username" name="username" required>
size number Specifies the width, in characters, of an <input> element <input type="text" id="fname" name="fname" size="50">
src URL Specifies the URL of the image to use as a submit button (only for type="image") <input type="image" src="submit.gif" alt="Submit" width="48" height="48">
step number Specifies the interval between legal numbers in an input field.Default is 1. <input type="number" id="points" name="points" step="3">
any
type button Defines a clickable button (mostly used with a JavaScript to activate a script) <input type="button" value="Click me" onclick="msg()">
checkbox Defines a checkbox <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <label for="vehicle1"> I have a bike</label>
color Defines a color picker <label for="favcolor">Select your favorite color:</label> <input type="color" id="favcolor" name="favcolor" value="#ff0000">
date Defines a date control (year, month, day (no time)) <label for="birthday">Birthday:</label> <input type="date" id="birthday" name="birthday">
datetime-local Defines a date and time control (year, month, day, time (no timezone) <label for="birthdaytime">Birthday (date and time):</label> <input type="datetime-local" id="birthdaytime" name="birthdaytime">
email Defines a field for an e-mail address <label for="email">Enter your email:</label> <input type="email" id="email" name="email">
file Defines a file-select field and a "Browse" button (for file uploads) <label for="myfile">Select a file:</label> <input type="file" id="myfile" name="myfile">
hidden Defines a hidden input fieldDefines a hidden input field <input type="hidden" id="custId" name="custId" value="3487">
image Defines an image as the submit button <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
month Defines a month and year control (no timezone) <label for="bdaymonth">Birthday (month and year):</label> <input type="month" id="bdaymonth" name="bdaymonth">
number Defines a field for entering a number <label for="quantity">Quantity (between 1 and 5):</label> <input type="number" id="quantity" name="quantity" min="1" max="5">
password Defines a password field <label for="pwd">Password:</label> <input type="password" id="pwd" name="pwd">
radio Defines a radio button <p>Please select your favorite Web language:</p>   <input type="radio" id="html" name="fav_language" value="HTML">   <label for="html">HTML</label><br>   <input type="radio" id="css" name="fav_language" value="CSS">   <label for="css">CSS</label><br>   <input type="radio" id="javascript" name="fav_language" value="JavaScript">   <label for="javascript">JavaScript</label>
range Defines a range control (like a slider control) <label for="points">Points (between 0 and 10):> <input type="range" id="points" name="points" min="0" max="10">
reset Defines a reset button <input type="reset">
search Defines a text field for entering a search string <label for="gsearch">Search Google:</label> <input type="search" id="gsearch" name="gsearch">
submit Defines a submit button <input type="submit">
tel Defines a field for entering a telephone number <label for="phone">Enter your phone number:</label> <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
text Default. Defines a single-line text field <label for="fname">First name:</label> <input type="text" id="fname" name="fname">
time Defines a control for entering a time (no timezone) <label for="appt">Select a time:</label> <input type="time" id="appt" name="appt">
url Defines a field for entering a URL <label for="homepage">Add your homepage:</label> <input type="url" id="homepage" name="homepage">
week Defines a week and year control (no timezone) <label for="week">Select a week:</label> <input type="week" id="week" name="week">
value text Specifies the value of an <input> element <input type="text" id="lname" name="lname" value="Doe"> <input type="submit" value="Submit">
width pixels Specifies the width of an <input> element (only for type="image") <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

Browser Compatibility

Element Chrome Edge Firefox Safari Opera
<input> Yes Yes Yes Yes Yes