Post
Ask Question

HTML5 New Form Attributes-Part 6

Required Attribute

 
The Required Attribute tells the browser to only submit the form if the field is filled out correctly. If a required field is empty or invalid, the form will fail to submit, and the focus will move to the first invalid form element and show the specified message.
 
It is a Boolean attribute and only needs to be specified on an element. The following are three methods for including boolean attributes:
  • <input required> only using the name of the boolean attribute
  • <input required=""> setting its value to be an empty quoted value
  • <input required="required"> using the attribute name as the value
When the user hovers the mouse over a required field, they notice a tooltip describing that it is a required field. 
 
Note: This attribute can be set on text, URL, email, select, checkbox, or radio button controls, and on textarea and select elements.
 
The required attribute is helpful for doing browser-based validation without using custom JavaScript.
 
You can style the required element using a stylesheet, as in the following:
  1. input: required    
  2. {    
  3.     background-color: orange;    
  4. }    
  5. input: focus:invalid    
  6. {    
  7.     background-color: red;    
  8. }    
  9. input: focus: valid    
  10. {    
  11.     background-color: green;    
  12. } 
You can change the required message using the setCustomValidity() JavaScript function:
  1. var name = document.getElementById("name");   
  2. name.setCustomValidity("CUTOM ERROR MESSAGE"); 
Syntax
 
<input type="text" id="given-name" name="given-name" required>
 
Browser Support
 
The Required Attribute is supported in all major browsers, such as Firefox, Opera, Chrome and Internet Explorer except Safari. 
 
Example
  1. <!DOCTYPE html>  
  2. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <title>Required Attribute</title>  
  6. </head>  
  7. <body>  
  8.     <h3>HTML5 Required Attribute</h3>  
  9.     <form action="demo_form.asp">  
  10.         Firstname:  
  11.         <input type="text" name="fname" required><br>  
  12.         Lastname:  
  13.         <input type="text" id="name" name="lname" required aria-required="true"><br>  
  14.         Email:  
  15.         <input type="email" id="email" name="email" required><br>  
  16.         Repeat Email:  
  17.         <input type="email" id="email_repeat" name="email_repeat" required><br>  
  18.         <input type="submit">  
  19.     </form>  
  20. </body>  
  21. </html> 
Output
 
required.jpg
 

Step Attribute

 
The Step attribute defines the allowed interval between values. It can possibly control the size of each step for elements that accepts a number or date input.
 
For example, if min is set to "0" and step is set to "1", then only the values 0, 1, 2, 3, and so on are allowed.
 
The step attribute can be used together with the max and min attributes to create a range of legal values.
 
NOTE: The step attribute works with the following input types: number, range, date, datetime, datetime-local, month, time and week.
 
Syntax
 
<inputtype="number"step="3">
 
Browser Support
 
The Required Attribute is supported in all major browsers, such as Opera, Chrome and Internet Explorer except Firefox and Safari.
 
Example
  1. <!DOCTYPE html>  
  2. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <title>Step Attribute</title>  
  6. </head>  
  7. <body>  
  8.     <h3>HTML5 Step Attribute</h3>  
  9.     <form action="form.asp">  
  10.         Points:  
  11.         <input type="number" name="points" step="3"><br>  
  12.         Even Number:  
  13.         <input type="number" min="0" max="10" step="2" /><br>  
  14.         <input type="submit">  
  15.     </form>  
  16. </body>  
  17. </html> 
Output
 
step.jpg


Similar Articles