HTML input value
The <input /> tag’s value property specifies the default value of the tag.
<form>
Name:<br />
<input type=”text” name=”name” value=”CANER
” /><br />
Surname:<br />
<input type=”text” name=”surname” value=”DOGAN
” />
<input type=”submit” value=”submit” />
</form>
HTML input readonly
The readonly property of the <input /> tag specifies that the input is read-only.
<form>
Name:<br />
<input type=”text” name=”name” value=”CANER
” readonly=”readonly” /><br />
Surname:<br />
<input type=”text” name=”surname” value=”DOGAN
” />
<input type=”submit” value=”submit” />
</form>
HTML input disabled
The disabled property of the <input /> tag indicates that the input is disabled.
<form>
Name:<br />
<input type=”text” name=”name” value=”CANER
” readonly=”readonly” /><br />
Surname:<br />
<input type=”text” name=”surname” value=”DOGAN
” 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 specifies the number of characters to display in the size attribute input field.
<form>
Name:<br />
<input type=”text” name=”name” value=”CANER
” size=”30″ /><br />
Surname:<br />
<input type=”text” name=”surname” value=”DOGAN
” />
<input type=”submit” value=”submit” />
</form>
HTML input maxlength
The maxlength attribute of the <input /> tag specifies the number of characters that can be entered in the input field.
<form>
Name:<br />
<input type=”text” name=”name” value=”CANER
” size=”30″ maxlength=”10″ /><br />
Surname:<br />
<input type=”text” name=”surname” value=”DOGAN
” />
<input type=”submit” value=”submit” />
</form>
New input features coming with HTML5
New features added to <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 <form> tag with HTML5
autocomplete
novalidate
HTML5 autocomplete
If the value of the autocomplete property that comes with HTML5 is on, the previously entered values will be listed in the data entry. If it is 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: The browser autocomplete function must be active for the autocomplete feature to work.
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 autofocus property of the <input /> tag 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 attribute specifies which form the data input field belongs to within 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 attribute specifies which address to send the form data to.
Using the attribute disables the action attribute of the <form> tag.
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’s formenctype attribute specifies which encryption method the form data will be sent with. (Only works with method=”post”)
Using the attribute disables the enctype of the <form> tag.
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’s formmethod property specifies the method by which form data will be submitted.
The method property of the <form> tag is disabled when the property is used.
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>
HTML