1. HTML Forms
CSC 102 Lecture

2. Uses of Forms Gather data from user for processing
Script or other program responds to results
Form elements are controls for scripted page
Requires Javascript or similar skill
Form results packaged as
Smith has form r er we can use (more later) 1 2

3. Form Controls Text input (type in text)
Buttons (click to do something)
Checkboxes (yes/no options)
Radio Buttons (multiple choice)
Popup Menus (multiple choice)
Several other variants (password, textarea, file upload, hidden)

4. HTML for Forms Nearly all form elements use <input> tag
Must specify three attributes:
type of input
name of element
value of element
Examples:
<input type="text" name="favSong" value="">
<input type="checkbox" name="gift" value="yes">

5. HTML for Forms Nearly all form elements use <input> tag
Must specify three attributes:
type of input
name of element
value of element
Examples:
<input type="text" name="favSong" value="">
<input type="checkbox" name="gift" value="yes">

6. HTML for Forms Nearly all form elements use <input> tag
Must specify three attributes:
type of input
name of element
value of element
Examples:
<input type="text" name="favSong" value="">
<input type="checkbox" name="gift" value="yes">

7. HTML for Forms Nearly all form elements use <input> tag
Must specify three attributes:
type of input
name of element
value of element
Examples:
<input type="text" name="favSong" value="">
<input type="checkbox" name="gift" value="yes">

8. HTML for Forms (2) Exceptions are buttons & popup menus
<button type= "submit" name= "S" value="S">Button</button>
<select name= "popup">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
Note: underlined text is your choice

9. Labels For accessibility & clarity, forms need labels Example:
<label> tag tells browser where label applies
Needs a for attribute matching name of an input
Example:
<input type="text" name="favSong" value="">
<label for="favSong">Favorite song</label>
Form elements & labels may be put inside a table for neater formatting

10. Self-Test Find the errors in the HTML below. (in pairs)
Try to generate the form shown above
<form action="get" method="post">
<label>Name:</label>
<input type="text" name="fname" value="Jane Doe" /><br />
<input type="button" name="fmail" value="mailing" />
<label for="fmail">Add to mailing list</label><br />
<select name="fmember" value="membership">
<option>Individual</option>
<option>Family</option>
</select>
<label for="fmember">Type of membership</label><br />
<button type="submit">Register
</form>

11. Other variations may also be correct
Self-Test
Find the errors in the HTML below. (in pairs)
Try to generate the form shown above
<form action="process.html" method="post">
<label for="fname">Name:</label>
<input type="text" name="fname" value="Jane Doe" /><br />
<input type="checkbox" name="fmail" value="mailing" checked="checked" />
<label for="fmail">Add to mailing list</label><br />
<select name="fmember">
<option value="person">Individual</option>
<option value="family">Family</option>
</select>
<label for="fmember">Type of membership</label><br />
<button type="submit">Register</button>
</form>
Other variations may also be correct

12. Form Results A <form> tag surrounds inputs to report
Two required attributes:
action is URL of page to send results to
method may be get or post
Post sends form results to a program via common gateway interface (CGI) protocol
Get adds the form results to end of URL

13. Reporting Elements Elements don’t always report
Unnamed elements never report
A named text input always reports
Whatever was typed in the box
Value may be just an empty string
Buttons, radio buttons, checkboxes, and popup menus only report if selected
Value is set by value="val" attribute of tag
Radios & menus may start with no selection

14. Smith R er
Smith has a page that will take form data and send the results to you in an
Use the following for your <form> tag:
<form method="post" action="
Include the three tags below inside the form:
<input type="hidden" name="Form-Mailer-To” />
<input type="hidden" name="Form-Mailer-Name" value=" Subject" />
<input type="hidden" name="Form-Mailer-URL" value="
Fill in appropriate values for underlined items

15. Lab Activity