HTML <Input> Attributes

This article discusses regarding HTML Input attributes . There are several HTML attributes that can be applied to the <input> element. This chapter explains these attributes in detail.

Value Attribute

When an input field is accessed through an HTML input attributes, its value is entered as follows:

The following fields have default values (initial):

Example

<!DOCTYPE html> <html> <body><form> <label for="fname">Tesla owner first name:</label><br> <input type="text" id="fname" name="fname" value="Elon"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Musk"> </form></body> </html>
Table Of Content-

Disabled Attribute

In HTML input attributes, the input disabled attribute signifies that input fields should be disabled so that they cannot be filled in.

When an input field is disabled, it is useless and cannot be clicked.

Form submissions will not send the value of disabled input fields!

There is an input field that is disabled:

Example

<!DOCTYPE html> <html> <body><form> <label for="fname">Tesla owner first name:</label><br> <input type="text" id="fname" name="fname" value="ELon" is disabled here><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Musk"> </form></body> </html>

The disabled attribute can also be applied to the buttons here is an example how:

Example: 

<!DOCTYPE html> <html> <head> </head> <body> <form> <p>User Name: <input type="text" name="uname"></p> <p> <input type="submit" value="Submit"> <input type="button" value="Check " disabled> </p> </form> </body> </html>

Readonly Attribute

In HTML input attributes, input readonly indicates a read-only input field.

Unlike editable input fields, read-only input fields cannot be customized (although users can highlight them and copy their contents).

When submitting a form, the value of a read-only input field will be sent.

The following input field is read-only:

Example

<!DOCTYPE html> <html> <body><form> <label for="fname">Tesla owner first name:</label><br> <input type="text" id="fname" name="fname" value="Elon" is readonly><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="musk"> </form></body> </html>

Size Attribute

The input size attribute in HTML input attributes indicates how wide an input field will render in characters. It defines the size in characters of the input field.

Size is set to 20 by default.

It is imperative to note that the size attribute works with the following input types: text, search, tel, url, email, and password.

To set the width of an input field, follow these steps:

Example

<!DOCTYPE html> <html> <body><form> <label for="fname">Owner First Name:</label><br> <input type="text" id="fname" name="fname" size="50"><br> <label for="pin">PIN:</label><br> <input type="text" id="pin" name="pin" size="4"> </form></body> </html>

Min and Max Attributes

HTML input attributes input Min and Max indicate the minimum and maximum values for input fields.

Input types for the min and max attributes consist of number, range, date, datetime-local, month, time, and week.

You can create a range of legal values by using the max and min attributes in conjunction with each other.

You can set a maximum date, a minimum date, and a range of legal values in order to achieve this:

Example

<!DOCTYPE html> <html> <body></body></html>

Here is another example of the max and min attribute on the text field:

Example: 

<!DOCTYPE html> <html> <body> <form> <div> <label for="choose">Which book you prefer a Ulysses or a lolita?</label> <input type="text" id="choose" name="fav" required minlength="7" maxlength="7"> </div> <div> <button>Submit</button> </div> </form> </body> </html>

Maxlength Attribute

An input field’s maximum length is controlled by the input maxlength attribute in HTML input attributes. It indicates how many characters are permitted in an input field.

Maxlength defines the maximum number of characters the input field will permit. In spite of this, this attribute provides no feedback.

You must write JavaScript code if you want to alert the user.

An input field’s maximum length can be set as follows:

Example

<!DOCTYPE html> <html> <body><form> <label for="fname">Owner first name:</label><br> <input type="text" id="fname" name="fname" size="50"><br> <label for="pin">PIN:</label><br> <input type="text" id="pin" name="pin" maxlength="4" size="4"> </form></body> </html>

Multiple Attribute

There is an input multiple attribute that signifies that a user is permitted to enter more than one value into an input field.

Multiple attributes work with email, and file input types in HTML forms.

Multiple values can be entered in a file upload field:

Example

<!DOCTYPE html> <html> <body></body></html>

Multiple attribute can be defined to only type that would be selected here is an example:

Example: 

<!DOCTYPE html> <html> <head> </head> <body> <form> <label for="picture">Choose your picture:</label> <input type="file" id="picture" name="picture" accept="image/png, image/jpeg"> <input type="submit" value="submit"> </form> </body> </html>

Placeholder Attribute

In HTML input attributes, input placeholders indicate a short description of a field’s expected value (a sample value or a short description of its expected format).

A short hint appears before the user enters a value in the input field.

Input types supported by the placeholder attribute include:

  1. Text
  2. Search
  3. Url
  4. Tel
  5. Email
  6. Password

There is a placeholder text in the input field:

Example: 

<!DOCTYPE html> <html><body><br><br><br><br><form><br><label for="phone">Enter a phone number:</label><br><br><input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"><br></form><br><br> </body></html>

Pattern Attribute:

A regular expression is required when the input pattern attribute is included in HTML input attributes, so that the input field’s value is validated based on it.

Input types supported by the pattern attribute include:

  1. Text
  2. Date
  3. Search
  4. Url
  5. Tel
  6. Email
  7. Password

You can help the user by describing the pattern through the global title attribute.

Please take a look at our JavaScript tutorial for more information about regular expressions.

A text area that can consist of only three letters with no numbers or special characters (for example, a capital letter):

Example

<!DOCTYPE html> <html> <body></body></html>

The pattern attibute is useful in many areas here is an example of pattern attribute in the input type email:

Example: 

<!DOCTYPE html> <html> <head> </head> <body> <form> <div class="emailBox"> <label for="emailAddress">Your email address</label><br> <input id="emailAddress" type="email" size="32" maxlength="32" required placeholder="[email protected]" pattern=".+@.+\.com" title="Please provide valid email address"> </div> <input type="submit" value="Send"> </form> </body> </html>

Required Attribute

HTML input attributes like input required specify that input fields must be filled out before submitting.

It works with the following input types:

  1. Text
  2. Date pickers
  3. Search
  4. Url
  5. Tel
  6. Number
  7. Checkbox
  8. File
  9. Radio
  10. Email
  11. Password

The following input field is required:

Example

<!DOCTYPE html> <html> <body><form> <label for="username">Username:</label> <input type="text" id="username" name="username" required> </form></body> </html>

Autofocus Attribute

When the page loads, the input autofocus attribute ensures that the input field proactively gains focus.

Once the page loads, the “Owner first name:” input field will automatically gain focus:

Example

<!DOCTYPE html> <html> <body><form> <label for="fname">Owner first name:</label><br> <input type="text" id="fname" name="fname" autofocus><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname"> </form></body> </html>

Here is a complete example of the autofocus attribute in a form:

Example: 

<!DOCTYPE html> <html> <body> <h2>Total Marks</h2> <form action="" accept-charset="ISO-8859-1"> <label for="id">ID:</label> <input type="text" name="id"><br> <label for="course">Course:</label> <input type="text" name="course" autofocus><br> <label for="grade">Grade:</label> <input type="text" name="grade"><br> <label for="marks">Marks:</label> <input type="number" name="marks"><br><br> <input type="submit"> </form> </body> </html>

Step Attribute

In HTML input attributes, the input step attribute identifies a legal number interval for an input field.

As an example, if step=”3″, legal numbers could be -3, 0, 3, 6, etc.

To generate a range of legal values, pair this attribute with the max and min attributes.

Numbers, ranges, dates, datetime-local, months, times, and weeks are all supported by the step attribute.

Input field with legal number intervals:

Example

<!DOCTYPE html> <html> <body><form> <label for="points">Points:</label> <input type="number" id="points" name="points" step="3"> </form></body> </html>

Additional Information : There are many ways to add illegal input to JavaScript, and input restrictions are not 100% reliable. It is also necessary for the receiver (the server) to check input in order to restrict it safely!

Height and Width Attributes

An <input type=”image”> element’s height and width are determined via the input height and width properties.

Suggestions: When adding an image to an HTML <input>, be sure to include both the height and width parameters. If the image’s height and width are predetermined, the necessary space is allocated when the website loads.

Without these parameters, the browser is unable to allocate enough space for the picture since it is unsure of its size.

The result will be a tweak in the website layout as it loads (while the images load).

Consider an image to be the submit button with characteristics for height and width:

Example

<!DOCTYPE html> <html> <body><form> <label for="fname">owner 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="image" src="img_submit.gif" alt="Submit" width="60" height="60"></form></body> </html>

Autocomplete Attribute

The autocomplete property indicates whether autocomplete should be turned on or disabled for a form or input field.

With autocomplete, the web browser may anticipate the value. Based on previously entered values in HTML input attributes, the browser should provide alternatives to the user when they begin to text in a field.

The autocomplete property is supported by form> and the input> types listed below:

  1. Text
  2. Date pickers
  3. Search
  4. Url
  5. Phone
  6. Colour
  7. range
  8. Email
  9. Password

An HTML input with autocomplete enabled for one input field and disabled for the others:

Example

<!DOCTYPE html> <html> <body><form action="/action_page.php" autocomplete="on"> <label for="fname">Owner first name:</label> <input type="text" id="fname" name="fname"><br> </form></body></html>

Piece of advice: In certain browsers, you may have to enable the autocomplete feature (see under “Preferences” in the browser’s menu).

List Attribute

The input list attribute, when referring to HTML input attributes, designates a <datalist> element that has pre-defined choices for an <input> element.

Pre-defined values for an <input> element in a <datalist>:

Example

<!DOCTYPE html> <html> <body><form> <input list="Tech companies"> <datalist id="Tech companies"> <option value="Tesla"> </option><option value="SpaceX"> </option><option value="Google"> </option><option value="Apple"> </option><option value="Microsoft"> </option></datalist> </form></body> </html>

HTML Form and Input Elements

TagOverview
<form>Creates a user-input HTML form.
<input>Specifies a control input.

Tip: Visit our HTML Tag Reference for a comprehensive list of all possible HTML tags.

HTML <Input> Attributes Advanctages

HTML input attributes offer a number of advantages when creating web forms or other user input scenarios:

  • Improved user experience: HTML input attributes can help guide users by providing helpful hints or required fields. This can make the user experience more intuitive and improve the chances of users successfully submitting the form.
  • Flexibility: The range of input types and attributes available with HTML input elements makes it possible to create a variety of custom form controls to suit different needs.
  • Accessibility: Certain attributes, such as the “required” attribute, can make web forms more accessible for users with disabilities by providing clear guidance on how to complete the form.
  • Simplified validation: HTML input attributes can be used to validate form data before it is submitted, which can help reduce errors and prevent incomplete or inaccurate data from being entered.
  • Improved security: HTML input attributes can be used to prevent malicious attacks, such as SQL injection or cross-site scripting, by validating data before it is submitted.

If this article helped you to fulfill your educational desire in anyway, do share this meaningful with your friends as well.
We value your feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!
icon
By subscribing, you agree with our privacy policy and our terms of service.

Leave a Reply

Your email address will not be published. Required fields are marked *