Web forms and html (lect 4)

Web forms and html (lect 4)

• 1.
  Web Forms and HTML Sam Copyright© 2012 Muhammad Baqar Qazi.
• 2.
  Lecture-4
• 3.
  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.
• 4.
  Form Element • Youinsert 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.
• 5.
  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).
• 6.
  Form Fields • FormFields 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
• 7.
  “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.
• 8.
  Input Type=“Text” • Aninput 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” />
• 9.
  Input Type=“Password” • Thepassword 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” />
• 10.
  Input Type=“radio” • Radiobuttons, 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.
• 11.
  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” />
• 12.
  <textarea> • The textareaelement 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>
• 13.
  Select • Select formfields 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”).
• 14.
  Environment Variables • Beyondthe 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[].
• 15.
  Assignments • Generate TextFields 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.
• 16.
  Assignments • Policies usingCheckbox 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.
• 17.
  Questions ?