Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

322 CHAPTER 7 Working with forms

Using data submission constraints

To send data, each form submission element must meet specific constraints as described in

the following list.

■■The form submission element must have its name attribute set.

■■The form submission element must have its value set.

■■The form submission element must be defined within a <form> element, but HTML5

describes the ability to assign an id to the form and then reference the form’s id on a

form submission element by using the form attribute. This is not supported by Internet

Explorer 10 and earlier.

■■The form submission element must not be disabled, but it is permissible for the form

submission element to be hidden by using a CSS style such as display: none.

■■If a form has more than one submit button, only the submit button that is activated

will submit its value.

■■Check boxes must be selected for their value to be sent.

■■Option buttons must be selected for their value to be sent.

■■The <select> elements must have an <option> element set to selected for its value to

be sent.

■■File selection fields must have at least one file selected.

■■Reset buttons never send data when the form is submitted.

■■Object elements must have the declare attribute set.

It’s interesting to note that a form submission element does not need to have an id for its

data to be sent upon submission, and the name attribute does not need to be unique. If you

have multiple form submission elements with the same name, they will submit as an array.

Using POST or GET

There are two HTTP methods that can be used to submit the form data back to the web

server: GET and POST. When the GET method is used, the QueryString containing the data is

appended to the URL. The QueryString is a collection of URI-encoded key=value statements,

separated by ampersand (&) characters, which can be passed to the web server by concat-

enating a question mark (?) to the end of the URL and then concatenating the QueryString as

follows.

http://www.contoso.com/getProduct.aspx?productId=123&color=blue

In this example, a GET request is made to the web server for a webpage called getProduct

.aspx on the root of the website. The file extension of the webpage will not be .html because

you need to send the data to a page that supports server-side processing such as an .aspx

page. The QueryString contains the data that follows the question mark (?).