HTML: Hypertext Markup Language (Input Attributes)

An HTML tutorial for beginners | Input Attributes with Examples

In this article, we will learn about HTML input attributes in detail.{alertSuccess}

HTML Input Attributes

{tocify} $title={Table of Contents}

The Value Attributes

The input value attribute determines an initial value for an input field:

Example

Input fields with initial (default) values:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>{codeBox}

The readonly Attribute

The input readonly attribute determines that an input field is read-only.

A read-only input field cannot be changed (however, a user can tab to it, highlight it, and copy the text from it).

When you submit the form, then the read only value of the input field is sent.

Example

A read-only input field:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" readonly><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>{codeBox}

The disabled Attribute

The input disabled attribute defines that an input field should be disabled.

A disabled input field is useless and un-clickable.

The value of a disabled input field will not be mailed when submitting the form!

Example

A disabled input field:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" disabled><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>{codeBox}

The size Attribute

The input size attribute determines the visible width, in characters, of an input field.

The default value for size is 20.

Note: The size attribute functions with the following input types: text, search, tel, URL, email, and password.{alertInfo}

Example

Set a width for an input field:

<form>
  <label for="fname">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>{codeBox}

The max length Attributes

With input maxlength attributes, the maximum number of characters to be allowed in the input field can be specified.

Example

Set a maximum length for an input field:

<form>
  <label for="fname">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>{codeBox}

The min and max Attributes

The input min and max attributes specify an input field's minimum and maximum values.

The min and max attributes function with the following input types: 

“Number, range, date, datetime-local, month, time and week.”

Bonus: Utilize the max and min attributes together to make a range of legal values.{alertInfo}

Example

Set a max date, a min date, and a range of legal values:

<form>
  <label for="datemax">Enter a date before 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>

  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>

  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">

</form>{codeBox}

The Multiple Attributes

The input multiple attribute determines that the user is permitted to enter more than one value in an input field.

The multiple attribute functions with the following input types: email, and file.

Example

A file upload field that accepts multiple values:

<form>
  <label for="files">Select files:</label>

  <input type="file" id="files" name="files" multiple>

</form>{codeBox}

The pattern Attribute

The input pattern attribute determines a regular expression in which the input field's value is checked against when the form is submitted.

The pattern attribute functions with the following input types: text, date, search, URL, tel, email, and password.

Example

An input field that can contain only three letters (no numbers or special characters):

<form>
  <label for="country_code">Country code:</label>

  <input type="text" id="country_code" name="country_code"
  pattern="[A-Za-z]{3}" title="Three letter country code">

</form>{codeBox}

The placeholder Attribute

The input placeholder attribute determines a short hint that represents the expected value of an input field (a sample value or a short explanation of the expected format).

The short hint is shown in the input field before the user enters a value.

The placeholder attribute functions with the following input types: text, search, URL, tel, email, and password.

Example

An input field with a placeholder text:

<form>
  <label for="phone">Enter a phone number:</label>

  <input type="tel" id="phone" name="phone"
  placeholder="123-45-678"
  pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">

</form>{codeBox}

The required Attribute

The input required attribute determines that an input field must be filled out before submitting the form.

The required attribute functions with the following input types: text, search, URL, tel, email, password, date pickers, number, checkbox, radio, and file.

Example

A required input field:

<form>

  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>

</form>{codeBox}

The step Attribute

The input step attribute determines the legal number intervals for an input field.

Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.

Suggestion: This attribute can be utilized together with the max and min attributes to make a range of legal values.

The step attribute functions with the following input types: number, range, date, datetime-local, month, time, and week.

Example

An input field with a specified legal number intervals:

<form>

  <label for="points">Points:</label>
  <input type="number" id="points" name="points" step="3">

</form>{codeBox}

The autofocus Attribute

The input autofocus attribute determines that an input field should automatically get focus when the page loads.

Example

Let the “First name” input field automatically get focus when the page loads:

<form>

  <label for="fname">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>{codeBox}

The height and width Attributes

The input height and width attributes determine the height and width of an <input type="image"> element.

Advice: Always determine both the height and width attributes for images. If height and width are set, the space needed for the image is reserved when the page is loaded. 

Without these attributes, the browser does not understand the size of the image and cannot reserve the appropriate space. 

The effect will be that the page layout will adjust during loading (while the images load).

Example

Define an image as the submit button, with height and width attributes:

<form>

  <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="image" src="img_submit.gif" alt="Submit" width="48" height="48">

</form>{codeBox}

The list Attribute

The input list attribute refers to an <datalist> element that includes pre-defined options for an <input> element.

Example

An <input> element with pre-defined values in a <datalist>:

<form>
<input list="browsers">

<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

</form>{codeBox}

The autocomplete Attribute

The input autocomplete attribute determines whether a form or an input field should include autocompleting on or off.

Autocomplete authorizes the browser to predict the value. When a user starts to type in a field, the browser should show options to fill in the field based on before-typed values.

The autocomplete attribute functions with <form> and the following <input> types: text, search, URL, tel, email, password, datepickers, range, and color.

Example

An HTML form with autocomplete on, and off for one input field:

<form action="/action_page.html" autocomplete="on">

  <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>
  <label for="email">Email:</label>

  <input type="email" id="email" name="email" autocomplete="off"><br><br>

  <input type="submit" value="Submit">

</form>{codeBox}

Note: In some browsers, you may require to activate an autocomplete process for this to work (Look under "Preferences" in the browser's menu).{alertInfo}

Conclusion:

Friends, according to my expertise, I have written complete information to help you with “<html>: Hypertext Markup Language (Forms Input Attributes).” If this post is favorable for you or not, please tell me by commenting.

If you liked this post, do not forget to share it with your friends so they can get information about it.

You can ask us through comments if you still have questions or doubts, I will answer all your questions, and you can contact us for more information.

Please tell us through the comment section if you think we miss anything.

To be published, comments must be reviewed by the administrator.*

Previous Post Next Post