Lesson 5 Introduction to HTML Forms

Lesson 5 Forms A form is an area that can contain form elements. Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form. A form is defined with the tag.

Introduction to HTML Forms Lesson 5 Forms The Form's Action Attribute and the Submit Button When the user clicks on the "Submit" button, the content of the form is sent to another file. The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input. The method attribute defined the method of sending data in form “GET” or “POST”

Introduction to HTML Forms Lesson 5 Using the GET Method and POST Method When the user enters information in a form and click Submit, there are two ways the information can be sent from the browser to the server: in the URL, or within the body of the HTTP request.. The GET method, appends name/value pairs to the URL. Unfortunately, the length of a URL is limited, so this method only works if there are only a few parameters. The URL could be truncated if the form uses a large number of parameters, or if the parameters contain large amounts of data. Also, parameters passed on the URL are visible in the address field of the browser not the best place for a password to be displayed.

Introduction to HTML Forms Lesson 5 The alternative to the GET method is the POST method. This method packages the name/value pairs inside the body of the HTTP request, which makes for a cleaner URL and imposes no size limitations on the forms output. It is also more secure.:

Introduction to HTML Forms Lesson 5

Introduction to HTML Forms Lesson 5 Which method should you use? Use GET method to retrieve information for example searching. Use POST method to modify the contents of a date store on the server for example modifying your personal profile.

Introduction to HTML Forms Lesson 5 Syntax When to Use It $_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)

Introduction to HTML Forms Lesson 5 Text Fields Text fields are used when you want the user to type letters, numbers, etc. in a form. 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.

Introduction to HTML Forms Lesson 5 You can determine the size of text box by size attribute and the length of data by Maxlength attribute.

Introduction to HTML Forms Lesson 5 Text Fields

Introduction to HTML Forms Lesson 5 Text Fields You can determine write the input data behind stars by using password type.

Introduction to HTML Forms Lesson 5 Page1.htmlPage2.php

Introduction to HTML Forms Lesson 5 Page1.htmlPage2.php

Introduction to HTML Forms Lesson 5 Page1.htmlPage2.php

Introduction to HTML Forms Lesson 5 Radio button group: TYPE="radio“ All buttons within the same group must have the same NAME. A single radio button can be shown, provided it has a unique NAME. NAME="text“ 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" The text that accompanies the radio button if it is selected by the user. This text can be used by a program (cgi-script, JavaScript, etc.) written to process the form. CHECKED Specifies the default radio button.

Introduction to HTML Forms Lesson 5

Introduction to HTML Forms Lesson 5

Introduction to HTML Forms Lesson 5 Page1.html

Introduction to HTML Forms Lesson 5 Page2.php

Introduction to HTML Forms Lesson 5 Page2.phpPage1.html

Introduction to HTML Forms Lesson 5 Checkbox group: TYPE="checkbox“ All buttons within the same group must have the same NAME. 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" The text that accompanies the check box if it is selected by the user. This text can be used by a program (cgi-script, JavaScript, etc.) written to process the form. CHECKED Pre-select the check box.

Introduction to HTML Forms Lesson 5

Introduction to HTML Forms Lesson 5

Introduction to HTML Forms Lesson 5 The Details: dialog items NAME="text" This assigns a label to the item selected by the user, thus identifying what the user was responding to. SIZE=value Specifies the number of list items shown at any one time. If this attribute is left out, the list box defaults to a drop-down list. Each item you require in the list must be enclosed in a pair of tags. The closing tag is 'optional' (no pun intended). VALUE="text" This specifies what text is returned in the when a specific item is selected. The text between the opening and closing option tags is what appears in the list box. SELECTED Sets a list item to be pre-selected

Introduction to HTML Forms Lesson 5

Introduction to HTML Forms Lesson 5

Introduction to HTML Forms Lesson 5 The Details: dialog items The 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 two tags. 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. NAME="text" This assigns a label to the text input by the user, thus identifying what the user was responding to. COLS=characters Specify the width of the text entry area in characters. ROWS=number Specify the height of the text entry area in rows.

Introduction to HTML Forms Lesson 5

Introduction to HTML Forms Lesson 5