forms 2010
DESCRIPTION
TRANSCRIPT
FORMSHow to create a form using HTML
TODAY
Presentation on Forms Using Dreamweaver Creating a Form Using Dreamweaver. Practice Form
FORMS
Made of buttons, text fields, pull-down menus collectively called form controls. Used to collect information from the user.
Application or script on the server that processes the information collected by the form.
FORMS – WHAT HAPPENS WHEN SUBMITTED?
Name = John DoeEmail = [email protected]
Server -> Web Application
FORM ELEMENT Container for all the form's content and controls.
<form action="/cig-bin/mailinglist.pl" method="post"> <ol> <li><label>Name:<input type="text" name="name" id="name" /> </label></li> <li><label>Email: <input type="text" name="email" id="email" /> </label></li>" <li><label>Click to Submit: <input type="submit" name="Submit" id="Submit" value="Submit" /> </label></li> </ol>
</form>
FORM ATTRIBUTES
Action – provides the location of the script used to process the form information on the server.
<form action="/cig-bin/mailinglist.pl" method="post" >
The .pl indicates the form is processed by a Perl script.
Frequently also .php (PHP program), .asp (Microsoft ASP "Active Server Pages"), .jsp (Java Server Pages), and other languages can be used.
FORM – METHOD ATTRIBUTE
<form action="/cig-bin/mailinglist.pl" method="post" >
Specifies how the information is sent to the server – either post or get.Name = John DoeEmail = [email protected]
After browser encodesName="John%20Doe&email=J.Doe%40xyz.com
FORM – METHOD ATTRIBUTE
<form action="/cig-bin/mailinglist.pl" method="post" >
Post – Only the server sees the content of the request. Best method for secure information.
Get – Not appropriate for forms with private or personal information. Has a limit of 256 characters.
With Get Data is added to the URL of the script: http://www.band.com/cgi-bin/mailinglist.pl?Name="John%20Doe&email=J.Doe%40xyz.com
FORM ID ATTRIBUTE
<form action="/cig-bin/mailinglist.pl" method="post" >
Identifies the form when there are multiple forms on the page.
FORM –NAME ATTRIBUTE
The name attribute identifies the variable name for the control.<li><label>Name:<input type="text" name="name" id="name" /></label></li>
Name=john%20doe Names for the controls must match with the
variables expected by the script.
FORMS –LABELS
The label element is used to associate the descriptive text with its associated form field. Important for speech-based browsers.
<li><label>Name:<input type="text" name="name" /></label></li>
Explicit Association -<li><label for="name">Name:<input type="text" name="name" id="name" /></label></li>
FORMS –FIELDSET AND LENGEND
Used to create a logical group of form controls. May also include a legend element that provides a caption.
FORMS –FIELDSET AND LENGEND
<fieldset>
<legend>Mailing List Sign Up</legend> <ol> <li><label>Name:<input type="text" name="name" id="name" /></label></li><li><label>Email:<input type="text" name="email" id="email" /></label></li> <li><label>Click to Submit: <input type="submit" name="Submit" id="Submit" value="Submit" /></label></li>
</ol>
</fieldset>
FORMS – TEXT ENTRY
<input type = "text" /> Additional Attributes:
Value – specifies the default text that appears in the field.
Size – default is 20 characters wide but you can choose the character width.
Maxlength – default is unlimited. You can choose a maximum number of characters that you want entered.
<input type="text" name="city" value="Winooski" size="25" maxlength="50" />
<input type="password" />
FORMS – MULTILINE TEXT ENTRY
<textarea>…</textarea> Use when you want your users to be able to
enter more than one line of text.
<textarea name="comment" rows="5" cols="100">Enter your comment in 50 words or less. </textarea>
FORMS –INPUT AND RESET BUTTONS
<input type="submit" /> <input type="reset" />
<input type="submit" /> <input type="reset" value="start over />
FORMS –RADIO AND CHECKBOX BUTTONS
FORMS –RADIO AND CHECKBOX BUTTONS
<fieldset>
<legend>How old are you?</legend>
<p>
<label> <input type="radio" name="age" value="under24" checked="checked"/> Under 24</label><br />
<label><input type="radio" name="age" value="25-34"/>25 to 34</label> <br />
<label><input type="radio" name="age" value="45+"/> Over 45</label> <br />
</p> </fieldset>
FORMS –RADIO AND CHECKBOX BUTTONS
FORMS –RADIO AND CHECKBOX BUTTONS
<fieldset>
<legend>What type of music to you listen to?</legend> <p>
<label> <input type="checkbox" name="genre" value="Indie" checked="checked" />Indie Rock</label> <br />
<label> <input type="checkbox" name="genre" value="Techno" />Techno</label> <br />
<label> <input type="checkbox" name="genre" value="Latin"/>Latin</label> <br /> </p>
</fieldset>
FORMS – MENUS
FORMS – MENUS
<fieldset>
<legend>Which is your favorite band?</legend>
<select name="band">
<option>Jackson Five</option>
<option>Commodores</option>
<option>Supremes</option>
</select>
</fieldset>
FORMS – MENUS
Use the attribute select="selected" in the option tag when you want a value pre-selected.
Use the attribute size="#" in the select element when you want a menu to display as a scrolling list.