HTML Forms  Input Fields

Reading: Chapter 14 of your book Head First HTML and CSS discusses HTML Forms. At this lecture, we will not discuss how forms talk to the server, but will only focus on the HTML elements that go into a form, see pages 652-659 (What can go in a form) and 662-672.

The form tag

HTML has a dedicated tag, form that is used as a container to package data to communicate with the web server. The attribute method of the element allows the form to either request data from the server (method="GET"), or store data in 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 the HTML code for a form with its elements, and then discuss each separate element.


Pizza Size

Pizza Toppings

A note on styling

If you see the above form outside an HTML page with CSS, it will look different. Our lecture page applies styling to it that is not the default way a browser will display a form. Please see how the unstyled form looks like.

Additionally, keep in mind that all form elements are inline elements, therefore, in order to appear in separate lines, we wrap them in p elements.

Form Fields

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.

Tag Name Rendered Tag More Info
<input type=radio> Small Small
<input type=checkbox> Bacon Bacon
Your Age: <input type=number min="1" max="120"> Your Age:
<input type=range min="100" max="200">
<input type=date>
<input type=time>
<button>Click me</button>
<textarea> You can type here</textarea>
<select><option>Black <option>White </select>

The input element has many more types, which we are not listing here, consult W3Schools page for input to see the complete list. 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.

There are additional elements related to a form, that we saw in the example above, such as label and legend, who are used for accessibility, or fieldset to group together elements in a form. By default, the browser will draw a box around all the elements in a fieldset (as we saw in the unstyled form).

For more information on the form elements and all its fields, consult the W3Schools page on forms.

Useful attributes

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.

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. Important: Radio and checkbox input items should all have the same name, so that they are considered as related. (Our radio buttons on the pizza form were all named size.) Without the same name, radio buttons will not be mutually exclusive.
  • 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 we enter a value in the field or perform some selection. For example, <input value="Wellesley"> will show an initial value in the text field: , that can be overwritten by the user.

These two attributes can be used with every field element. In addition, some form fields may have attributes that are specific to them. For example, textarea needs two attributes rows and cols to specify the number of rows and columns for the text (a row corresponds to a line of text and a column to a character).

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

Another useful attribute for input is the 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 placeholder="Enter your name"> will be rendered like this: .

Event attributes

Whenever we interact with a page, we do that through the mouse or the keyboard. The operations we perform in these cases are known by the computer as events. Everything we do is considered an event: when we click on something, hover, move the mouse inside or outside a certain area, type a key on the keyboard, scroll the page, check a radio button, choose an item from a drop-down select element, input text in a field, change the value of a number field, etc.

When we act in this way, the browser is notified by the operating system of the computer (Mac OS or Windows) that an event of a certain kind happened. This notification is known as triggering an event or firing an event.

It is up to the programmer then to decide whether she wants her page (or application) to respond to such a trigger. Responding to the event triggering is known as handling the event, and the code that will do this is called an event handler. We will write event handlers with Javascript code.

In order to tell the browser which Javascript event handler to execute when an event is triggered, we have to connect the HTML elements with the event handlers. To do this, we need certain special HTML attributes, known as event attributes.

HTML supports a long list of events that can be triggered by mouse and keyboard actions as well as other inherent activities in the browser. W3Schools maintains a complete list of event attributes, so we will mention here only a few that are important and used very frequently.

  • The browser window (what is in the body tag): onload, onresize, etc.
  • Form events: onsubmit, onchange, onblur, etc.
  • Keywboard events: onkeydown, onkeypress, onkeyup.
  • Mouse events: onclick, onmouseover, onmouseout, etc.
  • Mediaevents: onplay, onpause, onvolumechange, etc.

In the near future, we will talk about event handlers and how to register them with an event, using the event attributes.