This reading is entirely about HTML, but forms are the primary way of getting input from the user, and we will then turn to how that input can be accessed using the DOM and jQuery and then processed by our JavaScript code. To add the form processing functionality, we'll have to learn about events and event handlers, which is in the next reading. This reading is just HTML.

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 talk to one of us. 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. 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:

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. 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.

<input type="text">

Your Age: <input type="number" min="1" max="120">

<input type="range" min="100" max="200">

<input type="date">

<input type="time">

<button type="button">Click me</button>

<textarea rows="2" cols="10"> You can type here</textarea>

<select><option>Black <option>White </select>

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 aspect of

The INPUT Tag

The input tag is fairly straightforward, but you can specify the type of input you are looking for, 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 phrase
• PASSWORD: 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 in this course.

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 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.

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 the input 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:

<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 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.

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 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 everytime we create form fields.
• The value attribute is an attribute that can be either set explicitly in the HTML code to give an initial value to the elements, or will be set implicitly by the browser when the user enters a value in the field or selects some option (as from a menu). For example, <input type="text" value="Wellesley"> will show an initial value in the text field: , that can be overwritten by the user.

Size of Text Inputs

To control the width of the text input field, you don't use the attribute width, but the attribute size. For example, <input value="Wellesley" size="10"> will now be much smaller than in the example above: .

Placeholder

Another useful attribute for input controls is placeholder, which can be used to provide a hint for the kind of value that should go in a field. For example, this HTML <input type="text" placeholder="Enter your name"> will be rendered like this: .

Form Validation

Later in the course, we'll talk about submitting the form data to a server for more elaborate processing, but before we do that, we should discuss validation. What is form validation? Essentially, it means checking to see that the form has been filled out correctly (as far as we can tell).

Form validation could be used to ensure that someone hasn't overlooked a text input, menu or radio button group, and can check that, for example, the zip code is 5 digits (or 9) and that a telephone number is 10 digits, and that an email address looks like an email address.

Form validation can actually cancel the submission of the form, so that the data never leaves browser. The reason we validate forms is twofold: to give the user immediate feedback that they've missed something, instead of waiting for the server to respond, and to protect the server from having to handle all those invalid forms. Of course, a determined nefarious person can simply disable our form validation JavaScript and hammer our server with invalid forms, but that's rare. The vast majority of invalid forms are just human error.

Obviously, the browser can't tell whether you entered your correct phone number, but it can check that you typed the right number of digits (and only digits). Similarly, it can't check that your spelled your name correctly (and whether your name really is Mickey Mouse), but it can check that you didn't leave that input blank.

With HTML5 and modern web browsers, form validation has gotten a lot easier. In the past, web developers would write JavaScript code that would look at the values in the form to check for bogus values. They wrote libraries and jQuery plug-ins to make the job easier for others. Indeed, there is a jQuery plug-in by Jörn Zaefferer called validation that does a good job and is well described in our book, JavaScript & jQuery: The Missing Manual, pages 278-300. Please read that, and the on-line documentation linked above, if you're curious.

However, the vast majority of form validation can be done with a few simple things:

• Add the attribute required to any input that you want to require the user to fill out.
• Use the fancy new form input types that HTML5 has added, such as:
  • tel, for telephone numbers
  • email, for email addresses
  • date, for just a date (year, month, day)
  • time, for time (hour, minute, seconds)
  • datetime, combining date and time inputs
  • and others

Here's a demonstration. (Note that I didn't re-use the input names from the earlier example because the JavaScript code above referred to the inputs by name, and so we need to make those unique. I could also have used a nested selector and given each form its own ID.)

<form action="/cgi-bin/dump.cgi">
  <p>Username: <input required name="username">
  <select required name="hogwarts_house">
    <option value="">Hogwarts House</option>   
    <option>Gryffindor</option>
    <option>Hufflepuff</option>
    <option>Ravenclaw</option>
    <option>Slytherin</option>
  </select>
  <p>Email address: <input required name="email" type="email">
  <p>Birthday: <input required name="birthday" type="date">
  <p><input type="submit" value="submit form">
</form>

Here's the actual form, so you can change the values of inputs:

Try to submit an incomplete form!

Additional Material

You can stop here. The following information is just for those interested in learning more.

TBD