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:

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:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Form Attribute</title>
</head>
<body>
<h3>HTML5 Form Attribute<h3>
<form action="demo_form.asp" id="form1">
First name:
<input type="text" name="fname"><br>
Last name:
<input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>
<p>The "Email" field below is outside the form element, but still part of the form.</p>
Email:
<input type="email" id="email" name="email" form="form1">
</body>
</html>

Output

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:

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:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Formaction Attribute</title>
</head>
<body>
<h3>HTML5 Formaction Attribute<h3>
<form action="form.asp">
First name:
<input type="text" name="fname"><br>
Last name:
<input type="text" name="lname"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formaction="https://example.com/save" value="save">
</form>
</body>
</html>

Output

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:

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:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Formenctype Attribute</title>
</head>
<body>
<h3>HTML5 Formenctype Attribute</h3>
<form action="post_enctype.asp" method="post">
Name:
<input type="text" name="name"><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="element/form-urlencoded" value="save with enctype">
</form>
</body>
</html>

Output

New HTML5 Form Attributes-Part 2

Reactions

Comments

Introduction

1. Form Attribute

2. Formaction Attribute

3. Formenctype Attribute