Quick Reference: Forms

HTML forms enable you to add interactivity to your page. With a form you can create surveys, guestbooks, e-mail pages, order forms, and so on. The basic form elements and attributes are included in the following table. Because form construction and design can be very involved, you might want to sketch out your form on paper before trying to build it. If you do have problems or receive an error message, re-read the ReadMe file that came with the CGI script or contact your server’s tech support. Generally the problem is simple and can be solved without much difficulty.

To Do This

Use This

Create a form

<form> </form>

Tell the browser how to handle the content

<form method=“post”> (or “get”)

Tell the browser what to do with the content

<form action=“ “> </form> (You can use the mailto: protocol or refer to a CGI script)

Create an email form with the mailto: protocol

<form method=“post”
action=“mailto:me@myemail.com”> </form>

Create an input field

<input />

Add a unique id to an input field

<input id=“unique-id” />
Remember: IDs are like fingerprints; no two should be alike

Specify a value for an input field

<input value=“xxxxx” />

Choose the order in which fields may be tabbed through.

<input tabindex=“1” />
(Numeric value indicates the order in which a user can tab through fields)

Use an image for a button

<input type=“image” src=“image.gif” />

Create a custom button

<input type=“button” value=“button-text” />

Create a button with the <button> element

<button value=“button-text”> </button>
Note: This element generally requires a script to assign it a function

Create an image button with the <button> element

<button value=“button”><img src=“image.gif” /></button>

Create a Submit button

<input type=“submit” />

Create a Reset button

<input type=“reset” />

Create a radio button

<input type=“radio” />

Pre-select a button

<input type=“radio” checked=“checked” />

Create a check box

<input type=“checkbox” />

Create a hidden field

<input type=“hidden” />

Create a password field

<input type=“password” />

Create a pull-down menu

<select> </select>

Allow multiple choices in a pull-down menu

<select multiple=“multiple”> </select>

Add menu options

<option> </option>

Preselect an option

<option selected=“selected”>
This is preselected</option>

Add a text input area

<textarea rows=“#” cols=“#”> </textarea>

Code for Project 22

Creating forms can be a rather complex task. If you’re having difficulty getting your form to match the illustration for Project 22, the complete XHTML code for the project is reproduced here. Compare your code to the following to see if you can track down the problem:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Sample Survey</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7" /> </head> <body> <form action="mailto:my_e-mail@my_address.com" method="post"> <!-- Begin Name and Address Info --> <table border="1" style="text-align: center"> <tr> <td> <table> <tr> <td style="text-align: left"> First Name:</td> <td style="text-align:right"> <input type="text" size="15" maxlength="20" /></td> </tr> <tr> <td style="text-align: left"> Last Name:</td> <td style="text-align:right"> <input type="text" size="15" maxlength="20" /></td> </tr> <tr> <td style="text-align: left">City:</td> <td style="text-align: right"> <input type="text" size="15" maxlength="20" /></td> </tr> <tr> <td style="text-align: left">State:</td> <td style="text-align: right"> <input type="text" size="2" /></td> </tr> <tr> <td style="text-align: left"> Country:</td> <td style="text-align: right"> <input type="text" size="15" maxlength="20" /></td> </tr> </table> </td> <!-- Begin Age Fields --> <td><p style="font-size: 1.1em;"> Your age (choose one):</p> 13-18 <input type="radio" name="age" value="13-18" /><br /> 19-30 <input type="radio" name="age" value="19-30" /><br /> 31-40 <input type="radio" name="age" value="31-40" checked="checked" /><br /> 41-50 <input type="radio" name="age" value="41-50" /><br /> 51-60 <input type="radio" name="age" value="51-60" /><br /> 61-99 <input type="radio" name="age" value="61-99" /> </td> <!-- Begin Fiction Preferences --> <td style="text-align: left"> <p>Fiction Preferences</p> <input type="checkbox" value="historical" />Historical<br /> <input type="checkbox" value="literary" />Literary<br /> <input type="checkbox" value="mystery" />Mystery<br /> <input type="checkbox" value="romance" />Romance<br /> <input type="checkbox" value="thriller" />Suspense/Thriller<br /> <input type="checkbox" value="western" />Western<br /> <input type="checkbox" value="horror" />Horror<br /> </td> </tr> <!-- Begin M-F Menu --> <tr> <td><p>Your gender:</p> <select > <option value="male" >Male</option> <option value="female" >Female</option> </select> </td> <!-- Begin Bookstore Preferences --> <td> <p>Bookstore Preferences</p> <select multiple="multiple" size="5"> <option value="amazon">Amazon.com</option> <option value="bncom">bn.com</option> <option value="bn">Barnes and Noble</option> <option value="borders">Borders</option> <option value="halfcom">half.com</option> <option value="hastings">Hastings Entertainment</option> <option value="walden">waldenbooks</option> <option value="hpbooks">Half Price Books</option> <option value="powells">Powells Books</option> </select> <p>For multiple selections, hold down the Control key while clicking.</p> </td> <td> <input type="submit" /><br /> <input type="reset" /><br /> </td> </tr> </table> </form> </body> </html>

How to Do Everything with HTML & XHTML
How to Do Everything with HTML & XHTML
ISBN: 0072231297
EAN: 2147483647
Year: 2003
Pages: 126

Similar book on Amazon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net