Forms
Forms In Action! ~ Junk Mail ~ Get Rich Quick ~ Get Rich Quick II
Guestbook ~ About Me Form ~ Arbor Cafe Survey
Forms allow the web user to:
- fill in data (user surveys, order forms)
- request information
- provide a search strategy (dialog boxes for web searching)
The information submitted is "translated" by a script or program (CGI - Common Gateway Interface) written in PERL, C++… or other languages that manipulate text/files. This information, via the CGI scripting, is sent to a server. The server end of the transmission is generally an electronic mailbox where the mailbox owner can respond to or analyze the data.
Forms are never nested! However, other tags can be nested within form tags.
XHTML Coding
Form tag do not specify the appearance or layout of the form itself - other HTML tags do that within the FORM tags. For example, to separate each line of the form use the <p> tag.
All forms must include three sections:
- start and end to form:
- <form>…</form>
- a method of gathering data from the user:
- input type (text, radio, checkbox)
- select option
- textarea
- button whereby the user can "send" the form:
- <input type="submit">
<form>…</form>
Opening tag will always contain 2 elements:
- METHOD
- specifies the method by which the browser will pass the form information to the server
- ACTION
- indicates the address of the program that will process the information submitted
- ask your Web server administrator what the CGI script address is for your server or locate a free form processor from the Web
- enctype allows the mailto form to be more readable in your email box
- Ex: <form method="post" action="mailto:llb5610@dcccd.edu" enctype="text/plain" >
Input Type: Text
Selections you offer the users:
- <input type="text" name="username" id="username" / >
- <input type="text" name="username" id="username" size="30" maxlength="40" / > Defines the sizing of the input box with length (size) and the number of characters the viewer can type in.
- <input type="text" name="username" id="username" size="30" maxlength="40" value="type your name here" / >This input box has text that appears inside the input box (value)
optional:
- size (default is 20 characters)
- maxlength (# of characters the form box will accept)
- value (text typed inside the box)
Input Type: Radio and Checkbox
Input, value, name are required.
- Radio allows only one possible answer
- Checkbox allows multiple answers
- Ex: <input type="radio" name="question" id="answer" value="answer">
- Ex: <input type="checkbox" name="question" id="answer" value="answer">
Selection Options
- Used to construct menus
- <select name="classes" id="classes">
<option value="math">math</option>
<option value="english"> english</option>
</select> - Drop-down
- limit user to one choice
- limit the amount of screen space taken up by the menu - only one item at a time is viewable from the select menu window.
- Scrolling
- viewer can select several items from the select menu window
- several items are viewable at the same time from the select menu window
- <option value> - used to display the text of each choice
Text Area (Large email type box)
- <textarea name="comments" id="comments" rows="6" cols="7"></textarea>
- Used for free text - the viewer can submit comments, questions, etc., in an email type box.
- You determine the height and width of the TEXTAREA box via attributes of rows and cols
Submit and Reset Buttons
Input type is required, value is optional.
Value allows you to determine what text will appear on the submit button. If you prefer to not use the value tag, the default "Submit Query" will be used.
- Ex: <input type="submit" value="send data">
- You can substitute an image for the standard submit button:
- Ex: <input type="image" scr="button.gif" alt="submit" height="10" width="20">
- You should include a reset button with the submit button:
Ex: <input type="reset" value="clear">
Labels
- labels allow you to add CSS and scripts to any of the form formats
- see the class examples to check out the coding for this!