1 / 32

ECA 228 Internet/Intranet Design I

ECA 228 Internet/Intranet Design I. Forms. Forms. forms are a way for a user to communicate with you text fields radio button checkboxes drop down menus buttons. Forms. forms will not be much use unless you provide a way to process the user’s information cgi other scripting languages

blake
Download Presentation

ECA 228 Internet/Intranet Design I

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. ECA 228 Internet/Intranet Design I Forms

  2. Forms • forms are a way for a user to communicate with you • text fields • radio button • checkboxes • drop down menus • buttons ECA 228 Internet/Intranet Design I

  3. Forms • forms will not be much use unless you provide a way to process the user’s information • cgi • other scripting languages • send email • save to database • write cookie • mailto • form processing service ECA 228 Internet/Intranet Design I

  4. <form> </form> • to create a form use the <form> tagset • all other parts of a form are placed inside the <form> tagset • Attributes: • name • method • action • enctype ECA 228 Internet/Intranet Design I

  5. <form> attributes • name • gives a unique id to the form • if your page contains more than one form, give each a unique name • every form element will be given a unique name • DO NOT use spaces in the name <form name=“myForm” > … rest of form elements … </form> ECA 228 Internet/Intranet Design I

  6. <form> attributes cont … • method • tells browser how to send the user’s data • get • appends data to URL • limits the amount of data that can be sent • post <form name=“myForm” method=“get” > ECA 228 Internet/Intranet Design I

  7. <form> attributes cont … • method • what the user types into a form element is paired with the name we give the element • when the form is submitted, the data is sent as name/value pairs firstName=Bubba&lastName=LeTourneaux&email=bubba@bubba.net ECA 228 Internet/Intranet Design I

  8. <form> attributes cont … • action • indicates how the user input is to be processed • cgi • other scripting language • mailto • form processing service <form name=“myForm” method=“get” action= “mailto:bubba@bubba.net” > ECA 228 Internet/Intranet Design I

  9. <form> attributes cont … • enctype • indicates how the data being sent is to be formatted • if you are using mailto: as the action, set the enctype to “text/plain” • if you are using a script to process the form, do not use the enctype attribute <form name=“myForm” method=“get” action= mailto:bubba@bubba.net enctype=“text/plain” > ECA 228 Internet/Intranet Design I

  10. form elements • many form elements are defined as an attribute inside the <input> tag ECA 228 Internet/Intranet Design I

  11. text • required attributes • type • name • optional attributes • size • maxlength • value <input type=”text” name=”lastName” size=”20” /> ECA 228 Internet/Intranet Design I

  12. password • required attributes • type • name • optional attributes • size • maxlength • value <Input type=”password” name=”pwd” size=”20” /> ECA 228 Internet/Intranet Design I

  13. radio • required attributes • type • name • value • optional attributes • checked <input type=”radio” name=”dog_breed” value=“Golden Retriever” /> ECA 228 Internet/Intranet Design I

  14. radio cont … • give the same name to groups of related radio buttons • change the value in groups of related radio buttons • radio buttons allow only one choice per set ECA 228 Internet/Intranet Design I

  15. radio cont … • h <input type=”radio” name=”dog_breed” value=“Golden Retriever” /> <input type=” radio” name=”dog_breed” value=“Border Collie” /> <input type=” radio” name=”dog_breed” value=“GSD” /> <input type=” radio” name=”dog_breed” value=“Papillon” /> <input type=” radio” name=”dog_breed” value=“Standard Poodle” /> <input type=” radio” name=”horse_breed” value=“Mustang” /> <input type=” radio” name=”horse_breed” value=“Palomino” /> <input type=” radio” name=”horse_breed” value=“Appaloosa” /> ECA 228 Internet/Intranet Design I

  16. checkbox • required attributes • type • name • value • optional attributes • checked <input type=”checkbox” name=”dog_breed” value=“Golden Retriever” /> ECA 228 Internet/Intranet Design I

  17. checkbox cont … • give the same name to groups of related checkboxes • change the value in groups of related checkboxes • checkboxes allow more than one choice per set ECA 228 Internet/Intranet Design I

  18. checkbox cont … • h <input type=”checkbox” name=”dog_breed” value=“Golden Retriever” /> <input type=”checkbox” name=”dog_breed” value=“Border Collie” /> <input type=”checkbox” name=”dog_breed” value=“GSD” /> <input type=”checkbox” name=”dog_breed” value=“Standard Poodle” /> <input type=”checkbox” name=”dog_breed” value=“Papillon” /> <input type=”checkbox” name=”horse_breed” value=“Mustang” /> <input type=”checkbox” name=”horse_breed” value=“Palomino” /> <input type=”checkbox” name=”horse_breed” value=“Appaloosa” /> ECA 228 Internet/Intranet Design I

  19. <select> </select> • <select> tagset creates a drop down menu • required attributes • name • optional attributes • size • multiple • selected ECA 228 Internet/Intranet Design I

  20. <select> </select> cont … • <option> tag is placed between <select> tagset • required attributes of <option> • value <select name = “dog_breeds”> <option value = “Golden Retriever”>Golden Retriever</option> <option value = “Border Collie”>Border Collie</option> <option value = “GSD”>German Shepherd</option> <option value = “Standard Poodle”>Standard Poodle</option> <option value = “Papillon”>Papillon</option></select> ECA 228 Internet/Intranet Design I

  21. <select> </select> cont … • To change the drop down menu to a list box use the size attribute <select name = “dog_breeds” size=“5”> <option value = “Golden Retriever”>Golden Retriever</option> <option value = “Border Collie”>Border Collie</option> <option value = “GSD”>German Shepherd</option> <option value = “Standard Poodle”>Standard Poodle</option> <option value = “Papillon”>Papillon</option></select> ECA 228 Internet/Intranet Design I

  22. <select> </select> cont … • To allow more than one choice use the multiple attribute <select name = “dog_breeds” multiple=“multiple”> <option value = “Golden Retriever”>Golden Retriever</option> <option value = “Border Collie”>Border Collie</option> <option value = “GSD”>German Shepherd</option> <option value = “Standard Poodle”>Standard Poodle</option> <option value = “Papillon”>Papillon</option></select> ECA 228 Internet/Intranet Design I

  23. <select> </select> cont … • To pre-select an option use the selected attribute <select name = “dog_breeds”> <option value = “Golden Retriever”>Golden Retriever</option> <option value = “Border Collie”>Border Collie</option> <option value = “GSD”>German Shepherd</option> <option value = “Standard Poodle”>Standard Poodle</option> <option value = “Papillon” selected=“selected”>Papillon</option></select> ECA 228 Internet/Intranet Design I

  24. <select> </select> cont … • To group menu items use the <optgroup> tagset with the label attribute <select name = “dog_breeds”> <optgroup label = “Big Dogs” > <option value = “Golden Retriever”>Golden Retriever</option> <option value = “Border Collie”>Border Collie</option> <option value = “GSD”>German Shepherd</option> <option value = “Standard Poodle”>Standard Poodle</option> </optgroup> <option value = “Papillon”>Papillon</option></select> ECA 228 Internet/Intranet Design I

  25. <textarea> </textarea> • required attributes • name • rows • cols <textarea name=“comments” rows=“5” cols=“25” > Please write your comments here </textarea> ECA 228 Internet/Intranet Design I

  26. submit • required attributes • type • optional attributes • value <input type=”submit” value=”Submit Me” /> ECA 228 Internet/Intranet Design I

  27. reset • required attributes • type • optional attributes • value <input type=”reset” value=”Reset Me” /> ECA 228 Internet/Intranet Design I

  28. image • required attributes • type • src • width • height • alt <input type=”image” src=”myButton.gif” width=”50” height=”30” alt=”Submit image”> ECA 228 Internet/Intranet Design I

  29. hidden • required attributes • type • name • value <input type=”hidden” name=”subject” value=“Survey” /><input type=”hidden” name=”redirect” value=“pg3.html” /> ECA 228 Internet/Intranet Design I

  30. button • required attributes • type • name • value <input type=”button” name=”button1” value=“Click here to do something” /> ECA 228 Internet/Intranet Design I

  31. file • required attributes • type • name • additional attributes • size • in <form> tag must use enctype = “multipart/form-data” as attribute <input type=”file” name=”uploaded_file” /> ECA 228 Internet/Intranet Design I

  32. organizing form elements • to separate a form into smaller organized units use the <fieldset> tagset • optional <legend> tagset provides textual label <fieldset> <legend align=“right”>Personal Information</legend> Last Name: <input type=”text” name=”lastName” /><br /> First Name: <input type=”text” name=”firstName” /><br /> Address: <input type=”text” name=”address” /><br /> City: : <input type=”text” name=”city” /><br /> State: <input type=”text” name=”state” /><br /> </fieldset> ECA 228 Internet/Intranet Design I

More Related