1. Introducing Forms

2. 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

3. Form Structure

4. How forms interact with servers

5. 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.

6. 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).

7. <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.

8. GET vs POST

9. 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

13. 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)

14. Forms Control Elements

15. 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 :

16. Second.php
Third.php

17. 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

18. 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.

20. 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

21. 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

22. Radio Buttons

23. 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.

25. 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

26. 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.

28. Checkboxes

29. 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.

30. 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