Input Restrictions-
- Input Restrictions:
- disabled
- max and min
- pattern
- read only
- placeholder
- required
- autocomplete
- autofocus
- height and width
- multiple
For validation purpose we use some common input restrictions, these are given below-
1.disabled-
For making an input field disabled, input disabled attribute is used. A disabled input field is unclickable and unusable. When form is submitted the value of disabled input field will not be sent.
<form>
First name: <input type="text" name="fname" value="ABC" disabled><br><br>
Last name: <input type="text" name="lname" value="XYZ"><br><br>
</form>
2.max-For specifying maximum value for an input field.
3.min-Specifies the minimum value for an input field.
The min and max attribute used with the following input types namely-number,range,month,time and week,date and datetime-local.
4.pattern:Specifies a regular expression to check the input values.
The pattern attribute used with input types namely-text,date,search,url,tel,email and password etc.
<form>
Country
code:<input type="text" name="country_code" pattern="[A-Za-z]{2}"
title="Two digit country code">
</form>
5.read-only:Specifies that an input field is read only. A read-only input field can not be changed. A read-only input field value is sent when form is submitted.
<form>
First name: <input type="text" name="fname" value="ABC" readonly><br><br> Last name:<input type="text" name="lname" value="XYZ">
</form>
6.placeholder:Specifies a short hint that describes the excepted value of an input filed. Before the user enters a value, the short hint is displayed in the input field.
The placeholder attribute works with input types namely-text,search,url,tel etc.
<form>
Enter a Telephone number:<input type="tel" name="phone" placeholder="12-345-678-90" pattern="[0-9]{2}-[0-9]{3}-[0-9]{3}-[0-9]{2}">
</form>
7.required:Specifies that an input field must be filled before submitting the form i.e. not empty.
The required attribute works with input types namely-text,search,url,tel,email,password etc.
<form>
Enter Username: <input type="text" id="username" name="username" required>
</form>
8.autocomplete:Specifies whether a form input field should have autocomplete on or off.Autocomplete allows the browser to predict the value. When a user starts to type in a filed the browser display options to fill in the field, based on the earlier typed values.
The autocomplete attribute works with text,search,tel,email,passwrod etc.
<form action="/action_page.php" autocomplete="on">
First name: <input type="text" name="fname"><br><br>
Last name: <input type="text" name="lname"><br><br>
Email:<input type="email" name="email" autocomplete="off"<br><br>
<input type="submit" value="Submit">
</form>
9.autofocus:Specifies that an input field should automatically get focus when the page loads.
<form>
First name:<input type="text" name="fname" autofocus><br>
Last name:<input type="text" id="lname" name="lname">
</form>
10.height and width: Specify the height and width of an <input type="image"> element.
<form>
First name:<input type="text" name="fname"><br><br>
Last name:<input type="text" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Submit" width="50" height="50">
</form>
11.multiple:Specifies that the user is allowed to enter multiple values in an input field.
The multiple attribute works with the input types-email and file.
<form>
Select files:<input type="file" name="files" multiple>
</form>
Example-
<!DOCTYPE html><html>
<head>
<title>Forms in html 5 </title></head>
<body>
<form>
<b>First name:</b><br>
<input type="text" name="fname" value="ABC" disabled><br>
<b>Last name:</b><br>
<input type="text" name="lname" value="XYZ"><br><br>
<b>Enter a date before 1980-01-01:</b>
<input type="date" name="datemax" max="1979-12-31"><br><br>
<b>Enter a date after 2000-01-01:</b>
<input type="date" name="datemin" min="2000-01-02"><br><br>
<b>Quantity (between 1 and 5):</b>
<input type="number" name="quantity" min="1" max="5"><br><br>
<b>Quantity (between 1 and 5):</b>
<input type="number" name="quantity" min="1" max="5" step="1"><br><br>
<b>Country code:</b>
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"><br><br>
<b>First name:</b><br>
<input type="text" name="fname" value="Ashok" readonly><br>
<b>Last name:</b><br>
<input type="text" name="lname" value="XYZ"><br><br>
<b>Enter a phone number:</b>
<input type="tel" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"><br><br>
<b>Enter Adharcard Number:</b>
<input type="tel"name="phone" placeholder="1234-4567-6789" pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}"><br><br>
<b>Username:</b>
<input type="text" name="username" required>
<input type=submit value=submit>
</form>
</body>
</html>
Visit here and learn new trends and technologies everything.
Please Comment and Share. ConversionConversion EmoticonEmoticon