Form Overview CMPT 165: Form Basics Tamara Smyth, tamaras@cs.sfu.ca School of Computing Science, Simon Fraser University October 26, 2011 A form is an HTML element that contains and organizes objects called form controls, e.g. text boxes, check boxes, and buttons, that allow you to intake information from a website visitor. Every time ou use a search engine, place an order, or join an online mailing list, you use a form and the form controls contained within. Example: Google s search form contains 3 form controls: 1. the text box that accepts the keywords to be searcehd; 2. a button labelled Google Search ; 3. a button labelled I m Feeling Lucky, which when clicked, takes the user directly to the first search result; 1 CMPT 165: Introduction to the Internet and the WWW: Form Basics 2 Form Processing The Form Element A form alone cannot do all the processing. The form needs to invoke a program or a script. There are usually 2 components to a form: 1. The HTML form itself, which are the collection of controls on the web page graphical user interface (GUI) 2. The server-side processing, which uses the form data in some way. The form element is created using the <form>...</form tags, which specifies the beinning and end of a form area. Though there can be multiple forms on a webpage, they cannot be nested. The form element can be configured with attributes that specify what server-side program will process the form (action), how the form information will be sent to the server (method), the name of the form (name) to be used by client-side script. Example: <form method="get" name="myform" action="demo.php" >... form controls go here... CMPT 165: Introduction to the Internet and the WWW: Form Basics 3 CMPT 165: Introduction to the Internet and the WWW: Form Basics 4
Details of Form Element Attributes action: value: URL of the processing script; purpose: indicates where to send the form information; mailto:emailaddress will launch the visitor s default email application to send the form information. method: value: get, post ; purpose: determines how data is transmitted to the server get causes the form data to be appended to the URL and sent to the web server; post is more private and transmits the form data in the body of the HTTP response (preferred by W3C); default value is get. name: value: Alphanumeric, no spaces, begins with a letter, choose a form name that is descriptive but short. purpose:optional; names the form so that it can be easily accessed by client-side scripting, to edit and verify the form information before the server-side processing is invoked. autocomplete: (HTML5 attribute) value: on, off ; purpose: if on, browser will use autocompletion to fill form fields; default value is on. Example: <form name="order" method="post" id="order" action="demo.php">...form controls go here... configures a form with the name order, using the post method, and invoking a script called demo.php on your web server. CMPT 165: Introduction to the Internet and the WWW: Form Basics 5 CMPT 165: Introduction to the Internet and the WWW: Form Basics 6 Form Controls Input Element The purpose of a form is to gather information from a web page visitor. Form controls are the objects that accept the information. Types include: text boxes, scrolling text boxes, select lists, radio buttons, check boxes, and buttons. HTML5 offers new form controls includes those customized to e-mail addresses, URLs, dates and times, numbers, and date selection. The input element is a stand-along tag that is used to configure several different types of form controls. Use the type attribute to specify the type of form control that the browser should display: text box: type= text submit box: type= submit reset box: type= reset check box: type= checkbox radio button: type= raadio password box: type= password CMPT 165: Introduction to the Internet and the WWW: Form Basics 7 CMPT 165: Introduction to the Internet and the WWW: Form Basics 8
Text Box Example that configures a text box to accept an email address: E-mail: <input type="text" name="email" id="email"> Common input element attributes for text boxes are: type: value: text size: value: numeric maxlength: value: numeric value: value: text or numeric characters; assigns an initial value disabled: value: disabled; form control is disabled readonly: value: readonly; form control is for display only; cannot be edited; HTML5 attributes: autocomplete: value: on, off; default is on; browser will use autocompletion to fill the form control autofocus: value: autofocus; browser places cursor in the form contro and sets focus CMPT 165: Introduction to the Internet and the WWW: Form Basics 9 list: value: datalist element id; associates the form control with a datalist element paceholder: value: text or numeric characters; brief information inteded to assist the user required: value: required; browser verifies entry of information before submitting the form accesskey: value: keyboard character; configures a hot key for the form control tabindex: value: numeric; configures the tab order of the form control The name attribute names the form element so that it can be easily accedd by client-side scripting languages such as Java Script. The value should be unique to that form. The id element is included for use with CSS and scripting. It is common to make the same assignment for both id and name attributes. CMPT 165: Introduction to the Internet and the WWW: Form Basics 10 Submit and Reset Buttons Check Box The submit button form control is used to submit the form. When clicked, it triggers the action method on the <form> tag and causes the browser to send the form data to the web server. <input type="submit"> The web server will invoke the server-side processing program listed on the form s action property. You can change the text appearing on the submit button by setting the value attribute. The reset button form control is used to reset hte form fields to their initial values. <input type="reset"> None of these buttons will do anything until you enclose them in a form element. Example: <form method="get"> E-mail: <input type="text" autofocus="autofocus"><br> <input type="submit" value="sign me up!"> <input type="reset"> The check box form control allow the user make one or more selection(s) from a group of predetermined items. <input type="checkbox" value"yes"> The value attribute can have a text of numeric value, and assigns a vlaue to the ckech box that is triggered when the check box is checked; this can be accessed by both client and server. CMPT 165: Introduction to the Internet and the WWW: Form Basics 11 CMPT 165: Introduction to the Internet and the WWW: Form Basics 12
Radio Button Password Box The radio button form control allows the user to select exactly one (and only one) choise from a group of predeterined items. <input type="radio"> The value attribute can have a text of numeric value, but it should be a unique value for each radio button in a group; this can be accessed by both client and server. Give each radio button in a group the same name, e.g. name= favbrowser to ensure that only one is selected. Each radio button in the same group can be uniquely identified by its value attribute. The checkbox and radio button have the most of the attributes already seen In addition, they have the checked attribute, where the value checked configures a check box to be checked by default when displayed by the browser. The password box form control is similar to the text box, but it is used to accept information that must be hidden as it is entered, such as a password. <input type="password" name="pword"> When the user types, asterisks or dots are shown (depending on the browser). Though this hides the information from someone looking over your shoulder, the actual characters typed are sent to the server, and the information is not really secret or hidden. CMPT 165: Introduction to the Internet and the WWW: Form Basics 13 CMPT 165: Introduction to the Internet and the WWW: Form Basics 14 Textarea Element Select Element The scrolling text box form control accepts free-form comments, question, or descriptions. Unlike the other form controls seen so far, it does not used the input tag, but rather the <textarea>...</textarea> tags to delimit the beginning and end of the scrolling text box. Text between the tags will display in the scrolling text box area. Comments:<br> <textarea name="comments" cols="40" rows="2"> Enter your comments here </textarea> The cols and rows attributes are required to confiugre the width and height. If omitted, the browser will use its default values. The wrap attribute, hard or soft, configures line breaks within the infomration entered. CMPT 165: Introduction to the Internet and the WWW: Form Basics 15 The select list form control is also known as a drop-down box and is configured using the <select>... </select> tags. The select element contains one or more option elements (discussed next slide). Attributes configure the number of options to display and whether multiple items may be selected: size: value: numeric; purpose: configures the number of choices the browser will display; if 1, element functions as a drop-down list; scroll bars are automatically added by if the number of options exceeds the space allowed. multiple: value: multiple ; purpose: configures to accept multiple choices; default is only one choice. CMPT 165: Introduction to the Internet and the WWW: Form Basics 16
Option Element Label Element The option element contains and configures an option item displayed in the select list using the <option>...</option> tags. Attributes configure the value of the option and whether they are preselected. value: value: text or numeric characters; purpose: assigns a value to the option; selected: value: selected ; purpose: configure an option to be initially selected when displayed by a browser. <select size="1" name="favbrowser"> <option>select your favorite browser</option> <option value="internet Explorer">Internet Explorer</option> <option value="firefox">firefox</option> <option value="opera">opera</option> </select> If the number of items exceeds the size, a scroll bar will appear. The label element is a container tag that associates a text description with a form control. Clicking anywhere on either a form control or its associated text label will set the cursor focus to the form control. There are two different methods to associate a label with a form control: 1. The label element is placed as a container around both the text description and the HTML form element. <label>e-mail: <input type="text" name="email"></label> In this case, the text label and the form control must be adjacent elements. 2. The for attribute is used to associate the label with a particular HTML form element. <label for="email">email: </label> <input type="text" name="email" id="email"> This is more flexible and does not require elements to be adjacent. Notice that the value of the for attribute on the label element is the same as the value of the id attribute CMPT 165: Introduction to the Internet and the WWW: Form Basics 17 CMPT 165: Introduction to the Internet and the WWW: Form Basics 18 on the input element, creating an association between the text label and the form control. The label element does not display on the web page but works behind the scenes. Fieldset Element and Legend Element The fieldset and legend elements work together to visually group form controls together. The fieldset element allows you to group elements of a similar pupose by containing them within the <fieldset>...</fieldset> tags. The legend element provides a text description for the fieldset grouping by containing text within the <legend>...</legend> tags. Example: <fieldset> <legend>billing Address</legend> <label>street: <input type="text" name="street" id="street" size="54"></label><br><br> <label>city: <input type="text" name="city" id="city"></label> <label>province: <input type="text" size="2" name="prov" id="prov"></label> <label>postal code: <input type="text" size="6" name="pcode" id="pcode"></label> </fieldset> And don t forget to use CSS to add a little style! fieldset { width: 500px; border: 2px ridge #ff0000; } legend { font-family: Georgia, serif; font-weight: bold; } label { padding-left: 10px; } CMPT 165: Introduction to the Internet and the WWW: Form Basics 19 CMPT 165: Introduction to the Internet and the WWW: Form Basics 20
Style a Form with CSS HTML5 Form Controls And speaking of CSS... The following HTML... <h1>contact Us (formatted with CSS)</h1> <form method="post" id="myform"> <label for="myname">name:</label> <input type="text" name="myname" id="myname"> <label for="myemail">email:</label> <input type="text" name="myemail" id="myemail"> <label for="mycomments">comments:</label> <textarea name="mycomments" id="mycomments" rows="2" cols="20"></textarea> <div id="mysubmit"> <input type="submit" value="submit"> </div>... can be styled with CSS: #myform { background-color: #eaeaea; font-family: Arial, sans-serif; width: 400px; } label { float: left; width: 120px; clear: left; text-align: right; padding-right: 10px; margin-top: 10px; } HTML5 offers us a few more options of form controls. Text boxes can be specified, for example, by the type of text they are to accept, thus making sure the input is correctly formatted: email addres: type= email URL: type= url telephone number: type= tel search: type= search When the text is entered, an error message will pop up if it s not properly formatted according to its type. Browsers that do not support this feature will render as a normal text box. input, textarea { margin-top: 10px; } #mysubmit { margin-left: 130px; padding-bottom: 10px; } CMPT 165: Introduction to the Internet and the WWW: Form Basics 21 CMPT 165: Introduction to the Internet and the WWW: Form Basics 22 HTML5 Datalist Element HTML5 Slider and Spinner Controls The datalist form control offers choices as well as a text box for entry. It is configured using 3 elements: <input>, <datalist> and one or more <option> elements. Browsers that do not support this feature will render as a normal text box. The slider form control provides a visual, interactive user interface that accepts numerical information, with a default range of 1 to 100. Change the range using the max and min attributes, as well as the step. CMPT 165: Introduction to the Internet and the WWW: Form Basics 23 CMPT 165: Introduction to the Internet and the WWW: Form Basics 24
HTML5 Date and Time Controls CMPT 165: Introduction to the Internet and the WWW: Form Basics 25