1 / 15
Télécharger la présentation

HTML Forms

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 email • Smith has form remailer 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 • <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. 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: • actionis URL of page to send results to • methodmay be getor 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

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

  15. Lab Activity

More Related