Web Forms and HTML

Sam

Copyright © 2012 Muhammad Baqar Qazi.

Lecture-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, so it has a limitation for its length. It can't be more than 255

characters long (though this is browser dependent, but usually the max is 255 characters only).

• 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 the 10-headed hydra of the trio, 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• image—for sending coordinates of where an image is

clicked on• button—Simple button to perform some scripting on

some event.

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.• <input type=“text” name=“name" maxlength=“3” size=“100” />

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 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 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” />

<textarea>• The textarea element is straight-forward, having just

one simple state. • It works something like a big text-type input element,

but is used for bigger chunks of textual data, usually with multiple lines.

• For Example: • An address, • A comment on a feedback form.

• Unlike the input element, textarea has an opening and closing tag.

• Any text in between the opening and closing tag makes up the initial value of the element.

<textarea name=”whatever” rows=”10” cols=”20”>Type something here

</textarea>

Select• Select form fields present the user with a list (which is usually

displayed as a drop-down menu), from which one or more options can be selected.

• Key to their operation, another element is needed—the option element, which defines each option in the list.

• <select name=”book”>• <option selected=“selected”>The Trial</option>• <option>The Outsider</option>• <option>Things Fall Apart</option>• <option>Animal Farm</option>• </select>• You can supply different values for each option element by

using the value attribute inside the opening option tag. • When the value attribute is present, its value will be sent

instead of the option element’s content.• You can set one option element to be initially selected by using

the selected attribute (in the form of selected=”selected”).

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 code

• There are three environment variables used for Form Processing:

• $_GET• $_POST• $_REQUEST• There 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

• Generate Text Fields using Forms

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

2. Create a Page2 consisting of :No: of textfields  given from page1.

3. Create a Page3 consisting of :Values Given Through textfields  on page2.

Assignments• Policies using Checkbox

1. Create a Page1 consisting of 5 check boxes :• Stepind• Discipline• Attendence• Assignment• Agree•  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?