ECA 228 Internet/Intranet Design I Forms

ECA 228 Internet/Intranet Design I 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 Forms forms will not be much use unless you provide a way to process the user’s information – cgi – other scripting languages send save to database write cookie – mailto – form processing service

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

ECA 228 Internet/Intranet Design I 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 … rest of form elements …

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

ECA 228 Internet/Intranet Design I 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& =

ECA 228 Internet/Intranet Design I attributes cont … action – indicates how the user input is to be processed cgi other scripting language mailto form processing service

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

ECA 228 Internet/Intranet Design I form elements text boxsubmit passwordreset checkboxhidden radioimage selectbutton textareafile many form elements are defined as an attribute inside the tag

ECA 228 Internet/Intranet Design I text required attributes – type – name optional attributes – size – maxlength – value

ECA 228 Internet/Intranet Design I password required attributes – type – name optional attributes – size – maxlength – value

ECA 228 Internet/Intranet Design I radio required attributes – type – name – value optional attributes – checked

ECA 228 Internet/Intranet Design I 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 radio cont … h

ECA 228 Internet/Intranet Design I checkbox required attributes – type – name – value optional attributes – checked

ECA 228 Internet/Intranet Design I 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 checkbox cont … h

ECA 228 Internet/Intranet Design I tagset creates a drop down menu required attributes – name optional attributes – size – multiple – selected

ECA 228 Internet/Intranet Design I cont … tag is placed between tagset required attributes of – value Golden Retriever Border Collie German Shepherd Standard Poodle Papillon

ECA 228 Internet/Intranet Design I cont … To change the drop down menu to a list box use the size attribute Golden Retriever Border Collie German Shepherd Standard Poodle Papillon

ECA 228 Internet/Intranet Design I cont … To allow more than one choice use the multiple attribute Golden Retriever Border Collie German Shepherd Standard Poodle Papillon

ECA 228 Internet/Intranet Design I cont … To pre-select an option use the selected attribute Golden Retriever Border Collie German Shepherd Standard Poodle Papillon

ECA 228 Internet/Intranet Design I cont … To group menu items use the tagset with the label attribute Golden Retriever Border Collie German Shepherd Standard Poodle Papillon

ECA 228 Internet/Intranet Design I required attributes – name – rows – cols Please write your comments here

ECA 228 Internet/Intranet Design I submit required attributes – type optional attributes – value

ECA 228 Internet/Intranet Design I reset required attributes – type optional attributes – value

ECA 228 Internet/Intranet Design I image required attributes – type – src – width – height – alt

ECA 228 Internet/Intranet Design I hidden required attributes – type – name – value

ECA 228 Internet/Intranet Design I button required attributes – type – name – value

ECA 228 Internet/Intranet Design I file required attributes – type – name additional attributes – size in tag must use enctype = “multipart/form-data” as attribute

ECA 228 Internet/Intranet Design I organizing form elements to separate a form into smaller organized units use the tagset optional tagset provides textual label Personal Information Last Name: First Name: Address: City: : State: