Post
Ask Question

HTML5 New Form Attributes-Part 5

Multiple Attribute

 
Previously, its use was restricted to <select> elements, allowing you to convert a drop-down menu into a multiple-selection list. In HTML5, you can use it with other form fields to permit the submission of multiple values where normally only one would be accepted.
 
It allows selection of multiple files for <input type="file"> elements and for multiple e-mail addresses separated by a comma.
 
Examples are, use with email addresses when sending items to a friend or use of multiple attributes for attachment of files.
 
Note: The multiple attributes work with the input types of email and file.
 
Syntax
 
<input type="file" multiple>
 
Browser Support
 
It is supported in all major browsers such as Chrome, Internet Explorer, Safari, Opera and Firefox.
 
Example
  1. <!DOCTYPE html>  
  2. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <title>Multiple Attribute</title>  
  6. </head>  
  7. <body>  
  8.     <h3>HTML5 Multiple Attribute</h3>  
  9.     <form action="form.asp">  
  10.         Select images:  
  11.         <input type="file" name="img" multiple><br>  
  12.          Email:  
  13.         <input type="email" id="email" name="email" multiple><br>  
  14.         <input type="submit">  
  15.     </form>  
  16. </body>  
  17. </html> 
Output
 
multiple.jpg
 

Pattern Attribute

 
The Pattern attribute allows you to define a Regular Expression that the user input must match. The pattern must match the entire value, not just a subset. The "title" attribute can be used with a pattern to provide a description of the expected format of the input.
 
The regular expression language is the same as JavaScript's. The pattern is not surrounded by forward slashes.
 
The Attribute value for an input element is known as a pattern.
 
The pattern attribute is available on input elements whose type attribute has been set to text, search, URL, telephone, email, or word.
 
Purpose: For validating an element's value against a regular expression.
 
Note: When using a pattern, you should also specify a title value to provide the user a description of the pattern that's expected.
 
Syntax
 
<input type="text" name="text" pattern="\(\d\d\d\) \d\d\d\-\d\d\d\d" />
 
Browser Support
 
It is supported in all major browsers such as Opera 9.5+, Firefox 4+, Safari 5+, Internet Explorer 10 and Chrome 5+.
 
Example
  1. <!DOCTYPE html>  
  2. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <title>Pattern Attribute</title>  
  6. </head>  
  7. <body>  
  8.     <h3>HTML5 Pattern Attribute</h3>  
  9.     <form action="form.asp">  
  10.         word:  
  11.         <input type="text" name="word" pattern="[A-Za-z0-9]{8}" title="Eight Character: Both Letters and Numbers">  
  12.         <input type="submit">  
  13.     </form>  
  14. </body>  
  15. </html> 
Output
 
pattern.jpg
 

Placeholder Attribute

 
The Placeholder attribute provides guidance to the user for entering the correct data into form fields. It defines the text to be displayed inside an input field. The placeholder text is displayed with the specified style until the field has focus.
 
It can be used within <input> controls whose type attribute has been set to text, search, URL, telephone, email, and word, as well as textarea elements.
In HTML4, it's only used for short descriptions. For anything longer, use the title attribute. The difference from HTML4 is that the text is only displayed when the field is empty and hasn't received focus. Once the field receives focus (e.g., you click or tab to the field), and you begin to type, the text simply disappears.
 
Purpose: Gives the user a hint about what sort of data they should enter.
 
Placeholder Value:
  • must not be included in parameters with the form submission.
  • should be visually removed when the user gives focus to the field.
  • should be visually different, suggesting it is only an example value.
  • should be returned if no value is provided and after the field is blurred.
  • should be applied after the browser has retrieved prior submission values.
Syntax
 
<inputtype="text"name="name"placeholder="Enter name">
 
Browser Support
 
It is supported in all major browsers such as Chrome, Internet Explorer, Safari, Opera and Firefox
 
Example
  1. <!DOCTYPE html>  
  2. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <title>Placeholder Attribute</title>  
  6. </head>  
  7. <body>  
  8.     <h3>HTML5 Placeholder Attribute</h3>  
  9.     <form action="form.asp">  
  10.         First Name:  
  11.         <input type="text" name="fname" placeholder="Enter first name" /><br>  
  12.         Last Name:  
  13.         <input type="text" name="lname" placeholder="Enter last name" /><br>  
  14.         Email:  
  15.         <input type="email" name="email" placeholder="Enter email-id" /><br>  
  16.         Enter Street:  
  17.         <input id="street" class="address" placeholder="Your address" /><br>  
  18.         <input type="submit" value="Submit">  
  19.     </form>  
  20. </body>  
  21. </html> 
Output
 
placeholder.jpg


Similar Articles