Rare attributes

The formaction and formmethod attributes

These attributes are targeted to the <input type=”submit”> input fields. They are rarely used, so there will be no questions about them in the quizzes at the end of the week.

  1. <input type=“submit”
  2. formaction=“preview.php” formmethod=“get” value=“Preview”>

When you use an <input type=”submit”> field with the formactionattribute, the action attribute value of the form is overridden. The form will be submitted to the URL / value of the formaction attribute of the  <input type=”submit”> field.

The formmethod attribute does the same with the POST/GET methodattribute of the form. If an <input type=”submit”> has a formmethod attribute, it overrides the value of the method attribute of the form.

TYPICAL USE

  1. <form action=“post.php” method=“post”>
  2.      <input type=“submit”
  3.             formaction=“preview.php” formmethod=“get”
  4.             value=“Preview”>
  5.      <input type=“submit” value=“Send”>
  6. </form>

Line 3 overrides the values set in line 1.

EXAMPLES

Here are two online examples at JS Bin:

The formnovalidate attribute

The formnovalidate attribute is targeted to the <input type=”submit”> input fields. This attribute is rarely used, so there will be no questions about it in the end of the week’s exercises.

This atrribute allows the submission of a form even if it contains  invalid fields. For example:  a form that has an <input type=”email”> field or a field required and which are not filled.

In general, such forms have two submit buttons, one with the formnovalidate attribute set to a non null value and one without.

Typical use (online example at JS Bin):

  1. <form action=“form.php”>
  2.    <fieldset>
  3.      <legend>Example of formnovalidate attribute</legend>
  4.      <label for=“email”>E-mail:</label>
  5.      <input type=“email” name=“email” id=“email”/><br>
  6.      <input type=“submit” value=“Submit” /><br>
  7.      <input type=“submit”
  8.             formnovalidate 
  9.             value=“Submit without validation” />
  10. </fieldset>
  11. </form>

The formtarget attribute

The formtarget attribute is targeted to the <input type=”submit”> input fields.

This attribute’s value indicates where the response from the form submission should be displayed.

TYPICAL USE

  1. <input type=“submit”
  2.        formtarget=“_blank”
  3.        value=“Submit but show results in a new window/tab”>

Possible values for the formtarget attributes are:

    • _blank: the response is displayed in a new window or tab
    • _self: the response is displayed in the same frame (this is default)
    • _parent: the response is displayed in the parent frame
    • _top: the response is displayed in the full body of the window
    • framename: the response is displayed in a named iframe

COMPLETE EXAMPLE

Online example at JS Bin

 

Source code:

  1. <form action=“defaultAction.php”>
  2.      <label for=“firstName”>First name:</label>
  3.      <input type=“text” name=“firstName” id=“firstName”><br>
  4.      <label for=“lastName”>Last name:</label>
  5.      <input type=“text” name=“lastName” id=“lastName”><br>
  6.      <input type=“submit” value=“Submit as usual”>
  7.      <input type=“submit”
  8.            formtarget=“_blank”
  9.            value=“Submit but show results in a new window/tab”>
  10. </form>

The formenctype attribute

A WORD ABOUT THE ENCTYPE ATTRIBUTE OF THE <FORM>ELEMENT

The enctype attribute existed before HTML5. It is often used together with forms that contain file input fields. For sending files to a remote server, we use multipart” forms. This special encoding of forms needs to be specified using the enctype attribute, as shown in the example below:

Online example at JS Bin

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <body>
  4.    <form action=“default.php” method=“post”enctype=“multipart/form-data”>
  5.       First name: <input type=“text” name=“fname”><br>
  6.       Last name: <input type=“text” name=“lname”><br>
  7.       <input type=“submit” value=“Submit”>
  8.    </form>
  9. </body>
  10. </html>

Note that when you send form content using Ajax, this attribute is not needed, as you will specify the type of data sent to the remote server in JavaScript, using for example the new FormData object.

USED AS AN ATTRIBUTE OF THE <INPUT TYPE=”SUBMIT” ENCTYPE=…> ELEMENT

Since HTML5, this attribute can also be used in <input type=”submit”> input fields.

If an <input type=”submit”> field has this attribute, then, when submitted using method=POST, the browser will send the form content encoded with the method specified by the formenctype attribute. And this overrides the value of the enctype attribute specified in the <form enctype=…> element (or its default value, if not present).

TYPICAL USE

  1. <form action=“defaultAction.php”>
  2.    …
  3.    <input type=“submit” formenctype=“multipart/form-data”
  4.           value=“Submit as Multipart/form-data”>
  5. </form>

The possible values for this field are:

    • application/x-www-form-urlencoded: all characters are escaped/encoded before submission, for example, spaces become “+”, accentuated characters are transformed into hexadecimal, etc.
    • multipart/form-data: encoding is not done. Usually we use this value for submitting binary data such as images, files, etc.
    • text/plain: some encoding is done on standard characters like space (that becomes a “+”), nothing is done for special characters.

EXAMPLE

Try this online example at JS Bin

Source code:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4.   <form action=“defaultAction.php” method=“post”
  5.         enctype=”application/x-www-form-urlencoded”>
  6.      <label for=“firstName”>First name:</label>
  7.      <input type=“text” name=“firstName” id=“firstName”><br>
  8.      <label for=“lastName”>Last name:</label>
  9.      <input type=“text” name=“lastName” id=“lastName”><br>
  10.      <input type=“submit” value=“Submit”>
  11.      <input type=“submit”
  12.             formenctype=“multipart/form-data”
  13.             value=“Submit as Multipart/form-data”>
  14. </form>
  15.  
  16. <p><b>Note:</b> The formenctype attribute is not supported by all browsers.</p>
  17. </body>
  18. </html>

Explanations and how to see the difference between the two submissions

If you run this example in the JS Bin standalone mode (click the black arrow on the top right of the output tab, in JS Bin).

Then, open the devtools and go to the “Network” tab, click on the POST request. Once done, click on the right on the “Header” tab to see the HTTP headers, and scroll down, you should see the form-data entries in the header.

it button, the one without the formenctype attribute, you should see that the form content has been submitted “normally” (default value is “urlencoded”, spaces are replaced by “+”, etc.).

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s