HTML5 New Form Attributes-Part 3

Formmethod Attribute

A string indicating which HTTP method (GET or POST) should be used when submitting; it overrides the method of the <form> element if defined. The formmethod only applies when the type is an image or submit, and the form attribute has been set.

If the input element is a submit button or image, this attribute specifies the HTTP method that the browser uses to submit the form. Possible values are:

post: The data from the form is included in the body of the form and is sent to the server.
get: The data from the form are appended to the form attribute URI, with a "?" as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.

Purpose: If specified, this attribute overrides the method attribute of the form element.

Note: This attribute is supported on input and button elements.

Syntax

Browser Support

It is supported in all major browsers such as Chrome, Safari, Internet Explorer, Firefox and Opera.

Example

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Formmethod Attribute</title>
</head>
<body>
<h3>HTML5 Formmethod Attribute</h3>
<form action="form.asp" method="get">
First name:
<input type="text" name="fname"><br>
Last name:
<input type="text" name="lname"><br>
Email:
<input type="email" id="email" name="email"><br>
<input type="submit" id="Submit" value="Submit">
<input type="submit" formmethod="post" value="Send as POST">
</form>
</body>
</html>

Output

Formnovalidate Attribute

If the input element is a submit button or image then this Boolean attribute specifies that the form is not to be validated when it is submitted.

Useful for a Save for Later button. On the button that saves the form for later. the novalidate attribute is a boolean attribute.

Purpose: For overriding the novalidate attribute on the form element.

Note: This attribute is supported on input and buttonelements.

When To use the novalidate attribute and Formnovalidate Attribute

Using novalidate in the opening <form> tag is basically a catch-all way of preventing the form from being validated when it's submitted.

The formnovalidate attribute gives you a finer degree of control because it applies only when that particular button is clicked.

Syntax

Browser Support

It is supported in all major browsers such as Chrome, Internet Explorer, Firefox and Opera except Safari.

Example

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Formnovalidate Attribute</title>
</head>
<body>
<h3>HTML5 Formnovalidate Attribute</h3>
<form action="form.asp">
E-mail:
<input type="email" name="userid"><br>
Number of times:<input type="number" name="num" min="1" max="10"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formnovalidate value="Don't validate">
</form>
</body>
</html>

Output

Formtarget Attribute

The Formtarget attribute specifies the target window for form results. It has the same effect as the target attribute on the form element and can only be used with a submit or image button (type="submit" or type="image").

It specifies a name or a keyword that indicates where to display the response that is received after submitting the form.

Purpose: For overriding the target attribute on the form element.

Note: This attribute is supported on input and buttonelements.

Syntax

Browser Support

It is supported in all major browsers such as Chrome, Internet Explorer, Firefox, Opera and Safari.

Example

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Formtarget Attribute</title>
</head>
<body>
<h3>HTML5 Formtarget Attribute</h3>
<form action="form.asp">
First name:
<input type="text" name="fname"><br>
Last name:
<input type="text" name="lname"><br>
Location:
<input type="text" name="name"><br>
<input type="submit" value="Submit as normal">
<input type="submit" formtarget="_blank" value="Post to a new tab/window">
</form>
</body>
</html>

Output