Forms
This reading supplements Chapter 9, which introduces forms along with Bootstrap. This reading focusses just on the forms.
Forms are an import part of any website in which the user interacts, such as suppling information or making choices (e.g. menu options).
We will not be covering all aspects of HTML forms. We'll focus on just a handful that are useful in this course. If you want to learn more, there's some additional material at the end, and you're welcome to ask. The most important kinds of inputs we'll learn are:
- text inputs (a single line of text, such as someone's name or favorite color
- textareas (longer blocks of text, such as someone's address or blog entry)
- menus (one of a set of choices, pre-defined by the form's author, such as
- buttons, which don't so much give input as trigger behavior.
The form
tag¶
HTML has a dedicated tag, form
, that is used as a container
to package data that might be sent to a web server. In this course, we
won't always be submitting the form to a web server, so we will
occasionally use form inputs without surrounding them with a form
tag,
but mostly we will use it. Your book does in Chapter 9.
The attribute method
of the element allows the form to either
request data from the server (method="GET"
), or send data to
the server (method="POST"
). However, in order for both these
operations to happen, the server needs to have some dedicated programs
(also known as scripts) that can deal with the form data. At this point,
we will not talk about how this happens (we'll postpone this discussion
for later in the semester), and only concentrate on the HTML elements that
are contained inside the form.
Let's see an example form, and then we'll look at the code that creates it.
Here's the code that creates that form:
<form class="example"
id="pizza-form"
method="GET"
action="https://cs.wellesley.edu/~cs304/cgi-bin/dump.cgi">
<p><label>Customer name: <input name="customer"></label></p>
<p><label>Telephone: <input type=tel name="phone"></label></p>
<p><label>E-mail address: <input type=email name="addr"></label></p>
<p><label>Size:
<select name="size">
<option value="">choose size</option>
<option value="small">small (10-inch)</option>
<option value="medium">medium (12-inch)</option>
<option value="large">large (14-inch)</option>
</select>
</label></p>
<p><label>Preferred delivery time:
<input name="due" type=time min="11:00" max="21:00" step="900">
</label></p>
<p><label>Delivery instructions:
<textarea rows="3" cols="30" name="instructions"></textarea>
</label></p>
<p><button type="submit">Submit order</button></p>
</form>
As you can see, there's an outer FORM
element that wraps
up the form inputs. There are input elements that correspond to
different places where the user can enter information. Most of the
inputs use the INPUT
tag, but some use tags
like SELECT
(for a drop-down menu)
and TEXTAREA
(for larger blocks of text). The general term
is control. Finally, there's a BUTTON
input at
the end. In a more complete example; clicking this button would send the
form data to the web server; this one doesn't do anything.
Form Fields¶
Let's look at the different input elements (also known as
controls). The following table shows the HTML syntax for
including different HTML elements in a form. As you will notice, the
most common element is <input>
, which, based on the
value for its attribute type
will display a different
kind of input. Play with the rendered version of a tag in every row in
the table.
Control HTML | Rendered Control | More Info |
---|---|---|
text: <input type="text"> |
info | |
number: <input type="number" min="1" max="120"> |
info | |
range: <input type="range" min="100" max="200"> |
info | |
date: <input type="date"> |
info | |
time: <input type="time"> |
info | |
<button type="button">Click me</button> |
info | |
long text: <textarea rows="2" cols="10"> </textarea> |
info | |
menu: <select><option>Black <option>White </select> |
info |
For more information on the form
elements and all its
fields, consult the W3Schools page on
forms.
Let's look at some of the more important controls, and then other aspects of forms.
The input
Tag¶
The input
tag is fairly straightforward, but you can
specify the type of input you are looking for by using the
TYPE
attribute. It has many more types, which we are not
listing here; consult W3Schools page for
input to see the complete list. Here are just a few:
text
: allows the user to type in a word or phrasepassword
: allows the user to type in a word or phrase, but its value isn't echoed, so no one can look over their shoulder and see it.email
: like a text type, but should look like an email address. New with HTML5.date
: for entering dates. New with HTML5.time
: for entering times. New with HTML5.
Some of these types (such as time, date, number, range, etc.) were
introduced in HTML5, which means that not all browser versions are
able to support them. For maximum portability, you should stick to
type=text
. However, sliders like we get with
type=range
are fun, and we'll use them sometimes.
The SELECT
input¶
To specify a menu, from which the user can choose only one option, you
use the SELECT
tag inside the form. You specify the NAME
of the input in the
SELECT
tag, and each menu item is specified using the
OPTION
tag. Here's an example:
<form action="">
<p>Drink: <select name="beverage">
<option value="">choose one</option>
<option value="Coke">Coca-Cola</option>
<option value="Pepsi">Pepsi-Cola</option>
<option>Beer</option>
<option>Wine</option>
</select>
</form>
(The closing </option>
tag is optional, like a
closing </p>
tag or </li>
tag,
but it's best to use it.) Any option can have a separate "value"
attribute; if none is specified, the value is the option itself.
Specifying a non-option
as the first item in the list helps to
tell whether someone has actually made a choice or just overlooked
this menu. Making the non-option have a value of the empty string
helps with validating the form, which we'll talk about later.
The textarea
input¶
If you want to allow your user to type in a long response, you should
define
a textarea
inside your form. This tag has attributes called ROWS
and
COLS
that let you specify the size of the area.
<textarea name="thoughts" rows="3" cols="40">
A chicken is an egg's way of making another egg
</textarea>
The default value is the region between the beginning and ending tag. Typically, you want the default value to be empty, so put the tags right next to each other, as in this example here:
<textarea name="thoughts" rows="3" cols="40"></textarea>
Don't let even a single space creep in, or the initial value will be a string of one space, and not the empty string. That will affect any code that cares about the default or original value, such as certain kinds of validation
Labels¶
A form consisting of a bunch of bare boxes would be useless, so how is
the user to know what input box means what? That's done with the
label
tag. There are two ways the label can be used. One
option is to wrap both the input and the text in the label:
<label>
Given Name
<input type="text" name="givenname">
</label>
<label>
Family Name
<input type="text" name="familyname">
</label>
The other is to give the input an ID and reference that ID in a
for
attribute of the label. The <label>
tag still wraps
the textual label, but it no longer wraps the control/input.
<label for="givenname">Given Name</label>
<input type="text" name="givenname" id="givenname">
<label for="familyname">Family Name</label>
<input type="text" name="familyname" id="familyname">
The latter is a bit more work, but it is necessary in some cases where the structure of the HTML doesn't allow the input to be a child of the label, as with a table. Your book uses the for/id approach.
Using labels is important for accessibility. More on this below.
Name and Value¶
When the form gets submitted, the form data gets sent to the server. It gets sent as a set of name/value pairs, which we can think of as like a little table. Here's some data as if from our pizza form:
name | value |
---|---|
customer | Hermione |
phone | 555-8888 |
addr | hgranger@hogwarts.ac.uk |
size | large |
due | 21:00 |
instructions | please deliver by owl |
Since the fields of a form need to be processed both by Javascript code on the client-side (by the browser) and the scripts on the web server, it is necessary to use the different attributes of these elements to distinguish and access them.
Consequently, the two most important attributes that we will use very
frequently are name
and value
- The
name
attribute is chosen by us, the authors of the form. It is used by Javascript to reference the HTML elements that use it, but most importantly is used by the server to distinguish between the different fields of the submitted form. We will discuss it again later when we talk about submitting the form to the server. In the meantime, it will be good practice to start using it every time we create form fields. - The
value
attribute is the information from the user. It can be typed in by the user, chosen from a menu, or some other way.
Placeholder¶
Another useful attribute for input
controls is
placeholder
, which can be used to provide a hint or
example of the kind of value that should go in a field. For example,
this HTML
<input type="text" placeholder="Hermione Granger">
will be rendered like this:
.
Radio Buttons¶
Radio buttons are used for a set of mutually exclusive options, like the buttons on a car radio, to choose the station.
Important: Radio and checkbox input items should all have the same name, so that they are considered as related. Without the same name, radio buttons will not be mutually exclusive.
HTML | Rendered HTML | More info |
---|---|---|
<label for="wbur">WBUR</label> <input type="radio" name="station" id="wbur"> <label for="wzly">WZLY</label> <input type="radio" name="station" id="wxly"> |
info |
Try choosing one button and then the other.
Testing Accessibility¶
Accessibility is a big complex subject, and professional websites have trained developers, automated tools, and human testers to ensure accessibility. All that is outside the scope of this course, but I will introduce three important tools and require you to use them.
All HTML must be valid, which means it satisfies the structural rules set out by the WWW consortium (W3C). Valid HTML is important because screen readers and such can do a better job understanding the structure of the page if it follows the rules. Most browsers are much more forgiving, so don't assume that if it looks good in a browser that it's good.
You can validate your HTML using this website from the W3C: https://validator.nu/. We've done this before in this course.
All CSS (see below) must be valid, for similar reasons as the HTML.
The W3C also provides a CSS validator that works the same way as the HTML validator: https://jigsaw.w3.org/css-validator. Again, we've used this before.
Check the page for common accessibility issues with the WAVE, the Web Accessibility Evaluation tool, https://wave.webaim.org/. It's important to note that getting no errors from the WAVE tool doesn't mean your site is accessible — only a person can decide that — but it's a useful tool nevertheless. Not passing the WAVE test is certainly undesirable.
Like the earlier validators, WAVE can retrieve a publicly hosted page given its URL and evaluate it. It doesn't have a mode where you can copy/paste your code, but there are two browser plugins that will evaluate the page in your browser. In less than 1 minute, I installed the Chrome plug-in, a page, and evaluated it.
Coffeerun From from Chapter 9¶
Here's the finished code from chapter 9
We'll explore it some, just to look at the form they created. Note:
- The controls that they created
- The names of those controls
- The values of the controls
- We'll try submitting the form and observer the name/value pairs in the URL
- The
coffee
input is an ordinarytext
input - The
emailAddress
input is anemail
input (fallback to text if the browser doesn't supportemail
) - The
size
input is a set of radio buttons - The
flavor
input is a dropdown menu - The
strength
input is arange
input type, which gives us a fancy slider widget - We'll look at the
submit
button as well. - We'll adjust the slider and see the numbers in the URL.
- We'll look at some of the CSS formatting that we get from Bootstrap.
Topics we didn't cover¶
- fieldset and legend
- checkboxes
- size of inputs
- validation
- others??