form tagHTML 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.
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.
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.
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.
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.
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.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: .
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.
onload, onresize, etc.onsubmit, onchange, onblur, etc.onkeydown, onkeypress, onkeyup.onclick, onmouseover, onmouseout, etc.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.