HOME HTML 5 CSS 3 JAVASCRIPT MySQL PHP Python Pure CSS WordPress MS AD* Linux* Blog Howto Tools Online Editor »
Home » HTML » HTML Form Attribute

Form Input Attribute

The HTML Form Attribute element is used to create interactive controls for web-based forms in order to accept data from the user. This attributes can be used on the following elements such as :

The Value Attribute

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

Example Try this code »

<!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.

Example Try this code »

<!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.

Example Try this code »

<!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.

Example Try this code »

<!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.

Example Try this code »

<!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.
Recommended :
1 .  How to create tables in HTML
2 .  How HTML Tags are different from Attributes
3 .  How to Use Meter Tags
4 .  How does html5 canvas work?
5 .  How to add Video in HTML ?
6 .  Symbols in HTML
7 .  BootStrap 4 Photography Snippets
8 .  Create Youtube Thumbnail Generater in PHP






Web Developement Courses
BootStrap Snippets
JS Keywords
Form Events
CSS Navbar
JS Objects
Cookies
Forms
Icons
Buttons
Progress
Footer
Errors



Follow Us: