HTML input Tag: Main Tips
- The
<input>tag HTML creates an element for retrieving information from users. - The HTML
typeattribute of an<input>element creates differing input fields.
Use of input
input tag HTML specifies an element used to take values from the user. The <form> uses <input> to create input controls.
Note: the <input> tag HTML is nested within a <form> element.
Name: <input type="text" name="name"><br>Attributes for input
accept
It specifies the type of files that are accepted on the server from the file input.
<input type="file" name="picture" accept="image/*">align
It sets the horizontal and vertical alignment of input elements.
Note: not supported in HTML5.
Use CSS float property instead. Learn how in the CSS Layout Float and Clear
tutorial.
<input type="image" src="submit.png" alt="Proceed" align="right" width="50" height="50">alt
It indicates a text for an image input, shown instead when images do not load.
<input type="image" src="submit.png" alt="Proceed">autocomplete
It describes whether the input element should have autocomplete ON or OFF.
<input type="text" name="username" autocomplete="on">It applies to these HTML input types: url, search, tel, text, password, email, range, and color.
autofocus
It specifies the focus to be given automatically to a particular element when the page loads.
Remember: this attribute makes an <input> element become selected, so the element is visible once the page loads.
checked
It specifies whether a radio or checkbox inputs are already selected when the page loads.
<input type="checkbox" name="role" value="jobSeeker"> I am a Job Seeker<br>
<input type="checkbox" name="role" value="student" checked> I am a Student<br>dirname
It describes a direction for text submission.
<input type="text" name="city" dirname="cityname.dir">disabled
It indicates an input element which will not take values.
<input type="text" name="name" disabled>Note: this HTML input attribute keeps users from using the <input> element until some other conditions are met (such as agreeing with terms and conditions).
form
It specifies which forms are associated with one or more input elements.
<form id="travel">
Source: <input type="text" name="source"><br>
Days: <input type="text" name="days"><br>
<input type="submit" value="Calculate">
</form>
Destination: <input type="text" name="destination" form="travel">Note: to relate the element with multiple forms, list form IDs separated by spaces (all forms must be in the same file).
<form action="/learn/action.php" id="form1">
Name: <input type="text" name="name"><br>
Surname: <input type="text" name="surname" form="form1">
<input type="submit" value="Submit">
</form>
formaction
It indicates a link for form submission. It applies to the submit and image input types.
<form action="action.php">
Name: <input type="text" name="fir_name"><br>
Surname: <input type="text" name="las_name"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formaction="admin.php" value="Admin Submit">
</form>Note: when a submission button has the formaction attribute, it is possible to indicate multiple form submission URLs.
<form action="/login.php">
Your Username <input type="text" name="name"><br>
Your Password <input type="password" name="password"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formaction="/verify.php" value="Verify User">
</form>formenctype
It describes how the form data is encoded while submitting the form. Works with submit and image input types.
<form action="/verify.php" method="post">
Verify your Email: <input type="email" name="emailField"><br>
<input type="submit" formenctype="multipart/form-data" value="Submit">
</form><form action="/learn/demo_file.php" method="post">
Favourite color: <input type="text" name="color"><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data" value="Multipart & form-data Submition">
</form>formmethod
It defines a HTTP method for when server receives form data. Applicable on submit or image input types.
<form action="/submit.php" method="post">
Username: <input type="text" name="username"><br>
Password <input type="password" name="pass"><br>
Verify Password <input type="password" name="passcheck"><br>
<input type="submit" formmethod="post" value="Submit">
</form>Note: this attribute is prioritized over the method attribute used within the <form> tag.
<form action="/learn/form_methods.php" method="get">
Name: <input type="text" name="name"><br>
Surname: <input type="text" name="surname"><br>
<input type="submit" value="Submit">
<input type="submit" formmethod="post" formaction="/learn/form_methods.php" value="Submit with post">
</form>formnovalidate
It indicates that during submission, data does not have to be validated.
<form action="/submit.php" method="get">
Enter E-mail ID: <input type="email" name="userEmailID"><br>
Enter Username: <input type="text" name="userName"><br>
Enter Surname: <input type="text" name="userSurname"><br>
<input type="submit" formnovalidate="formnovalidate" value="Not Validated">
</form>Tip: this attribute gets prioritized over the regular novalidate attribute used within the <form> tag.
<form action="/learn/action_file.php">
Email of the user: <input type="email" name="useremail"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formnovalidate value="no validation submit">
</form>
formtarget
It specifies the location for opening the server response after form submission. This HTML input attribute is prioritized over the target attribute used within the <form> tag.
<form action="/learn/action.php">
Name: <input type="text" name="name"><br>
Surname: <input type="text" name="surname"><br>
<input type="submit" value="Submit as usual">
<input type="submit" formtarget="_blank_form_target" value="New Window Submit">
</form><form action="/reload_data.php" method="post">
Verify Email: <input type="email" name="emailVerify"><br>
Verify Phone No: <input type="text" name="number"><br>
<input formtarget="_blank" value="Open a new window and submit" type="submit">
</form>height
It sets the height of an input element of type image.
<input type="image" src="img.gif" alt="Submit" width="48" height="48">list
It defines a link between a datalist element and input element, using the list's ID.
Remember: the list contains pre-defined information that the associated input element can use.
<input list="books">
<datalist id="books">
<option value="Fiction">
<option value="Non-Fiction">
</datalist>This is how it would be presented in a webpage:
This is the code of the form element above:
<input list="animals">
<datalist id="animals">
<option value="Lama">
<option value="Fire fox">
<option value="Kitten">
<option value="Cat">
<option value="Cat again">
</datalist>
max
It sets the maximum input range for an input element.
<input type="number" name="age" min="18" max="25">The following code contains a combination of max and min:
Enter a number lesser than 10:
<input type="number" name="num" max="9">
Enter a number greater than 10:
<input type="number" name="num" min="11">
Quantity (between -10 and 10):
<input type="number" name="qty" min="-10" max="10">
maxlength
It sets the maximum number of characters the user can enter for an input element.
<input type="text" name="id" maxlength="12">min
It sets the minimum input range for an input element.
<input type="number" name="age" min="25">multiple
It specifies that the associated input element can take multiple values from the user.
<form action="/share.php">
Type emails: <input type="email" name="emails" multiple>
<!-- Type multiple emails separate each with a comma -->
<input type="submit">
</form>Remember: this attribute works with the email and file HTML input types.
In the example below, users can upload multiple images:
name
It defines a name for an input element, which is quite similar to ID.
<input type="text" name="client_name">
<input type="text" name="age">
pattern
It defines some common expressions, declaring constraints for the data given by the user through an input element.
<input type="text" name="name" pattern="[A-Z]{20}" title="Name in capital letters up to 20 characters">
<input type="password" name="password" pattern="[0-9A-Za-z]{8}" title="8 character password combination of letters and numbers">This attribute applies to these HTML input types: text, url, search, tel, email, and password.
Country code: <input type="text" name="code" pattern="[A-Za-z]{3}" title="Three letter country code">placeholder
It describes a line of text that can be used to inform users what values to provide.
<input type="email" name="email" placeholder="Enter Your Email!">The attribute placeholder applies to these HTML input types: text, ur, search, tel, email, and password.
readonly
It specifies that users won't be able to modify the value of the input.
<input type="email" name="email" value="hello@bitdegree.org" readonly>required
It specifies that the input field cannot be left blank when submitting the form.
<input type="password" name="password" required>It applies to these input types: text, url, search, email, tel, password, number, radio, checkbox, and file.
Also, it can be applied to these tags: <select>, and <textarea>.
size
It defines the width of an input element in characters.
<input type="text" name="phone" size="100">This attribute sets the size of the input element in characters. It applies to these HTML input types: text, search, url, email, password.
src
It indicates the source link of an image input.
<input type="image" src="arrow.png" alt="Submit">step
It defines the number of intervals as per which data is inserted into an input element. If you wrote step="2", viable inputs would be - 2, 0, 2, 4, etc.
<input type="number" name="expmonths" step="1">This attribute can be applied to these HTML input types: number, date, range, datetime-local, datetime, time, month, and week.
type
It specifies that users input specific type of data.
<input type="text" name="username">
<input type="number" name="phone">
<input type="email" name="email">Here are all the values this attribute can take in HTML5:
| button | checkbox | color | date | datetime-local | |
| file | hidden | image | month | number | password |
| radio | range | reset | search | submit | tel |
| text | time | url | week |
value
It sets a default value for an input element.
<input type="text" name="username" value="Charles">This attribute adds the default value of an <input> element. The use of this attribute may vary according to the input type. It is paired with:
- For a
button,reset,submit- sets the defaulttexton the button. - For
text,password- sets the defaultvalueof the input field. - For a
checkbox,radio,image- sets the selected inputvalue(the value that is submitted).
Note: this attribute cannot be used with the file input type.
width
It defines the width for an input element of image type.
<input type="image" src="send.gif" alt="Submit" width="56" height="56">