Week 12
Questions from last time?
Chapter 17: Forms
A form is a section of a Web page containing form elements (text fields, buttons, menus, etc.) that the user can fill out or set before clicking on a button to submit the information in the form. Forms give Web page authors a way to make their Web pages more interactive by gathering information from the users.
When the form's Submit button is clicked, the information is generally sent to a server that hands the information off to a PHP script or cgi script to the processed. (cgi = common gateway interface. A script is a program written in a scripting language such as PHP or perl.) The script could do many things with the data, such as:
- store it in a database
- look up some other information to send back based on the submitted data
- calculate results for you
- choose a file to send back to you
- bundle the information into a format that can be emailed to someone
- etc.
The script usually sends a Web page back to the user in response (even if it's just a page acknowledging the submission).
Scripts to Handle Form Data
NOTE! We will not be creating scripts in this course (our Web technologies department has a whole 3-credit course covering such things). We will just be setting up the form that submits information to a script. We will be using a PHP script (supplied by the author of our textbook) on our UNM-LA Web server to simply echo back the information your form submits to it, just to be sure that your form works properly. The UNM-LA Web server is configured to run PHP scripts, but the Web server on UNM main campus does not allow you to run PHP scripts.
"PHP" originally stood for "personal home page," but as it developed into a general-purpose scripting language for Web development, the definition of its name was changed to "PHP: Hypertext Preprocessor" (which, oddly, includes "PHP" in the definition of "PHP"). You can find two PHP scripts in our textbook if you want to see what the language looks like (one script simply echoes back the form input so you can check to see that your form is working; the other script bundles up the submitted form data and emails it to somebody).
The UNM main campus Web servers offer some cgi scripts that students may use, one of which bundles up the submitted form data and emails it to somebody (who must be at a UNM email address).
Making a Form
The area of the Web page that is to contain the form elements needs to be enclosed within <form> ... </form> tags.
The <form> tag has a method attribute that specifies the method used for bundling up the information and sending it to the server, and value can be either post or get. The post method is the more useful of the two, and it is the one we will use. (The get method shows the data being sent to the server for processing as a URL in the location field of the browser, which limits the amount of data that can be sent.)
The <form> tag has a action attribute that specifies the URL of the script that will receive and process the data. This script could be on the same Web server that is serving the Web page that contains the form, or it could be on a different server.
You can also include an id attribute inside the <form> tag if you wish to give the form a unique name by which you can use CSS to format the form. Web pages often have only one form, so an id isn't necessary (this page, for example, contains several forms, so I have different ids on each of them).
All of the text fields, buttons, etc., that are part of the form must be enclosed between the <form> ... </form> tags. If not, their data will not be sent when the form is submitted.
Submit Button
A form must include a submit button (or a submit image, which will be discussed later) in order for the form's data to be submitted. This button must be enclosed between the <form> ... </form> tags to work. The HTML for a simple submit button looks like this:
<input type="submit" value="text on the button" />
The text "text on the button" is what will appear on the button. The appearance of the button will depend upon what operating system the user is running. The button above is not enclosed in a form, so it doesn't actually do anything.
You can also include a name="somename" attribute+value in button's input tag, and the name/value pair will be sent to the server when the form is submitted (where whatever you put in for "somename" is the value). If you have only one submit button on your form, this is just extraneous data; but it's possible to have more than submit button per form (such as "Member Submit" and "Non-member Submit"), in which case the extra name/value data will tell you which button was clicked to submit the form.
A Simple Form Example
Below is the HTML for a simple form with a text field (we'll get to that next) and a submit button. The action points to a PHP script to echo back the form data. Below the HTML is the form (you can try it out). The form has a white background and padding because of the CSS style form { background-color: white; padding: 10px; } that I have in the internal style sheet of this page (so that you can see wherever I have placed forms on this page).
<form id="form1" method="post"
action="http://www.la.unm.edu/~beach/showform.php">
<p>Type a few words here: <input type="text" name="message" /></p>
<p><input type="submit" value="Submit Form" /></p>
</form>
When you try out the form, you will get to see the result that the echo-back script sends to you.
Text Fields
You create text fields where users can enter a line of text with the HTML:
<input type="text" name="inputname" id="inputname" size="n" maxlength="m" value="Some default text" placeholder="hint-text" />
...where inputname is the name that gets attached to the content of the field that is sent to the server as a name/value pair when the form is submitted.
The id attribute is not required, but it can be used to connect the field to a label (explained later) or apply CSS or target the field with JacaScript. NOTE that I have indicated "inputname" as the value for both the name and id attributes -- these attributes can actually have different values, but it is very common to use the same value for both attributes if they are included.
The size attribute allows you to specify how many characters wide the field will be on the page (the default is 20 if you don't include this attribute). You can also format the field width using a CSS style.
The maxlength attribute allows you to limit the number of characters that can be typed into the field (to prevent users from trying to type a novel into a field meant for a ZIP Code). If the user tries to type in more characters than the maximum, the characters simply do not appear. If the size n of the field is less that the maxlength m, the user can type up to m characters, and the contents of the field will scroll to allows the extra characters to be typed.
The value attribute is optional, but you can use it to include default text in the field, and this default data will get sent to the server if the user does not change it before submitting the form. This could be useful if the contents of the field is usually going to be the same (such as a club membership application form where you can pre-fill in the name of the state where most of your members are likely to come from). The default text can also be used to prompt the user to enter something (perhaps it might say "Enter your name here").
The optional placeholder attribute is a new HTML5 feature. If included, the hint-text will appear as grey text inside the field, and that text will disappear when the user selects the field to enter text. This is different from using the value attribute because this hint text is not sent to the server when the form is submitted if the user doesn't put something else into the field. Note: If you include both the value and placeholder attributes, the default text of the value attribute will appear in the field, and the placeholder text will not appear.
Usually you will want to include text before the field to indicate what should be typed into the field. This can be done by simply typing text into the HTML of the page in front of the <input> tag of the field (and they both might be inside a paragraph or list item).
Note that in the HTML below, each of the fields has a different value for their name attribute. You must do this so the script can tell what field the data is from. The phone number field has placeholder text to remind the user to include an area code. The state field is only wide enough for a two-letter abbreviation (and includes the default contents "NM"), and the ZIP code field is only wide enough for a five-digit ZIP. The city, state, and ZIP fields are separated by several non-breaking spaces ( ) to space them apart.
<form id="form2" method="post" action="http://www.la.unm.edu/~beach/showform.php">
<p>First Name: <input type="text" name="first" size="20" maxlength="30" />
</p>
<p>Last Name: <input type="text" name="last" size="20" maxlength="30" />
</p>
<p>City: <input type="text" name="city" size="25"
maxlength="35" />
State: <input type="text"
name="state" size="2" maxlength="2" value="NM"
/>
ZIP: <input type="text"
name="zip" size="5" maxlength="5" />
</p>
<p>Phone: <input type="text" name="phone"
placeholder="(include
area code)" size="23" maxlength="30" />
</p>
<p><input type="submit" value="Submit Form" /></p>
</form>
To make the alignment of the fields neater, a table could be used to hold the form elements, as I did below. You can view the HTML of this page to see what I did. I also used CSS styles to set the table width, row height, cell padding, and right-alignment of some cells in the table.
But remember that many people frown upon using tables for layout like this in modern Web pages, so you may want to use CSS to position your form elements.
The form below uses CSS formatting to arrange the text and form elements as desired using absolute positioning:
The HTML and styles I used for the form above are:
<form id="form4" method="post" action="http://www.la.unm.edu/~beach/showform.php">
<p><span>First Name:</span>
<input name="first" type="text" size="20" maxlength="30" />
<span class="s2">Last Name:</span>
<input name="last" type="text" size="20" maxlength="30" />
</p>
<p><span>City:</span>
<input name="city" type="text" size="20" maxlength="35" />
<span class="s2">State:</span>
<input name="state" type="text" size="2" maxlength="2" value="NM"
/>
</p>
<p><span>ZIP:</span>
<input name="zip" type="text" size="5" maxlength="5" />
<span class="s2">Phone:</span>
<input name="phone" type="text" placeholder="(include
area code)"
size="20" maxlength="30" />
</p>
<p><input type="submit" value="Submit
Form" /></p>
</form>
Styles:
#form4 { position: relative; padding-top: 20px; background-color: white;
}
#form4 p { height: 1.2em; }
#form4 span { position: absolute; width: 96px; left: 0px; text-align: right;
}
#form4 input { position: absolute; left: 100px; }
#form4 span.s2 { position: absolute; width: 96px; left: 280px; text-align: right;
}
#form4 span.s2+input {position: absolute; left: 380px; }
Password Fields
You create a text field where users can enter a line of text that only shows up as bullet characters, use the HTML:
<input type="password" name="inputname" size="n" maxlength="m" />
...where inputname is the name that gets attached to the contents of the field that is sent to the server as a name/value pair when the form is submitted. There is no point is using a value attribute to include default text in the field because it would only display as bullets, BUT you can use the new HTML5 placeholder attribute to display a text hint in the field.
Note! The password field does NOT encrypt the password (it still gets sent as clear text over the Internet), but it does keep onlookers from reading the password as the user types it.
New in HTML5: Email, Telephone, URL, and Required text fields
HTML5 has added new features to forms, such as the placeholder attribute already discussed above. The email, tel (telephone), and url input types will be treated as standard text boxes in old browsers, but in newer browsers they have additional validation features. If the user does not enter the correct form of information in the field, the browser will indicate this (usually by putting a red border around the field and making a screen tip appear with a message if the user points at the field), and will display an error message in a pop-up box by the offending field if the user tries to submit the form. These new inputs can use the same attributes as regular text fields (such as size and maxlength).
Optionally, you can include the pattern attribute along with a "regular expression" that specfies the exact format the user must match. The telephone number field in the example below uses pattern="\d{3}-\d{3}-\d{4}" that requires the user to enter the phone number in the form xxx-xxx-xxxx (and so as not to frustrate anybody, I have included placeholder text to show the needed format). You can find some suggested regular expression patterns at http://html5pattern.com/ (but be very careful if you try to make patterns, or you may just frustrate the user and they won't fill out your form).
HTML5 also allows you to make a text field (a regular one, or any of these new types of field) required by using the required="required" attribute. If the user tries to submit the form without filling in the required field, an error message in a pop-up box by the offending field.
Below are some examples of these new input field types. The ZIP code field is a regular text field with the required="required" attribute. Try these out!
The HTML for the form above is:
<form id="formnew" method="post" action="http://www.la.unm.edu/~beach/showform.php">
<p>Email address: <input type="email" name="emailaddr" /></p>
<p>Telephone number: <input type="tel" name="phonenum"
pattern="\d{3}-\d{3}-\d{4}" placeholder="xxx-xxx-xxxx" /></p>
<p>Web site URL: <input type="url" name="website"
placeholder="start
with http://" /></p>
<p>ZIP code: <input type="text" name="zipcode"
required="required" placeholder="this
is required!" /></p>
<p><input type="submit" value="Submit" /></p>
</form>
There is also a new HTML5 attribute autofocus="autofocus" that will cause the first field on the page that has this attribute to automatically get focus when the page is loaded. Having focus means that the field will be selected and have the cursor will be in that field. You might want to do this so users don't have to click on the first field of the form to start entering data. I don't demonstrate this feature on this page, however, because it also causes the page to automatically scroll to be able to display the field that has focus when the page is loaded, and I don't want this page to jump to some weird place whenever it is opened.
Text Areas
For larger text areas that can contain multiple lines, use the HTML:
<textarea name="inputname" rows="n" cols="m">Default text here</textarea>
...where inputname gets attached to the content of the textarea that is sent to the server as a name/value pair when the form is submitted. The rows (how many lines) and cols (how many characters wide) attributes allow you to specify the size of the text area. Both attributes MUST be specified. You can also set the width and height of the text area using CSS if desired. Users can type up to 32,700 in the textarea. A scroll bar will automatically appear if needed.
Labeling Form Elements
Before we go on to check boxes and radio buttons, I want to mention the <label> tag.
In the previous examples, I simply labeled the text fields and textarea with plain text in the HTML page. But an actual label applied using the <label> tag becomes associated with the form element, and clicking on the label is the same as clicking on the form element (in the case of a text field, the insertion point would appear in the field if you clicked on its associated label). This feature is especially useful with check boxes and radio buttons, since people often expect to be able to click on the label text to activate the check box or button (and it is easier for them to click on the larger target).
There are two ways to associate a label with a form element (such as a text field).
1) You can enclose the form element within the <label> ... </label> tags along with the label text.
2) You can use the for attribute of the <label> tag, and match it to the id of the form element the label belongs to. This second method must be used if the label text can't be right next to the form element (if they are in different cells of a table, for example).
Examples:
<form id="form7" method="post" action="http://www.la.unm.edu/~beach/showform.php">
<p><label>This is the label for field 1: <input type="text" name="field1"
size="15" /></label>
</p>
<table border="1">
<tr>
<td class="right">
<label for="field2">This
is the label for field 2: </label>
</td>
<td>
<input type="text" name="field2" id="field2" size="15" />
</td>
</tr>
</table>
<p><label><input type="text" name="field3" size="15" /> This
for field 3 (it can be on either side)</label>
</p>
<p><input type="submit" value="Submit" /></p>
</form>
You can give focus to any of the three fields above by clicking on its label text. Note that in order for the label of field 2 to work, I had to give that field an id attribute so that I could use the same id value in the for attribute of the label.
Check Boxes
A check box is a square box that the user can check or un-check with the click of a mouse. Each check box can have a unique name and a value that gets sent along with that name when the form is submitted. Check boxes are made using the <input> tag with type="checkbox"
Example:
<form id="form8" method="post"
action="http://www.la.unm.edu/~beach/showform.php">
<p>Put a check mark by all the fruits you like:</p>
<p>
<label><input type="checkbox" name="banana" value="yes" /> Bananas</label>
<br
/>
<label><input type="checkbox" name="peach" value="yes" />
Peaches</label>
<br
/>
<label><input type="checkbox" name="orange" value="yes" />
Oranges</label>
<br
/>
<label><input type="checkbox" name="kumquat" value="yes" />
Kumquats</label>
</p>
<p><input type="checkbox" name="catalog" value="yes"
checked="checked" /> Please
send me the Whole Fruit Catalog!
</p>
<p><input type="submit" value="Submit" /></p>
</form>
Notice that you can check or uncheck any box. Also notice that because of the way I applied the labels, you can also click on the text to check or uncheck the box (except for the bottom one; that text is not associated label text).
Notice that the "Please send me the Whole Fruit Catalog!" box is pre-checked because I included the checked="checked" attribute in the tag for that check box.
Try submitting the form with some items unchecked -- they don't get submitted, but the checked items do get submitted along with the value of "yes" (note that you can put any other data to get submitted along with the name of the checked box, not just "yes").
Radio Buttons
Radio buttons are round buttons that come in groups. The user can select any ONE of the buttons with the click of a mouse (all of the other buttons in the group turn off when one is selected). They are called "radio buttons" because this is the way radio buttons worked on car radios back in the old days. Each group of radio buttons has the same name (which is how the browser knows which other buttons to turn off when one of the group is selected). Radio buttons are made using the <input> tag with type="radio"
Example:
<form id="form9" method="post" action="http://www.la.unm.edu/~beach/showform.php">
<p>Which of these fruits do you like best?</p>
<p>
<label><input type="radio" name="favfruit" value="banana"
checked="checked" /> Bananas</label>
<br
/>
<label><input type="radio" name="favfruit" value="peach" />
Peaches</label>
<br
/>
<label><input type="radio" name="favfruit" value="orange" />
Oranges</label>
<br
/>
<label><input type="radio" name="favfruit" value="kumquat" />
Kumquats</label>
</p>
<p><input type="submit" value="Submit" /></p>
</form>
Since the question here is "which of these fruits do you like best," there should only be one answer in this case, so radio buttons are better than check boxes here.
Note that I have one radio button checked to begin with.
There could be multiple sets of radio buttons on the same form, and all of the buttons in each set would have the same name (which would be different from the name of the buttons in another set).
Selection Menus and Lists
Both Selection Menus and Selection Lists are made using the <select> tag. The difference is that Menus use the size attribute set to size="1" (or you can just leave it out completely), while Lists have larger values for size="n" (where n determines the number of lines shown in the list). Examples:
<form id="form10" method="post"
action="http://www.la.unm.edu/~beach/showform.php">
<p>Selection Menu:</p>
<p>
<select name="fruit">
<option value="none" selected="selected">Your
favorite fruit:</option>
<option value="Banana">Bananas</option>
<option value="Peach">Peaches</option>
<option value="Orange">Oranges</option>
<option value="Apple">Apples</option>
<option value="Kumquat">Kumquats</option>
</select>
</p>
<p>Selection List:</p>
<p>Select the fruits you like:
<br />
<select
name="morefruit" size="4" multiple="multiple">
<option value="Banana">Bananas</option>
<option value="Peach">Peaches</option>
<option value="Orange">Oranges</option>
<option value="Apple">Apples</option>
<option value="Kumquat">Kumquats</option>
<option value="Mango">Mangoes</option>
<option value="Lemon">Lemons</option>
</select>
<br />
(you can make multiple choices with Control- or Command-clicks)<br />
</p>
<p><input type="submit" value="Submit" /></p>
</form>
You can group the selections under submenu headings if you want, like this:
<form id="form11" method="post" action="http://www.la.unm.edu/~beach/showform.php">
<p>
<select name="fruit3">
<option value="none" selected="selected">Select
your favorite:</option>
<optgroup label="Fruits:">
<option value="Banana">Bananas</option>
<option value="Peach">Peaches</option>
<option value="Orange">Oranges</option>
<option value="Apple">Apples</option>
</optgroup>
<optgroup label="Berries:">
<option value="Strawberry">Strawberries</option>
<option value="Raspberry">Raspberries</option>
<option value="Cherry">Cherries</option>
<option value="Blueberry">Blueberries</option>
</optgroup>
</select>
</p>
<p><input type="submit" value="Submit" /></p>
</form>
Hidden Field
Sometimes you need to embed some data within the form to be sent to the script, but it isn't anything that the user needs to see. For example, a script that will handle bundling up the submitted data and emailing it to you is going to need to know your email address. You can use a hidden field within your form to specify such data. The hidden field contains a name and a value that are sent when the form is submitted, but nothing is displayed on the Web page. Here is the HTML for a hidden field:
<input type="hidden" name="whatever" value="somedata" />
...where "whatever" is the name of the field that the script is expecting, and "somedata" is the value you need to send the script. For example, a program to email the data submitted from a form may need a hidden field with name="recipient" and value="youremail@mailserver.com" (to know where to send it), and another hidden field with name="subject" and value="Email from my form" (so it knows what subject line you want on the email).
Note: The hidden field is not really secret—anyone could see the information if they look at the HTML code for the Web page. The field and its data are just hidden from the user, who might be confused by seeing it on the page.
File Upload Field
In some cases you want to give a user the option of specifying a file on their computer that is to be uploaded when the form is submitted (none of the scripts I have use this feature, but it is not uncommon). The HTML to make an File Upload Field is:
<form method="post" enctype="multipart/form-data" action="script-url">
<p>Some text asking the user to browse for the file they want to upload.</p>
<p><input
type="file" name="filetitle" /></p>
<p><input type="submit" value="Submit" /></p>
</form>
...where "script-url" is the URL to the script that can handle the uploaded file, and "filetitle" is an identifier so that the script knows what kind of file it is getting (if it can handle multiple types of files). NOTE that it is no longer valid in HTML5 to use the size attribute with an input of type="file", and you can't change the width of this input field using CSS -- so you are stuck with the default width of the field. In fact, the Safari browser will not display an input field at all, and only shows a "Choose file" button, but it will show the name of the file that gets selected, but won't let you edit the URL -- this is a security feature... other new browsers that show a field will not let you edit the contents of the field.
You can see what the file upload field looks like below:
Reset Button
In addition to a Submit Button, most forms include a Reset Button that can be used to erase any data that has been entered so that the user can start over. Reset also restores the initial settings of the check boxes, radio buttons, default text in fields, etc.
The HTML code for a reset button is:
<input type="reset" value="text on button" />
It is usually a good idea to specify a clearer message than just "Reset" for the button, because some users may not realize that this means to erase the form (which they may have just spent a long time filling out and have not yet submitted).
Here is a previous form to which I have added a Reset Button (with value="Erase the Form"):
Text and Images in Submit and Reset Buttons
In addition to the type of Submit button we mention early on, which used the HTML:
<input type="submit" value="text on the button" />
...you can also use...
<button type="submit"> ...(stuff to appear on button)... </button>
...which allows you to use text and images within the button, and which can be formatted with CSS. The <button> tag can also make Reset buttons (and also buttons that don't do anything, but which you can use to trigger JavaScript routines). Here are examples in a previous form (I put two submit buttons here just to show off the formatting, and I made use of the graphics from the example in the previous edition of the textbook)
The HTML and styles used for the buttons are shown below:
<p class="nicebuttons">
<button type="submit">
<img src="check.gif" alt="checkmark" width="25" height="25" />
Submit
</button>
<button type="reset">
<img src="reset.gif" alt="x-mark" width="25" height="25" />
Erase!
</button>
</p>
<p>
<button class="fun" type="submit">Submit the Data</button>
</p>
Styles:
.nicebuttons button { font: bold 28px Arial, Helvetica, sans-serif;
margin-right:
20px; }
button.fun {
font: bold 28px Arial, Helvetica, sans-serif;
background-color: #CCCC66;
border: 6px outset #DDDD77;
}
You could also make cool looking buttons using the new CSS3 properties for rounded corners and drop shadows.
Using an Image as a Submit Button
You can also use an image as a submit button in a form. This allows you to use a pretty graphic as your button, if you so desire. It also provides the script with the x,y coordinates of the point on the image that the user clicked on. The example below uses the HTML shown here for the submit button:
<input type="image" src="FaceSubmit.jpg" alt="Submit button" />
If the x value returned is less than 90, the user clicked on Tom. If the x value is greater than 202, the user clicked on John. If the x value is in between 90 and 202, the user clicked on Joyce. The script could use this information to email the form data to the appropriate person.
Setting the Tab Order
When users are filling out Web pages, they can press the Tab key to move from field to field (and between other form elements)—this saves time over having to use the mouse to click in the next field to activate it. By default, the fields will activate in the order they appear in the HTML of your Web page... but that order sometimes does not 'make sense' with the content being entered. Try tabbing through the fields of the table below and see what happens:
But you, the Web page author, can set the order of tabbing through the fields and other form elements, and make a tabbing order that makes more sense. You do this by adding the tabindex="n" attribute to the tags of the form elements, where "n" is an integer from 0 (zero) to 32767 (you can leaves gaps in the number sequence...the numbers don't have to be consecutive).
Here is a version of the table above, but with the tab order changed by the addition of tabindex attributes to the form elements:
Navigating Form Elements Via Keyboard
In case you are wondering, below are the keyboard shortcuts that are commonly used with forms on computers in different operating systems (from here). Note that you may need to press Tab many times (to get past links or browser search fields and whatnot) before your form elements begin to get focus as you tab (or select the first form element with the mouse, and use the keyboard for the rest of them). You can try these keyboard shortcuts out in the various forms on this page.
FORMS SHORTCUTS:
| Command | Windows | Mac | Linux |
|---|---|---|---|
| Move to Next/Previous Item in Form | Tab/Shift+Tab | Tab/Shift+Tab | Tab/Shift+Tab |
| Submit Form | Enter | Return (Enter) | Enter |
| Press Selected Button / Select Radio Button | Space | Space | Space |
| Select an Item from a List | Up Arrow, Down Arrow, or First Letter of Item Name | Up Arrow, Down Arrow, or First Letter of Item Name | Up Arrow, Down Arrow, or First Letter of Item Name |
| Check/Uncheck Checkbox (toggle) | Space | Space | Space |
| Open a Drop-Down Menu | Alt+Down Arrow | Option+Down Arrow | Alt+Down Arrow |
Adding Keyboard Shortcuts
In addition to the default keyboard behavior in forms (see above), you can add the ability of a user to activate form elements by assigning keyboard shortcuts to them. This is done by adding the accesskey="x" attribute to the form element's tag (where "x" is an uppercase letter or lowercase letter or number or symbol—the accesskey is case sensitive).
Disabling Form Elements
You can disable a form element (so that a user can't use it), by adding the disabled="disabled" attribute to the element's tag. Of course, this wouldn't be particularly useful if you could not enable use of the form element at some point, and this can be done with some simple JavaScript code. We will discuss JavaScript in a later lecture, but you can see it used in the example below. Try out the form below. You will see that the Submit button is disabled before one of the radio buttons is clicked (and the Submit button will again become disabled if the Reset button is clicked).
Here is the HTML for the form above:
<form id="form20" method="post"
action="http://www.la.unm.edu/~beach/showform.php">
<p>Which of these fruits do you like best? </p>
<p>
<label><input type="radio" name="favfruit" value="banana"
onclick="document.getElementById('submit20').disabled=false" />
Bananas</label>
<br />
<label><input type="radio" name="favfruit" value="peach"
onclick="document.getElementById('submit20').disabled=false" />
Peaches</label>
<br />
<label><input type="radio" name="favfruit" value="orange"
onclick="document.getElementById('submit20').disabled=false" />
Oranges</label>
<br />
<label><input type="radio" name="favfruit" value="kumquat"
onclick="document.getElementById('submit20').disabled=false" />
Kumquats</label>
</p>
<p>
<input id="submit20" type="submit" value="Submit"
disabled="disabled" />
<input
type="reset" value="Reset"
onclick="document.getElementById('submit20').disabled=true" />
</p>
</form>
In the HTML above, the Javascript code is shown in red. Note that I had to add an id to the submit button (id="submit20"). The Submit button is initially disabled by the disabled="disabled" attribute in its tag.
Read-only Elements
You can set a form element (text box, password box, textarea, check box, or radio button) so that it cannot be changed by the user. To do this, add the readonly="readonly" attribute to the element's tag. This is not a particularly useful feature unless you are using JavaScript routines (or server scripts) to modify the contents of the element. But here's an example of a read-only field anyway:
Grouping Form Elements
You can group form elements by enclosing them within <fieldset> ... </fieldset> tags. The <fieldset> element can also contain a <legend> ... </legend> element within it to label the fieldset. (The <legend> tag had an align attribute for specifying if the legend text should be on the left or right, but that is deprecated.) By default, the fieldset formatting looks like this:
You can use styles to format the fieldset and legend elements, as shown below:
The styles used (this form has id="form23") are:
#form23 fieldset { margin-bottom: 1em; width: 12em; }
#form23 fieldset p { margin: 0; }
#form23 .fruit { background: #f3b4f5; border: outset #f3b4f5; }
#form23 .veg { background: #aaf5b4; border: outset #aaf5b4; }
#form23 legend {
background: #DED983;
color: black;
padding: .3em;
font-size:1.2em;
border: 2px outset #DED983; }
...But the textbook author reports that Internet Explorer messes up the <legend> formatting, and so recommends NOT using the <legend> element, but just using a paragraph of class="legend" placed before the fieldset and formatting it to take the place of the fieldset legend. Example:
The styles for the form above (which has id="form24") are:
#form24 fieldset { margin-bottom: 1em; width: 12em; padding-top: 1.5em; }
#form24 fieldset p { margin: 0; }
#form24 .fruit { background: #f3b4f5; border: outset #f3b4f5; }
#form24 .veg { background: #aaf5b4; border: outset #aaf5b4; }
#form24 p.legend {
position: relative;
width: 5em;
margin: 1em 0 -1em 1em;
background:
#DED983;
color: black;
padding: .3em;
font-size:1.2em;
border: 2px outset #DED983;
}
It's the position:relative and the negative bottom margin of the paragraph that does the trick of placing the paragraph where the legend would be.
Assignment 11 - Due Saturday, Nov 30.
You will be required to include one or more forms in your final project. You should think about what kind of form might actually be of use for your final project, and make it (or something similar to it) for this exercise.
Make a form (or more than one form) using as many of the features in today's lecture as possible (but don't use any deprecated attributes, since we want your page to validate as HTML5).
Your form's action can simply target the echo-back script that I have at
http://www.la.unm.edu/~beach/showform.php
to echo back the submitted data to verify that the form works.
You don't have to use a file upload field (since we have no script that works with it) or read-only elements. You also don't need to use JavaScript to activate a disabled element.
Your page must validate as HTML5 using the validator at: http://validator.w3.org/
Your CSS must validate using the validator at: http://jigsaw.w3.org/css-validator/
Send an email to tbeach@unm.edu that includes the URL to your main page for this assignment.
NOTE! The Subject line of this email should be "IT145 YourName Asg. 11"
You will be graded on:
How many of the features from today's lecture that you used.
How well you
followed directions
You sent the correct URL in your email.
The page validates using the validators listed above.
Extra Credit #1:
- Use JavaScript to activate a disabled form element on your form.
Extra Credit #2 (worth many more points):
- Research the cgi scripts that UNM main campus has installed for students
to use on their student Web pages. Learn how to use the script they have
that bundles up the submitted form data and then emails it to your UNM
email account. Make a page that contains a form that uses this cgi script
as its action. When you send me the URL for your Web page with this form
on it, I will try it out and send you a message in one of the fields
(so include a text field or textarea in the form). When you get that
message, send it to me via email and I will know that your form worked!
This project requires that you use the UNM Web site to search for information about the cgi scripts that are available through the UNM Web Hosting that is provided to UNM NetID accounts. Doing that research is part of the project.
Reading Assignment:
- Read Chapter 19 of HTML5 & CSS3 (for next week's class)