Web Publishing with HTML

Section Four

Return to Section Three


Forms

Forms on the WWW are one way in which someone may solicit input from the readers of their pages, and/or provide output in response to it.

For security reasons, Brown does not allow users to access their own programs (usually small scripts written in perl or php) from forms on their pages. However, we currently offer one very useful script which allows your page to collect information which is then emailed back to you, the page owner. This script is called form2mail.

A good primer on forms, and form2mail specifically, is available on the web. It's a good reference tool.

Overview of Syntax

A form is an element surrounded by <FORM> and </FORM> tags. The <FORM> element contains other elements that define the actual input boxes and fields that the form presents to the user, such as pull-down menus, checkboxes, radio buttons, and text fields. It also contains other input elements that are invisible to the user, but which send information back to the script that will process the submitted information.

A form always begins with a <FORM> tag. The tag takes an ACTION attribute, which for your needs will almost always be POST. What follows is the syntax you'll use when you're using the form2mail script:

<form method="post"
action="http://www.brown.edu/cgi-local/form2mail">


<input type="hidden" name="attr_mailto" value="First_Last@brown.edu">

The URL associated with the ACTION attribute (in this case, http://www.brown.edu/cgi-local/form2mail) tells the form where to find the script that is going to give it directions on how to handle the input. Form2mail mails this information back to you. Other scripts might tally up answers, prompt for more questions, etc.

The only thing you'll change in the lines you see here is the email address that the information will be sent to. The form2mail script has an attribute called mailto which takes the value of the email address that the information will be sent to (your email address).

If you find the fundamentals behind this confusing, you're not alone. And, you can still do forms. Just cut and paste the syntax above, and substitute your email address for First_Last, and you'll be all ready to add fields to your form.

Form Fields

There are several elements that can be fields in a form:

Each of these makes a different-looking input field on the form, and has attributes that indicate size, type of selection and default values. They are described individually below.

INPUT Fields


Each INPUT field will have several important attributes, some of which include TYPE, NAME, and VALUE, which may or may not be required in certain instances. These attributes do different things depending on what type of INPUT field you're using. TYPES of INPUT fields we'll discuss are radio buttons, checkboxes, blank lines for text input, and the SUBMIT button.

Radio Buttons

Radio buttons allow you to present a list of options to a user, and have them choose one of the options. Here's an example:

I believe the earth is flat.
yes
no
I don't know and I don't care

You'll notice that you can only choose one option at a time. If you want to choose more than one option, you'd be better off using a checkbox, discussed below. You may also note that once you've chosen an option, you can't make the dot disappear comple tely. You can choose a different option, but you can't choose NOT to choose something once you've clicked in one of the fields.

A series of TYPE="RADIO" elements with the same NAME attribute makes a list with a radio button in front of each option. When the form is submitted, the email will be returned to you with a line that says one of the following three things:

vote: yes
vote: no
vote: dunno

Radio Button Attributes

NAME
Required attribute. Gives the name of the field.
CHECKED
specifies which radio button is highlighted as a default, if any.
VALUE
specifies the value to be transmitted.

The following is the syntax you'd use to create the list of radio buttons shown, and remember, it has to be contained somewhere within <form> </form> tags:







<P>I believe the earth is flat.


      


<input type="radio" name="vote" value="yes">yes<br>


<input type="radio" name="vote" value="no"checked>no<br>


<input type="radio" name="vote" value="dunno">i don't know and i don't care<br>

Checkboxes

Checkboxes behave just like radio buttons, except that the choices are indicated with a check in a square box, rather than a dot in a circle, and the reader may select more than one option, or deselect an option. Here's an example:

What would you like for dinner?
hamburgers
hot dogs
salad

A series of TYPE="CHECKBOX" elements with the same NAME attribute makes a list with a checkbox in front of each option. When the form is submitted, if the user has chosen, say, "hamburgers" and "hot dogs", the email will be returned to you with a line that says:

dinner: hamburgers

dinner: hotdogs

Checkbox Attributes

NAME
Required attribute. Gives the name of the field.
CHECKED
specifies which checkbox is highlighted as a default, if any.
VALUE
specifies the value to be transmitted.

The following is the syntax you'd use to create the list of checkboxes shown, and remember, it has to be contained somewhere within <FORM> </FORM> tags: 
        


<P>What would you like for dinner?


        


<input type="checkbox" name="dinner" value="hamburgers">hamburgers<br>


<input type="checkbox" name="dinner" value="hotdogs">hot dogs<br>


<input type="checkbox" name="dinner" value="salad">salad<br>

When the form is submitted, the email will be returned to you with a line that says any or all of the following three things:

dinner: hamburgers
dinner: hotdogs
dinner: salad

One-line text input

An INPUT field of TYPE=TEXT allows the person visiting your page to put a word or string of characters into a field as a response.

Here's an example of a form using a one-line text field. This form will send the contents of the text field back to the server under the name "age".

What is your age?

One-line Text attributes

NAME
You must make up a name to give to the field. Required attribute.
SIZE
How long the field should be in characters. (Not required, but if you don't specify a number, it will default to being about 20 characters long)
VALUE
What the field should be set to initially. This value appears in the field and can be typed over. (This is NOT a required attribute, and is, in fact, not used often.)

Here is the syntax you'd need to get that field. Remember, it has to be contained somewhere within <FORM> </FORM> tags.

What is your age? 
<input type="text" size="10" name="age">

Block of Text (TEXTAREA)

The element <TEXTAREA> looks like <INPUT TYPE="TEXT">, except that it can contain multiple lines of text. It has a required NAME attribute, and two other attributes, COLS and ROWS, which specify width in characters and height in rows.

A text block might look like this:

If the <TEXTAREA> element contains text in your HTML file (in this case, the word "dog"), this is printed as the default text, and can be typed over. Note that text inside a TEXTAREA element behaves like preformatted text in that lines break exactly as written. Also note that while an INPUT field does not need a close tag, TEXTAREA does require a close tag.

The following is the syntax you'd use to create the text area shown, and remember, it has to be contained somewhere within <FORM> </FORM> tags:

<textarea name="pet" rows=4 cols=20>


<br>dog
</textarea>

Scrolling (Select) list

The <SELECT> element is used to create a scrolling list of items. In this case, you will use the word SELECT in place of the word INPUT. These lists contain an <OPTION> element for each item in the list. Like all elements that define input fields, it must have a NAME attribute.
What is your favorite New England state?

Notice that you need a </SELECT> at the end of your list of options.

Scrolling List attributes (for <OPTION> elements)

SELECTED
This is the item that is selected by default
VALUE
This is the information that will be returned in your email message.

Here's the syntax for the scrolling select list above, and remember, it has to be contained somewhere within <FORM> </FORM> tags:

What is your favorite New England state?


<select name="state">


<option value="me">Maine


<option value="ma">Massachusetts


<option value="nh">New hampshire


<option value="ri" selected>Rhode Island


<option value="vt">Vermont


<option value="ct">Connecticut


</select>

SUBMIT Button

SUBMIT is one of the simplest, yet most important parts of forms.

Technically, the SUBMIT button is just an input field. The only attribute you may want to change is the text that appears on the button. Shown above is default text, but you can change the VALUE attribute to whatever text you want to display. For examp le:



Here's the syntax for a SUBMIT button, and remember, it has to be contained somewhere within <FORM> </FORM> tags:

<input type="submit" value="button text goes here">


Using Forms at Brown

Brown provides one CGI script that makes use of forms. With this script, it is possible to create a form for a user to fill out, and then have the information sent to you as mail. The mail will contain each field name (the NAME attribute that you've assigned), paired with the data that was provided by the reader.

To use the form2mail script, you may copy the <FORM> start tag and the first <INPUT> element below exactly, subsituting your mail address for First_Last. After that, you can add any number and types of fields you wish, and end with < INPUT TYPE="submit">, and the </FORM> close tag.

<form method="post" action="http://www.brown.edu/cgi-local/form2mail">
        


<input type="hidden" name="attr_mailto" value="first_last@brown.edu">
        




Below is the customizable part of the form







type your name here:<input type="text" name="name">


<input type="hidden" name="attr_name" value="required">




<select name="opinion">


<option selected value="love">i love this page


<option value="hate">what an awful page


</select>


<input type="submit" value="send my vote">


</form>
What this particular form looks like:
Type your name here:


What it mails back

When SUBMIT is clicked, you will receive a mail message with information as follows:

        
        ** ELECTRONIC FEEDBACK FORM **


        


        Name:Bill Gates


        Opinion:love
For a full description of the parameters that this script supports, see the the Brown page on form2mail.

Tips and Tricks

Validating

We've talked a lot about defining the structure of your documents, and making sure that you use tags correctly so that you have valid HTML. But sometimes, of course, it's hard to know if your HTML is valid, especially when you're just starting out.

There are several HTML validators on the web that you can use to ensure that your page is valid. The most comprehensive validator on the web is run by the World Wide Web Consortium (W3C for short). When you go to that page, it will allow you to type in the URL of your page, and it will check the HTML for validity. Sometimes the messages that the validator returns can seem kind of cryptic, but the best thing to do is to go to the spot in your document that the validator "choked" on, and read it CAREFULLY for typos and the like.

FONT Element

The FONT element can be used to define any aspect of your written text. For the purpose of this class, we will discuss the two most commonly used attributes in the FONT element: COLOR and SIZE. Font elements are only recognized by newer browsers. Older browsers will ignore the FONT element.
Size
Any text that is not part of a heading can be made bigger or smaller by applying a SIZE attribute to a FONT element. For example, <FONT SIZE="10">Text goes here</FONT> will give you text that is 10 points larger than the default text.

When defining the size, you may specify a positive number, as is done above, or you can use the "-" character for a smaller font. Setting a FONT with the tag: <FONT SIZE="-1"> will make the text one point size smaller than the default text.

Note: the FONT tag should not replace a heading (H) tag, which is an important part of defining the structure of a page. H tags are used, for example, by search engines to define the relevant topics of a specific web page.

<FONT SIZE="10"></FONT> can represent a dropcap used by newspapers, journals, etc. to begin an article. For example, it would appear like this:

Computing and Information Services announces Learning On Line: HTML Course.

<FONT SIZE="-1"> would look like this:

Brown University - Computing and Information Services


Color
Just as with backgrounds and table cells, text can have a defined color. This is specified as an attribute in the FONT element: <FONT COLOR="red"></FONT>. Note: to define a color, you may use a hex code, or you may use the color of the word with more recent browsers (as described in section two of this course). Your colored text will then look like this:

Computing and Information Services announces Learning On Line: HTML Course.

When working with the FONT tag, remember that it must include an end tag (</FONT>). Also, one single FONT tag can include multiple attributes, i.e. <font size="10" color="red">.

BR Element

A useful "trick of the trade" is to add the attribute CLEAR=ALL to your BR tag to force subsequent material onto a new line, below any images, tables, etc. on the page. For example, if you have a table that is aligned to the left or right, and is followed by text, the text will wrap around the table. If you wish to start a new paragraph below the table, you may wish to use the tag <br clear=all> after the table. Here is how it looks without the tag:
See, here is my
plain old table
minding its own
business
And when I begin my text afterwards, it wraps, depending on the size of my window.
I put a plain BR tag here. Move the window around and see what happens to the text flow.
With the tag, it forces the text below on a new line:
See, here is my
plain old table
minding its own
business
And when I begin my text afterwards, it wraps, depending on the size of my window.
I put a CLEAR=ALL BR tag here. Move the window around and see what happens to the text flow.

Additional Attributes in Tables

Several of the attributes we have previously discussed for other tags can be used in tables. Additional attributes commonly used when coding tables are: ALIGN, and VALIGN.

ALIGN is the same attribute you previously used to align images. Similarly, you can align an entire table with the code: <table align="right">. This will move your entire table to the right of the screen:

See, I'm way over here!


You can also use the ALIGN attribute within the TD tag to horizontally align the text or image that is inside the cell. Here is an example:

See how the text is aligned to the right in this cell, and the code looks like this:
<td align=right>text here</td>		 This cell is aligned to center, and the code looks like this:
<td align=center>text here</td>		 And finally, this cell is aligned to the left, and the code looks like this:
<td align=left>text here</td>


VALIGN is most commonly used as an attribute in a cell, rather than defining the entire table. It's main use is to align text. VALIGN, as opposed to ALIGN, is used to vertically align text in a cell. This is important if you have two columns of text of differing length. Without the VALIGN defined, many browsers will automatically vertically align the text to the center and look like this:

Tinky Winky...
Dipsy...
Laa-Laa...
Po.		 Mike


You will need to use the code: <td valign="top"> to vertically align the second cell to match the first. Other VALIGN options are "middle" and "bottom". Here is how it looks with the cells vertically aligned to top:

Tinky Winky...
Dipsy...
Laa-Laa...
Po.		 Mike


Advanced Ordered Lists

You have already learned how to code lists. And, by now, you should understand how HTML language works using attributes within elements. Almost all elements can be customized and enhanced with the addition of attributes. We have discussed some commonly used attributes, yet there are still many more.

Following are examples of two atrtibutes used in ordered list elements: START and TYPE. These can be a nice trick when adding agendas and outlines in HTML.

START, when used in an ordered list, defines which number the list begins with. All lists start with "1" by default, when this attribute is not present. By using the START attribute (for example, <ol start="3">), you can start on any number, such as three:

  1. Wake up
  2. Brush teeth

STYLE is used in an ordered list to define what alphanumerics are used in numbering the list. This is especially useful to create outlines with roman numerals. Options for STYLE in an ordered list are: 1 (regular Arabic numerals), a (lowercase letters, beginning with a), A (uppercase letters, beginning with A), i (lowercase Roman numerals), and I (uppercase Roman numerals). So if you have the list above and want it to be numbered with lower case roman numerals, use the tag <ol start="3" type="i">:

  1. Wake up
  2. Brush teeth

Do not forget that lists always require end tags (</ol>).

End of Learning on Line / HTML

Learn about cascading style sheets (CSS).

Valid HTML 4.0!