HTML5 form came with many new attributes value, maxlength, placeholder, disabled etc. You can validate HTML5 form without using javaScript/jQuery. You can make mandatory field using required attribute and many more attributes. Find the below HTML5 attributes.
HTML5 have these following attributes:
- placeholder
- autocomplete
- autofocus
- form
- pattern
- required
- formaction
- formenctype
- formmethod
- formnovalidate
- novalidate and formnovalidate
- list
- multiple
HTML5 placeholder attribute:
The placeholder attribute allows to set place holder text to the field. Simple and short descriptions about field.
<input type="text" name="fullName" placeholder="Full Name">
HTML5 autocomplete Attributes:
The autocomplete attributes helps to fill the value automatically based on earlier input value. This attributes has option to "on" or "off" autocomplete for specific input fields.
<input type="text" name="subject" autocomplete="off">
<input type="text" name="subject" autocomplete="on">
HTML5 autofocus Attribute
The autofocus attributes, Automatically focus the field when the page loads.
<input type="text" name="fname" autofocus>
HTML5 form attribute:
Using form Attribute make other input, select, or textarea field under a single form. It's not required define fields under the same form.
<form action="action.php" id="form">
<label>Full name</label>
<input type="text" name="fullName">
<input type="submit" value="Submit">
</form>
<label>Subject</label>
<input type="text" name="subject" form="form">
HTML5 pattern attribute:
The pattern attribute specifies a JavaScript regular expression for the field’s value is checked against.
<input type="text" name="product_code" pattern="[A-Za-z]{5}" title="Product code">HTML5 required attribute:
Make field mandatory using required attribute. User must be enter field before submitting the form.
<input type="text" name="fullName" required>
HTML5 formaction attribute:
The formaction attribute overrides the form action attribute. This attribute is used with submit or image (type="submit" or type="image").
<form action="action.php" id="form">
<label>Full name</label>
<input type="text" name="fullName">
<input type="submit" formaction="action_2.php" value="Submit">
</form>
HTML5 formenctype attribute:
The formenctype attribute overrides the form enctype attribute. This attribute is used with submit or image (type="submit" or type="image").
<form action="action.php" id="form">
<label>Full name</label>
<input type="text" name="fullName">
<input type="submit" value="Submit" formenctype="app/data">
</form>
HTML5 formmethod attribute:
The formenctype attribute overrides the form method attribute. This attribute defines the HTTP method(GET, POST, PUT, DELETE) for sending form-data to the action URL. Used with submit or image (type="submit" or type="image").
<form action="action.php" id="form" method="get">
<label>Full name</label>
<input type="text" name="fullName">
<input type="submit" value="Submit" formmethod="post">
</form>
HTML5 novalidate and formnovalidate attribute:
The novalidate and formnovalidate attributes helps to skip the validation when submit form. The novalidate attribute is a <form> attribute and formnovalidate is a <input> attribute.
<form action="action.php" novalidate>
<label>Full name</label>
<input type="text" name="fullName">
<input type="submit" value="Submit">
</form>
<form action="action.php">
<label>Full name</label>
<input type="text" name="fullName">
<input type="submit" value="Submit" formnovalidate>
</form>
HTML5 list attribute:
The list attribute alow's user to add list of options with a particular field.
<input list="skills">
<datalist id="skills">
<option value="HTML5">
<option value="CSS3">
<option value="JavaScript">
<option value="jQuery">
<option value="AngularJS">
</datalist>
HTML5 multiple attribute:
The multiple attribute allows to enter more than one value in form input element.
<label>Upload photo</label>
<input type="file" name="photos" multiple>
