HTML Input Attributes

HTML Tutorial

HTML Forms

HTML Graphics

HTML Media

HTML API

HTML Input Attributes

The value Attribute

The input value attribute defines an initial or default value for an input field:

Example

				
					<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname" value="first name">
</form>

				
			

Output:

The readonly Attribute

The input readonly attribute defines that an input field is read-only, which means that the input field cannot be modified.

Example

				
					  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" readonly>

				
			

Output:



The disabled Attribute

The input disabled attribute defines that an input field must be disabled , which means that an input field is unusable and un-clickable.

Example

				
					  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" disabled><br>

				
			

Output:


<

The size Attribute

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

The default value for size is 20.

Example

				
					<label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>

				
			

Output:



The maxlength Attribute

The input maxlength attribute defines the maximum number of characters that are allowed in an input field.

				
					  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" maxlength="4" size="4">

				
			

Output:


The min and max Attributes

The input min and max attributes define the minimum and maximum values for the input field.

The min and max attributes are used with the following input types: number, range, date, DateTime-local, month, time, and week.

Example

				
					  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02">
  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">

				
			

Output:



The multiple Attribute

The input multiple attribute specifies enables the user to enter more than one value in an input field.

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

Example

				
					  <label for="files">Select files:</label>
  <input type="file" id="files" name="files" multiple>

				
			

Output:



The pattern Attribute

The input pattern attribute defines the regular expression for which the input field’s value is checked, when the form is submitted.

The pattern attribute is used with the following input types: text, date, search, url, tel, email, and password.

Example

				
					  <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">

				
			

Output:

The placeholder Attribute

The input placeholder attribute gives a short hint which defines the expected value of an input field.

The placeholder attribute is used with the following input types: text, search, url, tel, email, and password.

Example

				
					  <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}">

				
			

Output:

The required Attribute

The input required attribute defines an input field to be filled out before submitting the form

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

Example

				
					  <input type="text" id="username" name="username" required>
				
			

Output:

The step Attribute

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

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

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

Example

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

				
			

Output:

The autofocus Attribute

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

Example

				
					  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" autofocus><br>

				
			

Output:



The height and width Attributes

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

				
					  <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
				
			

Output: