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” |
| Create an input field | <form> |
| Add a unique id to an input field | <input id=“unique-id” /> |
| Specify a value for an input field | <input value=“xxxxx” /> |
| Choose the order in which fields may be tabbed through. | <input tabindex=“1” /> |
| 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> |
| 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 | <select> |
| Preselect an option | <option selected=“selected”> |
| 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>
|
EAN: 2147483647
Pages: 126