HTML Forms CSC 102 Lecture Uses of Forms

HTML Forms CSC 102 Lecture

Uses of Forms 1. Gather data from user for processing 1 – Script or other program responds to results 2. Form elements are controls for scripted page – Requires Javascript or similar skill 3. Form results packaged as email – Smith has form remailer we can use (more later) 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="fav. Song" 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="fav. Song" 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="fav. Song" 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="fav. Song" 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="option 1">Option 1</option> <option value="option 2">Option 2</option> <option value="option 3">Option 3</option> </select> Note: underlined text is your choice

Labels • For accessibility & clarity, forms need labels – <label> tag tells browser where label applies – Needs a for attribute matching name of an input • Example: <input type="text" name="fav. Song" value=""> <label for="fav. Song">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" /> <input type="button" name="fmail" value="mailing" /> <label for="fmail">Add to mailing list</label> <select name="fmember" value="membership"> <option>Individual</option> <option>Family</option> </select> <label for="fmember">Type of membership</label> <button type="submit">Register </form>

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" /> <input type="checkbox" name="fmail" value="mailing" checked="checked" /> <label for="fmail">Add to mailing list</label> <select name="fmember"> <option value="person">Individual</option> <option value="family">Family</option> </select> <label for="fmember">Type of membership</label> <button type="submit">Register</button> Other variations </form> 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? inp 1=val 1; inp 2=val 2

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 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/~107 a-xx/somewhere. html"> • Fill in appropriate values for underlined items

Lab Activity