HTML5 New Input Types
HTML5 has several new input types for forms. These new features allow better input control and validation.
This chapter covers the new input types:
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
Note:
Not all browsers support all the new input types. However, you can already start using them; If they are not supported, they will behave as regular text fields.
Input Type: color
The color type is used for input fields that should contain a color.
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
Select your favorite color: <input type="color" name="favcolor"><br>
<input type="submit">
</form>
</body>
</html>
Output:
Select your favorite color:
Input Type: date
The date type allows the user to select a date.
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
Birthday: <input type="date" name="bday">
<input type="submit">
</form>
</body>
</html>
Output:
Birthday:
Input Type: email
The email type is used for input fields that should contain an e-mail address.
Define a field for an e-mail address (will be automatically validated when submitted):
<!DOCTYPE html><html>
<body>
<form action="demo_form.asp">
E-mail: <input type="email" name="email">
<input type="submit">
</form>
<p><b>Note:</b> type="email" is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>
Output:
Note: type="email" is not supported in Internet Explorer 9 and earlier versions.
Hi, perfect content.
ReplyDelete1. CakePHP shopping cart and CMS development, and Payment gateway integration.
2. CakePHP customization, maintenance, integration and upgradation.
3. CakePHP extendibles and applications for faster E-Commerce growth and profitability.
Features of CakePHP
CakePHP Web Development
CakePHP Portal Development