HTML Forms CSC 102 Lecture

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 email Smith has form remailer we can use (more later) 1 2

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)

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">

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">

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">

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">

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

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

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>

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

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 http://example.com/process.html?inp1=val1;inp2=val2

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

Smith Remailer Smith has a page that will take form data and send the results to you in an email Use the following for your <form> tag: <form method="post" action="http://www.smith.edu/form-mail.php"> Include the three tags below inside the form: <input type="hidden" name="Form-Mailer-To” value="auser@smith.edu" /> <input type="hidden" name="Form-Mailer-Name" value="Email Subject" /> <input type="hidden" name="Form-Mailer-URL" value="http://maven.smith.edu/~107a-xx/somewhere.html"> Fill in appropriate values for underlined items

Lab Activity