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 (
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.
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
therefore, in order to appear in separate lines, we wrap them in
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
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 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
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
For more information on the
form elements and all its fields, consult
the W3Schools page on forms.
The two most important attributes that we will use very frequently are
size.) Without the same name, radio buttons will not be mutually exclusive.
valueattribute 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,
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
To control the width of the text input field, you don't use the attribute width, but the
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: .
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.
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.
In the near future, we will talk about event handlers and how to register them with an event, using the event attributes.