Advertisement

Advertisement


Form Input Attribute

The Value Attribute

The value attribute specifies the initial value for an input field.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Value Attribute </title>
</head>
<body>
<form action="#">
First name:
<input type="text" name="firstname" value="John">
Last name:
<input type="text" name="lastname">
</form>
</body>
</html>

Output

HTML Form Value Attribute Examples
First name: Last name:

The Readonly Attribute

The readonly attribute specifies that the input field is read only that means the value of input field cannot be changed.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Readonly Attribute </title>
</head>
<body>
<form action="#">
First name:
<input type="text" name="firstname" value ="John" readonly>
Last name:
<input type="text" name="lastname">
</form>
</body>
</html>

Output

HTML Form Readonly Attribute Examples
First name: Last name:

The Disabled Attribute

The disabled attribute specifies that the input field is disabled. You cannot make any modification on input field.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Disabled Attribute </title>
</head>
<body>
<form action="#">
First name:
<input type="text" name="firstname" value ="John" disabled>
Last name:
<input type="text" name="lastname">
</form>
</body>
</html>

Output

HTML Form Disabled Attribute Examples
First name: Last name:

The Size Attribute

The size attribute specifies the size for the input field in character.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Size Attribute </title>
</head>
<body>
<form action="#">
First name:
<input type="text" name="firstname" value="John" size="30">
Last name:
<input type="text" name="lastname">
</form>
</body>
</html>

Output

HTML Form Size Attribute Examples
First name: Last name:

The maxlength Attribute

The maxlength attribute specifies the maximum length allowed for the input field.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form maxlength Attribute </title>
</head>
<body>
<form action="#">
First name:
<input type="text" name="firstname" maxlength="10">
Last name:
<input type="text" name="lastname">
</form>
</body>
</html>

Output

HTML Form maxlength Attribute Examples
First name: Last name:

Note : The maxlength attribute, will not accept more than the allowed number of characters in input field.

HTML 5 Form Attributes

Here is a list of some common Attributes in HTML 5.

Attribute
New
Description
autocomplete
It gives the autocomplete functionality to the form.
autofocus
It make sure that the input field automatically get focused when the page loads.
form
It specifies one or more forms, an <input> element belongs to.
formaction
It specifies the URL of a file where the form data will get transferred and processed after submitting.
formenctype
It specifies how the form data should be encoded when submitted.
formmethod
It defines the HTTP method for sending form-data to the action URL.
formnovalidate
It specifies that the <input> element should not be validated.
formtarget
It specifies where to display the response that is received after submitting the form. Ex. - _blank, _self, framename, etc.
height & width
It specifies the height and width of an <input> element.
list
It's value gives a particular id to a <datalist> element that contains pre-defined options for an <input> element.
min and max
It specifies the minimum and maximum values for an <input> element.
multiple
It allows the user to enter more than one value in the <input> element.
pattern (regexp)
It defines a regular expression for an <input> element's value.
placeholder
It gives a hint about the value to be entered in the <input> element.
required
It specifies that an input field must be filled out before submitting the form.
step
It specifies the legal number intervals for an <input> element.









Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.