The <input /> tag value property specifies the default value of the tag.
<form>
Name:<br />
<input type=”text” name=”name” value=”Yusuf” /><br />
Surname:<br />
<input type=”text” name=”surname” value=”SEZER” />
<input type=”submit” value=”submit” />
</form>
HTML input readonly
The <input /> tag readonly specifies that the input is read-only.
<form>
Name:<br />
<input type=”text” name=”name” value=”Yusuf” readonly=”readonly” /><br />
Surname:<br />
<input type=”text” name=”surname” value=”SEZER” />
<input type=”submit” value=”submit” />
</form>
HTML input disabled
The <input /> tag disabled property indicates that the input is disabled.
<form>
Name:<br />
<input type=”text” name=”name” value=”Yusuf” readonly=”readonly” /><br />
Surname:<br />
<input type=”text” name=”surname” value=”SEZER” disabled=”disabled” />
<input type=”submit” value=”submit” />
</form>
The value of the disabled data entry field is not sent when the form is submitted.
HTML input size
The <input /> tag size specifies the number of characters to be displayed in the input field.
<form>
Name:<br />
<input type=”text” name=”name” value=”Yusuf” size=”30″ /><br />
Surname:<br />
<input type=”text” name=”surname” value=”SEZER” />
<input type=”submit” value=”submit” />
</form>
HTML input maxlength
The <input /> tag maxlength property specifies the number of characters that can be entered in the input field.
<form>
Name:<br />
<input type=”text” name=”name” value=”Yusuf” size=”30″ maxlength=”10″ /><br />
Surname:<br />
<input type=”text” name=”surname” value=”SEZER” />
<input type=”submit” value=”submit” />
</form>
New input features coming with HTML5
New features added to the <input /> tag with HTML5
autocomplete
autofocus
form
formation
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern
placeholder
required
step
New features added to the <form> tag with HTML5
autocomplete
novalidate
HTML5 autocomplete
If the autocomplete property value that comes with HTML5 is on, the previously entered values will be listed in the data entry. If off, the previously entered values will not be listed in the data entry.
<form autocomplete=”on”>
Name:<br />
<input type=”text” name=”name” autocomplete=”on” /><br />
Surname:<br />
<input type=”text” name=”surname” autocomplete=”off” />
<input type=”submit” value=”submit” />
</form>
NOTE: For the auto-complete feature to work, the browser’s auto-completion function must be active.
HTML5 form novalidate
Data entered is not validated when using the feature.
In the example below, the form will be sent without checking the e-mail address.
<form novalidate=”novalidate”>
Email: <input type=”email” name=”email” />
<input type=”submit” value=”submit” />
</form>
HTML5 input autofocus
The <input /> tag autofocus feature specifies the field to enter data after the page is loaded.
<form>
Name:<br />
<input type=”text” name=”name” /><br />
Surname:<br />
<input type=”text” name=”surname” autofocus=”autofocus” />
<input type=”submit” value=”submit” />
</form>
HTML5 input form
The <input /> tag form property specifies which form the data input field belongs to in the page.
<form id=”form1″>
Name:<br />
<input type=”text” name=”name” />
<input type=”submit” value=”submit” />
</form><br />
Surname:<br />
<input type=”text” name=”surname” form=”form1″ />
HTML5 input format
The <input /> tag formaction property specifies which address to send the form data to.
When the feature is used, the action feature of the <form> tag is disabled.
The formaction property is used in submit and image input types.
<form action=”registration.php”>
Name:<br />
<input type=”text” name=”name” /><br />
Surname:<br />
<input type=”text” name=”surname” />
<input type=”submit” value=”Sign In” formaction=”login.php” />
<input type=”submit” value=”Register” />
</form>
HTML5 input formctype
The <input /> tag formenctype property specifies which encryption method the form data will be sent with. (Only works with method=”post”)
When the feature is used, the enctype of the <form> tag is disabled.
The formenctype property is used in submit and image input types.
<form method=”post”>
Name:<br />
<input type=”text” name=”name” /><br />
Surname:<br />
<input type=”text” name=”surname” />
<input type=”submit” value=”submit” />
<input type=”submit” value=”Sign In” formenctype=”multipart/form-data” />
</form>
HTML5 input formmethod
The <input /> tag formmethod property specifies the method by which form data will be sent.
When the feature is used, the method property of the <form> tag is disabled.
The formmethod property is used in submit and image input types.
<form method=”post”>
Name:<br />
<input type=”text” name=”name” /><br />
Surname:<br />
<input type=”text” name=”surname” />
<input type=”submit” value=”submit” />
<input type=”submit” value=”Sign In” formmethod=”get” />
</form>
HTML5