Eca 228 internet intranet design i
This presentation is the property of its rightful owner.
Sponsored Links
1 / 32

ECA 228 Internet/Intranet Design I PowerPoint PPT Presentation


  • 60 Views
  • Uploaded on
  • Presentation posted in: General

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

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Eca 228 internet intranet design i

ECA 228 Internet/Intranet Design I

Forms


Forms

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


Forms1

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


Form form

<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


Form attributes

<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


Form attributes cont

<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


Form attributes cont1

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

ECA 228 Internet/Intranet Design I


Form attributes cont2

<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:[email protected] >

ECA 228 Internet/Intranet Design I


Form attributes cont3

<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:[email protected] enctype=“text/plain” >

ECA 228 Internet/Intranet Design I


Form elements

form elements

  • many form elements are defined as an attribute inside the <input> tag

ECA 228 Internet/Intranet Design I


Eca 228 internet intranet design i

text

  • required attributes

    • type

    • name

  • optional attributes

    • size

    • maxlength

    • value

<input type=”text” name=”lastName” size=”20” />

ECA 228 Internet/Intranet Design I


Password

password

  • required attributes

    • type

    • name

  • optional attributes

    • size

    • maxlength

    • value

<Input type=”password” name=”pwd” size=”20” />

ECA 228 Internet/Intranet Design I


Radio

radio

  • required attributes

    • type

    • name

    • value

  • optional attributes

    • checked

<input type=”radio” name=”dog_breed” value=“Golden Retriever” />

ECA 228 Internet/Intranet Design I


Radio cont

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 cont1

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


Checkbox

checkbox

  • required attributes

    • type

    • name

    • value

  • optional attributes

    • checked

<input type=”checkbox” name=”dog_breed” value=“Golden Retriever” />

ECA 228 Internet/Intranet Design I


Checkbox cont

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 cont1

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


Select select

<select> </select>

  • <select> tagset creates a drop down menu

  • required attributes

    • name

  • optional attributes

    • size

    • multiple

    • selected

ECA 228 Internet/Intranet Design I


Select select cont

<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


Select select cont1

<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


Select select cont2

<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


Select select cont3

<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


Select select cont4

<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


Textarea textarea

<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


Submit

submit

  • required attributes

    • type

  • optional attributes

    • value

<input type=”submit” value=”Submit Me” />

ECA 228 Internet/Intranet Design I


Reset

reset

  • required attributes

    • type

  • optional attributes

    • value

<input type=”reset” value=”Reset Me” />

ECA 228 Internet/Intranet Design I


Image

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


Hidden

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


Button

button

  • required attributes

    • type

    • name

    • value

<input type=”button” name=”button1” value=“Click here to do something” />

ECA 228 Internet/Intranet Design I


Eca 228 internet intranet design i

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


Organizing form elements

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


  • Login