Embedded Files
Home > Chapter Review and Exercises> Chapter 9 - Forms
Summary
Summary
This chapter starts with an introduction to how forms work: data is collected via controls on the page and an application or script on the server processes it. The bulk of the chapter consists of a rundown of the markup for various form control widgets. Throughout the chapter, there are opportunities to try them all out by marking up a pizza ordering form. The chapter closes with form accessibility features.
Takeaways
Takeaways
In Chapter 9, you will learn the following:
Forms have two components:
the form on the web page for collecting input and,
a program on the server that processes the collected information.
The steps involved in a form submission.
The form element and its attributes.
What a variable is and how to identify it with the name attribute.
What the form control content is and how it can be provided with the value attribute or included in the form content itself.
Markup for file controls:
Single-line text-entry controls using the input element (simple text field and specialized fields such as password, email, telephone numbers, search, and URLs)
Multiline text-entry field (textarea)
Buttons, including submit and reset, and custom buttons: (<input type=submit>, <input type=reset>, <input type=image>, <input type=button>, and <button>)
Radio and checkbox buttons (and how they differ) (<input type=radio>, <input type=checkbox>)
Pop-up and scrolling menus (select, option, optgroup)
A file upload control (<input type=file>)
A hidden file control (<input type=hidden>)
Date and time controls (input element with date, time, datetime-local, month, and week types)
Numerical inputs (input element with number and range types)
Color selector (<input type=color>)
How to make forms more accessible using label, fieldset, and legend.
A few tips for improving the usability of web forms as recommended by Luke Wroblewski in his book Web Form Design (Rosenfeld Media).
Key terms in Chapter 9
Key terms in Chapter 9
form controls
The buttons, input fields, and menus on the web page that collect information from the user.
variable
A bit of information collected by a form, such as an email address or a date.
value
The data associated with a given variable. It may be entered by the user via a form control or added by the author in the source with the value attribute.
radio buttons
A form control made up of a collection of on/off buttons that is appropriate when only one option from the group is permitted (only one button may be selected at a time).
checkbox buttons
A form control made up of a collection of on/off buttons that is appropriate when more than one selection is OK (multiple checkboxes in a group may be chosen).
form accessibility
Markup added to forms that make them easier to understand and navigate with assistive devices.
implicitly associated labels
A form control and its brief description nested within a single label element.
explicitly associated labels
Matches the label element with its form control using the control’s ID reference.
Exercises in Chapter 9
Exercises in Chapter 9
9-1: Starting the pizza order form
Using a “sketch” of the finished form, students start building a form for ordering a pizza. In this first step, they add the form element with text-entry controls and a submit button. The form points to a working PHP file so a thank-you message is returned when the form is submitted.
9-2: Adding radio buttons and checkboxes
As it says in the title, radio buttons and checkboxes are added to the pizza ordering form.
9-3: Adding a menu
A pop-up menu is added to the form.
9-4: Labels and fieldsets
The pizza-ordering form is made accessible according to best practices with label, fieldset, and legend markup.
TEST YOURSELF
TEST YOURSELF
Ready to put your web form know-how to the test? Here are a few questions to make sure you’ve gotten the basics.
1. Decide whether each of these forms should be sent via the GET or POST method:
a. A form for accessing your bank account online ________
b. A form for sending t-shirt artwork to the printer ________
c. A form for searching archived articles ________
d. A form for collecting long essay entries ________
2. Which form control element is best suited for the following tasks? When the answer is “input,” be sure to also include the type. Some tasks may have more than one correct answer.
a. Choose your astrological sign from 12 signs.
b. Indicate whether you have a history of heart disease (yes or no).
c. Write up a book review.
d. Select your favorite ice cream flavors from a list of eight flavors.
e. Select your favorite ice cream flavors from a list of 25 flavors.
Practicing forms
Practicing forms
Form to email example
Form to email example
<!DOCTYPE html>
<html>
<head>
<title>Feedback Form</title>
</head>
<body>
<h1>Feedback Form</h1>
<!-- <form method="post" action="send_mail.php"> -->
<form method="post" action="mailto:helpdesk@cgcseagles.org">
<p>
<label>First Name
<input style="border: 3px solid #73AD21;" type="text" name="first_name" required>
</label>
</p>
<p>
<label>Email
<input style="position: relative; left: 32px; border: 3px solid #73AD21;" type="email" name="email_address">
</label>
</p>
<p>
<label>Comments
<textarea style="border: 3px solid #73AD21;" name="comments" cols="40px" maxlength="500"></textarea>
</label>
</p>
<p><button>Submit the form</button></p>
</form>
</body>
</html>
Textarea and displaying code examples
Textarea and displaying code examples
Enter the following HTML into your text editor, save it, and then open it in a browser.
The disabled attribute is a boolean attribute.
When present, it specifies that the text area should be disabled.
A disabled text area is unusable and the text is not selectable (cannot be copied).
The disabled attribute can be set to keep a user from using the text area until some other condition has been met (like selecting a checkbox, etc.). Then, a JavaScript could remove the disabled value, and make the text area usable.
<!DOCTYPE html>
<html>
<body>
<textarea rows="4" cols="50" >
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea>
<hr>
<textarea rows="4" cols="50" disabled="true" style="border: none;background-color:white;">
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea>
<hr>
<textarea disabled rows="15" cols="80">
This text area doesn't allow users to enter text.
Instead it simply shows the HTML text below.
<div class="support-popup" id="set">
<div class="form">
<form action="Faith Solution" accept-charset="utf-8" method="post">
<div style="display: none">
<input type="hidden" name="params_id" value="50910127">
</div>
<div class="snap" style="position: absolute !important; left: -10000px !important;">
</div>
</form>
</div>
</div>
</textarea>
<hr>
<pre>
<code>
p { color: red; }
body { background- color: #eee; }
<hr> &
</code>
<hr>
</pre>
<hr> & <hr>
< hr >< p >< /p >
<hr>
</body>
</html>
The website should appear as follows:
Form review
Form review
A text input element has the type attribute's value equal to "text" (i.e. type="text")
A button input element has the type attribute's value equal to "button"
The input element must have both the type and name attributes.
A radio input element has the type attribute's value equal to "radio"
To assign the initial (default) value of the input element the attribute is value= " "
If a form is using a program to process the form input, the method attribute's value is "post"
<input type="submit"> defines a button for submitting the form data to a form-handler.
The <textarea> element defines a multi-line input element (a text area)
HTML Forms Review
HTML Forms Review
An HTML form is made up of any number of form elements. These elements enable the user to do things such as enter information or make a selection from a preset options. In HTML, a form is defined using the <form></form> tags. The actual form elements are defined between these two tags.
Like this:
<form>
...
(form elements go here)
...
</form>
The <input> Element/Tag
This is the most commonly used tag within HTML forms. It allows you to specify various types of user input fields such as text, radio buttons, checkboxes etc.
1. Text
Text fields are used for when you want the user to type short amounts of text into the form.
<form>
First name: <input type="text" name="firstname">
Last name: <input type="text" name="lastname">
</form>
2. Radio Buttons
Radio buttons are used for when you want the user to select only one option from a pre-determined set of options.
Note that the user can select one option only. If they click another option, the new option will be selected and the first option will be deselected.
To enable the user to make multiple selections, use checkboxes (below).
<form>
<input type="radio" name="lunch" value="pasta"> Pasta
<input type="radio" name="lunch" value="risotto"> Risotto
</form>
3. Checkboxes
Checkboxes are similar to radio buttons, but they enable the user to make multiple selections.
Checkboxes should be used when you want to allow the users to make more than one selection.
<form>
<input type="checkbox" name="technology" value="HTML"> I
know HTML
<input type="checkbox" name="technology" value="CSS"> I
know CSS
</form>
4. Submit
The submit button allows the user to actually submit the form.
<form action="/html/tags/html_form_tag_action.cfm">
<input type="checkbox" name="technology" value="HTML"> I
know HTML
<input type="checkbox" name="technology" value="CSS"> I
know CSS
<input type="checkbox" name="technology" value="Javascript"> I
know Javascript
<input type="submit">
</form>
5. Select Lists
A select list is a dropdown list with options. This allows the user to select one option from a list of pre-defined options.
The select list is created using the <select> element in conjunction with the <option> element.
<form>
<select name="city">
<option value="sydney">Sydney</option>
<option value="melbourne">Melbourne</option>
<option value="cromwell">Cromwell</option>
<option value="queenstown">Queenstown</option>
</select>
</form>
6. Textarea
You can use the <textarea> element to enable users to enter larger blocks of text than with the <input> tag.
It's often a good idea to use the maxlength attribute to restrict the user's input to a certain number of characters. You can also use the cols and rows attributes to adjust the width and height.
<form>
<textarea name="comment" maxlength="100" rows="5" cols="30">Enter comments here.</textarea>
</form>
7. Form Action
Usually when a user submits the form, you need the system to do something with the data. This is where the action page comes in. The action page is the page that the form is submitted to. This page could contain advanced scripts or programming that inserts the form data into a database or emails an administrator etc.
Creating an action page is outside the scope of this course. In any case, many web hosts provide scripts that can be used for action page functionality, such as emailing the webmaster whenever the form has been completed. For now, we will simply look at how to submit the form to the action page.
You nominate an action page with the action attribute.
<form action="/html/tags/html_form_tag_action.cfm" method="get">
First name: <input type="text" name="first_name" value="" maxlength="100">
Last name: <input type="text" name="last_name" value="" maxlength="100">
<input type="submit" value="Submit">
</form>
8. Form Method
The method attribute specifies the HTTP method to use when the form is submitted.
Possible values are:
Get
The form data is appended to the URL when submitted. This means you can actually see the form variables in your browser's address bar when the form is submitted. This can be handy for non-sensitive data such as a search engine's results page. It also allows you to bookmark the page and even link to it from another web page.
Post
The form data is sent to a program on the website hosting computer..
Providing the method attribute is optional. If you don't provide it, the default method will be post.
Videos Shown in class
Videos Shown in class
w3schools Introduction to Forms
Dani Krossing - HTML & CSS Course for Beginners (30 videos in all, below are two of them)
Report abuse