HTML: Forms (Part 1)

 

Forms

Forms offer a popular way for the creator of a page to communicate with someone viewing the page. To fully exploit the potential of forms, it is necessary to use a server-based technology like the Common Gateway Interface (CGI) or Active Server Pages (ASP). Here we are learning the basics of setting up different kinds of forms using HTML.

Each form begins with <FORM> and ends with </FORM>.

 

<INPUT> Tag

The <INPUT> tag is the workhorse tag within forms. The <INPUT> tag takes these attributes:

<INPUT> Attribute Purpose
TYPE = defines the <INPUT> element. TYPE can be TEXT, PASSWORD, CHECKBOX, HIDDEN, FILE, RADIO, BUTTON, SUBMIT, RESET or IMAGE.
NAME = names the element
VALUE = gives default content of element
CHECKED determines whether the element is initially checked (CHECKBOX and RADIO elements)
SIZE number of characters in TEXT box
MAXLENGTH number of characters accepted

 

Examples

Let's create a TEXT box and ask the viewer for his name. Here is (the key part of) the code to do this:

<form>

<p><b>What is your name?</b>

<input type=text name="yourName" value="" size=30><br>

</form>

 

The name of the TEXT box is "yourName," value is "" so the box will show up empty, and size=30 specifies that the box is 30 spaces wide.

to see this how this code looks in a window.

 

Since this is a music quiz, let's use another TEXT box to ask the viewer for her favorite band. Here is the code to do this, in addition to asking for her name:

 

<form>

<p><b>What is your name?</b>

<input type=text name="yourName" value="" size=30><br>

<p><b>What is your favorite band?</b>

<input type=text name="favoriteBand" value="" size=30><br>

</form>

 

to see this how this code looks in a window.

 

 

 

Another possible TYPE of <INPUT> tag is PASSWORD. For a PASSWORD box, as the user types, what is typed is kept hidden. Here is an example:

 

<form>

<p><b>Enter your password:</b>

<input type=password name="password" value=""><br>

</form>

 

to see this how this code (and the earlier code) works in a window.

 

 

 

A third popular TYPE of <INPUT> tag is CHECKBOX. The user can check as many CHECKBOX's as he wants to. An optional CHECKED attribute specifies that the CHECKBOX initially shows up checked. Let's use CHECKBOX's to ask the user another question; here's the code:

 

<form>

<p><b>Which music formats do you use? (Check all that apply.)</b><br>

<input type=checkbox name="ownFormat0" value="Streaming" checked>Streaming

<input type=checkbox name="ownFormat1" value="MP3" checked>MP3

<input type=checkbox name="ownFormat2" value="CD">CD

<input type=checkbox name="ownFormat3" value="Tape">Tape

<input type=checkbox name="ownFormat4" value="Vinyl">Vinyl

<input type=checkbox name="ownFormat5" value="8-Track">8-Track

<input type=checkbox name="ownFormat6" value="Wax Cylinder">Wax Cylinder

<input type=checkbox name="ownFormat7" value="Other">Other

</form>

 

to see this how this code (and the earlier code) works in a window.

 

 

 

The final TYPE of <INPUT> tag that we'll consider here is RADIO. As opposed to the CHECKBOX, with the RADIO button the user can choose only one of the listed options. Also different, each RADIO button has the same name. The optional CHECKED attribute can be used. Let's use RADIO buttons to ask another question; here's the code:

 

<p><b>What is your favorite music format?</b><br>

<input type=radio checked name="musicFormat" value="Streaming">Streaming

<input type=radio name="musicFormat" value="MP3">MP3

<input type=radio name="musicFormat" value="CD">CD

<input type=radio name="musicFormat" value="Tape">Tape

<input type=radio name="musicFormat" value="Vinyl">Vinyl

<input type=radio name="musicFormat" value="8-Track">8-Track

<input type=radio name="musicFormat" value="Wax Cylinder">Wax Cylinder

<input type=radio name="musicFormat" value="Other">Other

 

to see this how this code (and the earlier code) works in a window.

 

 

 

Notes

A more careful layout of the form elements on this page could be done by putting them inside the cells of a table. The cells of a table are nicely aligned and thus so are the form elements.

As mentioned above, a full interaction between the viewer and the creators of a page requires the use of HTML forms and either CGI or ASP. Here at www.htmlgoodies.com/tutorials/forms/article.php/3479131 is an example of setting up a guestbook using forms and a CGI script.

 

Other Resources

Try these links on forms:


Page Link
Forms Tutorial www.htmlgoodies.com/tutorials/forms/article.php/3479121

or check out one of our reference books, or look for other help on the Web.

 

Exercise

Work on 1) your own web page, or 2) the eEverything.com site. Add a form to the page that includes a TEXT box, a PASSWORD box, at least four CHECKBOX's, and a series of at least four RADIO buttons.

If you are working on eEverything.com, the TEXT box is for the person's name, the PASSWORD is for her eEverything.com password, several CHECKBOXES are for her to indicate which payment methods (credit card, debit card, online banking, personal check) she likes to use, and the RADIO buttons are for her to indicate her level of shopping satisfaction on eEverything.com, from "I like this site" down to "I will not return to this site."