Form functionality provided by Zend Framework 3 internally uses HTML forms. Because of that, we start with a brief introduction to HTML forms topic.
In HTML, forms are enclosed with
</form> tags. A form typically
consists of fields: text input fields, check boxes, radio buttons, submit buttons,
hidden fields and so on. HTML provides several tags intended for defining form
<input>- specifies an input field where the user can enter some data (field appearance and behavior depends on the field type);
<textarea>- multi-line text area which can contain an unlimited number of characters;
<button>- a clickable button19;
<select>- a dropdown list;
<option>- used inside the
<select>element for defining the available options in a dropdown list.
<button> field is analogous to
<input type="button">, however it
provides additional capabilities, like specifying a graphical icon on the button.
In table 7.1, you can find examples of HTML form field definitions. Figure 7.1 contains corresponding field visualizations (except the "hidden" field type, which has no visual representation).
|Text input field||
|Image (graphical submit button)||
HTML5 introduced several new form field types (listed in table 7.2); figure 7.2 contains corresponding field visualizations.
HTML5 fields provide more convenient ways for entering the most frequently used data types: numbers, dates, E-mails, URLs, etc. Additionally, on form submit, the web browser validates that the user entered data is in a correct format, and if not the browser will prevent form submission and ask the user to correct the input error.
|Date-time (with time zone)||
|Date-time (without time zone)||
You can group related form fields with the help of the
<fieldset> tag, as shown in the
example below. The optional
<legend> tag allows you to define the caption for the group.
<fieldset> <legend>Choose a payment method:</legend> <input type="radio" name="payment" value="paypal">PayPal</input> <input type="radio" name="payment" value="card">Credit Card</input> </fieldset>
The HTML markup presented above will generate the group as in figure 7.3:
An example of a typical HTML form is presented below:
<form name="contact-form" action="/contactus" method="post"> <label for="email">E-mail</label> <input name="email" type="text"> <br> <label for="subject">Subject</label> <input name="subject" type="text"> <br> <label for="body">Message</label> <textarea name="body" class="form-control" rows="6"></textarea> <br> <input name="submit" type="submit" value="Submit"> </form>
In the example above, we have the feedback form which allows the
user to enter his E-mail address, message subject, and text, and then submit them to the server. The
form definition begins with the
<form> tag (line 1).
<form> tag contains several important attributes:
nameattribute specifies the name of the form ("contact-form").
actionattribute defines the URL of the server-side script which is responsible for processing the submitted form ("/contactus").
methodattribute defines the method (either GET or POST) to use for delivering form data. In this example, we use the POST method (recommended).
In line 3, we define a text input field with the help of the
<input> element. The
specifies the name of the field ("email"). The
specifies the purpose of the element (the type "text" means the input field is intended for
In line 2, we have the
<label> element which represents the label for the E-mail
text input field (the corresponding input field's name is determined by the
attribute of the
In lines 5-6, by analogy, we have the "Subject" input field and its label.
In line 9, we have the text area field which is suited well for entering
multi-line text. The height of the text area (6 rows) is defined by the
In line 11, we have the submit button (input element with "submit" type).
value attribute allows you to set the title text for the button ("Submit").
By clicking this button, the user will send the form data to the server.
<br> elements are used in lines 4, 7 and 10 to position
form controls one below another (otherwise they would be positioned in
To see what this form looks like, you can put its HTML markup code in a
and open the file in your browser. You will see the form visualization
as in figure 7.4.
If you enter some data in the feedback form and click the Submit button, the web browser will
send an HTTP request to the URL you specified in the
action attribute of the form.
The HTTP request will contain the data you entered.
HTML forms support GET and POST methods for submitting the data to server. These methods have important technical differences.
When using POST method for submitting the form, the data is sent in HTTP request body. For example, when you press the Submit button on the feedback form, an HTTP request will look like the example below:
POST http://localhost/contactus HTTP/1.1 Host: localhost Connection: keep-alive Content-Length: 76 Accept: text/html,application/xhtml+xml,application/xml Origin: null User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) Content-Type: application/x-www-form-urlencoded email=name%40example.com&subject=Example+Subject&body=Hello%21&submit=Submit
Above, you can see that the form data is transmitted in request body (line 10). Form fields are concatenated in a single string and then URL-encoded to replace unsafe characters with allowed characters from the ASCII table.
In comparison, when you set the GET method for the form, an HTTP request will look like the example below:
GET http://localhost/contactus?email=name%40example.com&subject=Example+Subject&body=Hello%21&submit=Submit HTTP/1.1 Host: localhost Connection: keep-alive Accept: text/html,application/xhtml+xml,application/xml User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) Accept-Encoding: gzip,deflate,sdch
In the example above, you can see that the form data is concatenated, URL-encoded and sent as part of the HTTP request's URL (line 1), which makes the URL long and harder to read. Since the form data is sent inside the URL, this makes it easily visible to site visitors.
In most cases, you will use the POST method for delivering form data in the request body, because the user doesn't need to see the data in the browser's navigation bar (especially when submitting passwords or other sensitive data).
Please note that submitting form data using the POST method does not protect your sensitive data (like passwords, credit card numbers, etc.) from being stolen. To protect such data, you'll have to direct your HTTP traffic to an SSL tunnel (SSL stands for Secure Sockets Layer). Protected SSL connections are distinguished by using the https:// schema in web page URLs. To enable SSL for your Apache HTTP server, you will need to obtain an SSL certificate from a trusted provider (like VeriSign) and install it on your server.