Introducing Forms

HTML Forms Richer way to interact with server Forms provide the user with an alternative way to interact with a web server (used to collect user input). Forms provide rich mechanisms like: Text input Password input Options Lists Radio and check boxes

Form Structure

How forms interact with servers

Query Strings The figure above illustrates how the form data (and its connection to form elements) is packaged into a query string A query string is a series of name=value pairs separated by ampersands (the & character). The values in the query string are the data entered by the user.

HTML Form Elements The <input> Element (single line field). It has several types (text, password, submit, reset, radio, checkbox, button, number, …etc). The <select> Element (Drop-Down list). The <textarea> Element (Multi-line field). The <button> Element (clickable button).

<form> element Two essential features of any form, namely the action and the method attributes. The action attribute specifies the URL of the server-side resource that will process the form data. In other words, it’s the action to be performed when the form is submitted. The method attribute specifies how the information entered by the user will be transmitted from the browser to the server. GET: the default method (the browser locates the name/value in the URL of the request) used to retrieve information for example in the searching process. POST: (packages the name/value pairs inside the body of the HTTP request) used to modify the contents of a date stored on the server for example modifying your personal profile.

GET vs POST

GET vs POST GET Data can be clearly seen in the address bar. Advantages and Disadvantages GET Data can be clearly seen in the address bar. Data remains in browser history and cache. Data can be bookmarked limits on the amount of information to send Used for sending non-sensitive data. POST Data can contain binary data. Data is hidden from user. Submitted data is not stored in cache, history, or bookmarks. has no limits on the amount of information to send

Syntax When to Use: $_GET[‘varname’] When the method of passing the variable is the “GET” method in HTML forms. $_POST[‘varname’] When the method of passing the variable is the “POST” method in HTML forms $_REQUEST[‘varname’] When it doesn’t matter ($_REQUEST includes variables passed from any of the above methods)

Forms Control Elements

Text Fields VALUE="text" Text fields are used when you want the user to type letters, numbers, etc. in a form. It has many attributes, the following are some of them: NAME="text“ This assigns a label to the text submitted by the user, thus identifying what the user was responding to when they filled in the text box. SIZE=“value” Specify the width of the text box in characters. MAXLENGTH=“value” Specify the maximum number of characters that can be written in the text box. If this is greater than can be displayed (as defined by the SIZE attribute, then the field will scroll. VALUE="text" Specify some default text for the text box. For more info check out this : http://www.w3schools.com/tags/tag_input.asp

Second.php Third.php

Select Lists Chose an option, any option. <select> element is used to create a multiline box for selecting one or more items The options are defined using the <option> element can be hidden in a dropdown or multiple rows of the list can be visible

Select Lists Attributes Name=text Size=value <option> Value=text This assigns a label to the item selected by the user, thus identifying what the user was responding to. Size=value The number of options to show to the user. <option> The <option> tag defines an option in a select list. The closing </OPTION> tag is optional. Value=text Specifies the value to be sent to a server. Selected Specifies that an option should be pre-selected when the page loads.

Which Value to send Select Lists Cont. The value attribute of the <option> element is used to specify what value will be sent back to the server. The value attribute is optional; if it is not specified, then the text within the container is sent instead

Radio Buttons Radio buttons are useful when you want the user to select a single item from a small list of choices and you want all the choices to be visible radio buttons are added via the <input type="radio"> element The buttons are mutually exclusive (i.e., only one can be chosen) by sharing the same name attribute for all of them within the same group. The checked attribute is used to indicate the default choice the value attribute works in the same manner as with the <option> element

Radio Buttons

Radio Buttons Name=text Value=text Checked Attributes Tells the browser which radio button group the radio button belongs to. Also serves to assign a label to the radio button group, thus identifying what the user was responding to when they selected a radio button. Value=text Specifies a value for the input element. Checked Specifies that the element represents a selected control.

Checkboxes Checkboxes are used for getting yes/no or on/off responses from the user. checkboxes are added via the <input type="checkbox”> Element You can also group checkboxes together by having them share the same name attribute Each checked checkbox will have its value sent to the server Like with radio buttons, the checked attribute can be used to set the default value of a checkbox

Checkboxes Name=text Value=text Checked Attributes Name=text Tells the browser which check box group the check box belongs to. Also serves to assign a label to the check box group, thus identifying what the user was responding to when they selected a check box. Value=text Specifies a value for the input element. Checked Specifies that the element represents a selected control.

Checkboxes

Textarea Textarea element is used to provide a editable text input area for the user. Any default text you wish to give the text area should be placed between the <textarea></textarea>. You must include the end tag even if you don't want to provide any default text. You can specify the width and height of the text area and, for some browsers, the type of wrapping to apply to the input text.

Textarea Name=text Cols=number Rows=number Attributes Specifies a name for a text area Cols=number Specifies the visible width of a text area Rows=number Specifies the visible number of lines in a text area