Post
Ask Question

New HTML5 Form Attributes-Part 2

Introduction

 
In my previous article (New HTML% Form Attributes-part 1) I described the implementation of Autocomplete, Novalidation and Autofocus Form Attributes of HTML5 and now I describe the Form Attribute, Formaction Attribute and Formenctype Attribute of HTML5.
 

1. Form Attribute

 
It allows the user to associate form elements with forms in which they're not nested. This attribute specifies one or more forms that an <input> element belongs to.
 
Note: If you refer to more than one form, use a space-separated list of form ids. 
 
Syntax
 
The syntax of the form attribute in HTML5 is:
 
<form >  <input type="email" id="email" name="email" form="form1"> </form>
 
Browser Support
 
It is supported in all major browsers such as Chrome, Internet, Opera, Firefox and Safari except not Internet Explorer.
 
Example of using a form attribute:
  1. <!DOCTYPE html>  
  2.    
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title>Form Attribute</title>  
  7. </head>  
  8. <body>  
  9.     <h3>HTML5 Form Attribute<h3>  
  10.         <form action="demo_form.asp" id="form1">  
  11.             First name:  
  12.             <input type="text" name="fname"><br>  
  13.             Last name:  
  14.             <input type="text" name="lname"><br>  
  15.             <input type="submit" value="Submit">  
  16.         </form>  
  17.         <p>The "Email" field below is outside the form element, but still part of the form.</p>  
  18.         Email:  
  19.         <input type="email" id="email" name="email" form="form1">  
  20. </body>  
  21. </html> 
Output
 
form.jpg
 

2. Formaction Attribute

 
For buttons that submit a form (e.g. <input type="submit">, <input type="image"> and <button> elements) the formaction attribute is able to override the action attribute of the form; for instance if different buttons should submit the form to different URLs. No need of JavaScript to do this.
 
You also must specify the URL of the service that will handle the submitted data by using the Formaction attribute.
 
Note: The formaction attribute is used with type="submit" and type="image".
 
Syntax
 
The syntax of the formaction attribute in HTML5 is:
 
<form >  <input type="submit" formaction="http//example.com/save" value="save"> </form>
 
Browser Support
 
It is supported in all major browsers such as Chrome, Internet, Opera, Firefox, Safari and Internet Explorer.
 
Example of using a formaction attribute:
  1. <!DOCTYPE html>  
  2.    
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title>Formaction Attribute</title>  
  7. </head>  
  8. <body>  
  9.     <h3>HTML5 Formaction Attribute<h3>  
  10.         <form action="form.asp">  
  11.             First name:  
  12.             <input type="text" name="fname"><br>  
  13.             Last name:  
  14.             <input type="text" name="lname"><br>  
  15.             <input type="submit" value="Submit"><br>  
  16.             <input type="submit" formaction="https://example.com/save" value="save">  
  17.         </form>  
  18. </body>  
  19. </html>     
Output
 
formaction.jpg
 

3. Formenctype Attribute

 
The formenctype attribute specifies in what manner the form-data should be encoded when submitting it to the server. It is for buttons that submit a form to override the form's specified encoding.
 
The formenctype attribute overrides the enctype attribute of the <form> element.
 
Note: The formenctype attribute is used with type="submit" and type="image".
 
Syntax
 
The syntax of the formenctype attribute in HTML5 is:
 
<form >  <inputtype="submit"formenctype="application/form-urlencoded"value="Save with enctype"> </form>
 
Browser Support
 
It is supported in all major browsers such as Chrome, Internet , Opera , Firefox ,Safari and Internet Explorer.
 
Example of using a formenctype attribute:
  1. <!DOCTYPE html>  
  2.    
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title>Formenctype Attribute</title>  
  7. </head>  
  8. <body>  
  9.     <h3>HTML5 Formenctype Attribute</h3>  
  10.     <form action="post_enctype.asp" method="post">  
  11.         Name:  
  12.         <input type="text" name="name"><br>  
  13.         <input type="submit" value="Submit">  
  14.         <input type="submit" formenctype="element/form-urlencoded" value="save with enctype">  
  15.     </form>  
  16. </body>  
  17. </html>      
Output
 
formenc.jpg


Similar Articles