Starting with HTML5 Forms
HTML5 specification added lots of feature in forms but all browsers are at different states. Check www.html5test.com for current support to HTML5 form elements.
Below is the list of newly added input type in HTML5.
| Input Type | Purpose |
| tel | For entering a telephone number. |
| search | To prompt users to enter text that they want to search for. |
| url | For entering a single URL. |
| For entering either a single email address or a list of email addresses. | |
| datetime | For entering a date and time with the time zone set to UTC. |
| date | For entering a date with no time zone. |
| month | For entering a date with a year and a month, but no time zone. |
| week | For entering a date that consists of a week-year number and a week number, but no time zone. |
| time | For entering a time value with hour, minute, seconds, and fractional seconds, but no time zone. |
| datetime-local | For entering a date and time with no time zone. |
| number | For numerical input. |
| range | For numerical input, but unlike number, the actual is not important. |
| color | For choosing color through a color well control. |
Example of HTML form input elements. And if you need any custom type then you can use pattern attribute to achieve it. And from below example it is very clear that new input elements saves a lot of javascript validation code. Code for example form is provided below.
<form oninput='fullName.value = "Mr. " + firstName.value + " " + lastName.value' onsubmit="return alter('Saved')";>
<output id="fullName" name="fullName"></output><br/>
<input type="text" id="firstName" name="firstName" placeholder="Enter First Name" required="required" autofocus="autofocus"/><br/>
<input type="text" id="lastName" name="lastName" placeholder="Enter Last Name" required="required"/><br/>
<input type="email" id="email" name="email" placeholder="example@demo.com" required="required"/><br/>
<input type="email" id="emailConfirm" name="emailConfirm" placeholder="Confirm Email Address" required="required" oninput="verifyEmail(this)"/><br/>
<input type="tel" id="telNo" name="telNo" placeholder="Enter Your Phonenumber"/><br/>
<input type="url" id="webAddress" name="webAddress" placeholder="Enter Your Website"/><br/>
<input type="number" id="age" name="age" min="18" max="100" required="required" placeholder="Enter Your Age"/><br/>
<input type="submit" value="Save Info" /> <br/>
</form>
<script>
function verifyEmail(input) {
if (input.value != document.getElementById('email').value) {
input.setCustomValidity('The two email addresses must match.');
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
</script>
Example of HTML form input elements. And if you need any custom type then you can use pattern attribute to achieve it. responsive web development
ReplyDelete