Web Forms and HTMLLecture 4

Form In Html

Most of the HTML you write helps you display content and information for your users. Sometimes, however, you want a Web page to gather information from users instead of giving static information to them. HTML form markup tags give you a healthy collection of elements and attributes for creating forms to collect information from visitors to your site.

HTML forms simply place a handful of GUI controls on the user agent to allow the user to enter data. After the data is entered into the fields, a special control is used to pass the entered data on to a program that can do something useful with the data. Such programs are typically referred to as form handlers because they “handle” the form data.

You insert a form into your document by placing form fields within <form> tags.

Form Element

You insert a form into your document by placing form fields within <form> tags. All of the input elements associated with a single form are contained within a <form> tag.Syntax:<form method=“get|post” action=“process.php”></form>The action attribute defines a URL where the data from the form should be sent to be “handled.”The second attribute, method, controls how the data is sent to the handler. The two valid values are get and post. Get sends the form data to the form handler on the URL.Post sends the form data in the Hypertext Transfer Protocol(HTTP) header.

Difference Between “Get” And “Post”

Fundamental Difference is probably the Visibility - GET request is sent via the URL string (appended to the URI with a question-mark as separator), which is visible. POST request is encapsulated in the body of the HTTP request and can't be seen.Length - GET request goes via URL. Previously its length was approximately 255 characters long, in the modern browsers its length is thousands of characters long (this is browser dependent).No such maximum length limitation holds for the POST request for the obvious reason that it becomes a part of the body of the HTTP request and there is no size limitation for the body of an HTTP request/response. Type of Data - GET request is sent via URL string and as we all know that URL can be text-only, so GET can carry only text data POST has no such restriction and it can carry both text as well as binary data.Caching/Bookmarking -Again for the obvious reason that a GET request is nothing but an URL hence it can be cached as well as Bookmarked.No such luxuries with a POST request.FORM Default - GET is the default method of the HTML FORM element. To submit a FORM using POST method, we need to specify the method attribute and give it the value "POST".Form Resubmission-If Get method is used and if the page is refreshed it wouldn’t prompt before the request is resubmitted.If Post method, would prompt request before the request is resubmitted if page is refreshed.The specific purpose of get is to read something—to retrieve data from somewhere, dependent on the data sent. post has the specific purpose of writing something (to a database, for example).

Form Fields

Form Fields and Buttons: input, textarea, and select

The input element is a way to take input from user, creating a different form control depending on the value of its type attribute. The other two, textarea and Select, create just one control type each. These elements will be looked at in independent detail in few minutes, but there are a few characteristics common to all three .

The Name Attribute:If all the inputted data in a form was sent without anything to identify each piece of data, a form-processing script wouldn’t know what piece of data is what. The name attribute supplies this necessary identifier (such as <input name=”book” />) and, in fact, the data in any input, textarea, or select form field won’t be sent at all if there isn’t a name attribute present.

The Type Attribute:With just this single element “Input” you can create 10 different types of controls

“Type” Attribute Values

text — for single-line text

password — for obfuscated text

checkbox — for a simple on or off

radio — for selecting one of a number of options

submit — for initiating the sending of the form data

reset — for returning the form fields to their original values

button — Simple button to perform some scripting on some event

Input Types

Input Type=“Text”

An input element with the attribute type=”text” is a single-line text box.This is most common form field, used for short pieces of textual information such as someone’s name,email address, credit card number. text is the default value for the type attribute (so you don’t need to explicitly use the type attribute, if a textbox is what you’re after).Other Attributes Of Text Filed are as follows:value provides an initial value for the text input control that the user will see when the form loads.size allows you to specify the width of the text-input control in terms of characters.maxlength allows you to specify the maximum number of characters a user can enter into the text box.

Example:<input type=“text” name=“name" maxlength=“3” size=“100” />

Input Types (contd.)

Input Type=“Password”The password type works like the text type, apart from one characteristic: As the user types, instead of the characters appearing in the text box, placeholder characters (usually asterisks or circular bullets, depending on the browser) will appear in their place. The idea behind this is that anyone peering over the user’s shoulder won’t be able to see what is being typed in.

<input type="password" name="pword" maxlength=3 size=100 />

Input Type=“checkbox”:The checkbox type creates a simple checkbox, used to supply a yes/no, set/unset, on/off option. By default, a browser will style this as a small empty square box, which, when selected, will display a “tick” inside the box.You can also specify that the initial state of a checkbox should be selected by adding the attribute and value combination checked=”checked”. If a checkbox is not selected when the form data is submitted, no value will be sent. When the checkbox is selected, “on” will be sent as the value for the corresponding name unless the tag has a value attribute, in which case the value of that will be sent for the name instead.

<input type=”checkbox” name=”modern” checked=”checked” />

Input Types (contd.)

Input Type=“radio”

Radio buttons, defined by the radio type, are similar to checkboxes, but the idea is that you can only select one option in a group at a time. You give a group of radio input elements the same name.When one of the radio buttons in that group is selected, any other radio buttons that were selected will be turned off.

<input type=”radio” name=”color” value=”red” checked=”checked” /><input type=”radio” name=”color” value=”orange” /><input type=”radio” name=”color” value=”blue” />

You really need to use the value attributes here.

Input Types (contd.)

Input Type “submit”There are other ways of submitting form data (namely with a bit of JavaScript), but the most common and easiest way is by hitting a submit button. The submit input type takes the form of a button and when this button is pressed, the form data will be sent to the value of the action attribute in the opening form tag.but value can be changed with the value attribute.

<input type=”submit” value=”Search” />

Input Type “reset”:The reset input type creates a reset button, which, when clicked (or otherwise .selected), will reset the form, with form fields returning to the values that they had when the page was first loaded.Like submit, the text on the reset button (“Reset,” by default) can be changed with the value attribute.

<input type=”reset” value=”Start again” />With both submit and reset buttons, the name attribute isn’t particularly necessary.

Input Type= “button”:Button input elements do absolutely nothing. They are used to invoke client-side scripts (namely JavaScript)

<input type=”button” value=”Start again” />

Environment Variables

Beyond the variables you declare in your code, PHP has a collection of environment variables, which are system defined variables that are accessible from anywhere inside the PHP codeThere are three environment variables used for Form Processing:$_GET$_POST$_REQUESTThere are various reasons to be cautious about using the $_REQUEST[] , like what happens when we have a GET field and and POST field with the same name.Data returned from the client using the POST method are stored in the $_POST[] Variable by PHP. Data returned from the client using the GET method, or as a query string in the URL, are stored in the $_GET[].

Assignments

1. Generate Dynamic Table using Forms

a. Create Page1 with Form consisting of Textfield - getting no: of Matematical tables to print and a Submit Button.

b. Create a Page2 consisting of :i. Mathematical Table in tablular format each cell consist of table starting from 1 to 12.

ii. The row of table shoud break after 4 cells.

iii. Program should be dynamic have variable of No: of table to generate.

2. Generate Text Fields using Forms

a. Create Page1 with Form consisting of Textfield - getting no: textfields to show on Page2 and a Submit Button.

b. Create a Page2 consisting of :

No: of textfields given from page1.

c. Create a Page3 consisting of :

Values Given Through textfields on page2.

Assignments

3. Policies using Checkbox

a. Create a Page1 consisting of 5 check boxes :a. Stepind

b. Discipline

c. Attendence

d. Assignment

e. Agree

f. A submit button

Requirement:At least first 3 - maximum 4 and 5th check be selected show "Your are selected".

If first 3 or 4 are selected and last not then show fail message on page2.

If less than 3 are selected and last not-selected or selected then show fail message on page2.

Questions?