Download - Forms 2010
![Page 1: Forms 2010](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b87f964a795976368b45bd/html5/thumbnails/1.jpg)
FORMSHow to create a form using HTML
![Page 2: Forms 2010](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b87f964a795976368b45bd/html5/thumbnails/2.jpg)
TODAY
Presentation on Forms Using Dreamweaver Creating a Form Using Dreamweaver. Practice Form
![Page 3: Forms 2010](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b87f964a795976368b45bd/html5/thumbnails/3.jpg)
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.
![Page 4: Forms 2010](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b87f964a795976368b45bd/html5/thumbnails/4.jpg)
FORMS – WHAT HAPPENS WHEN SUBMITTED?
Name = John DoeEmail = [email protected]
Server -> Web Application
![Page 5: Forms 2010](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b87f964a795976368b45bd/html5/thumbnails/5.jpg)
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>
![Page 6: Forms 2010](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b87f964a795976368b45bd/html5/thumbnails/6.jpg)
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.
![Page 7: Forms 2010](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b87f964a795976368b45bd/html5/thumbnails/7.jpg)
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
![Page 8: Forms 2010](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b87f964a795976368b45bd/html5/thumbnails/8.jpg)
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
![Page 9: Forms 2010](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b87f964a795976368b45bd/html5/thumbnails/9.jpg)
FORM ID ATTRIBUTE
<form action="/cig-bin/mailinglist.pl" method="post" >
Identifies the form when there are multiple forms on the page.
![Page 10: Forms 2010](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b87f964a795976368b45bd/html5/thumbnails/10.jpg)
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.
![Page 11: Forms 2010](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b87f964a795976368b45bd/html5/thumbnails/11.jpg)
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>
![Page 12: Forms 2010](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b87f964a795976368b45bd/html5/thumbnails/12.jpg)
FORMS –FIELDSET AND LENGEND
Used to create a logical group of form controls. May also include a legend element that provides a caption.
![Page 13: Forms 2010](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b87f964a795976368b45bd/html5/thumbnails/13.jpg)
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>
![Page 14: Forms 2010](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b87f964a795976368b45bd/html5/thumbnails/14.jpg)
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" />
![Page 15: Forms 2010](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b87f964a795976368b45bd/html5/thumbnails/15.jpg)
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>
![Page 16: Forms 2010](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b87f964a795976368b45bd/html5/thumbnails/16.jpg)
FORMS –INPUT AND RESET BUTTONS
<input type="submit" /> <input type="reset" />
<input type="submit" /> <input type="reset" value="start over />
![Page 17: Forms 2010](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b87f964a795976368b45bd/html5/thumbnails/17.jpg)
FORMS –RADIO AND CHECKBOX BUTTONS
![Page 18: Forms 2010](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b87f964a795976368b45bd/html5/thumbnails/18.jpg)
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>
![Page 19: Forms 2010](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b87f964a795976368b45bd/html5/thumbnails/19.jpg)
FORMS –RADIO AND CHECKBOX BUTTONS
![Page 20: Forms 2010](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b87f964a795976368b45bd/html5/thumbnails/20.jpg)
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>
![Page 21: Forms 2010](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b87f964a795976368b45bd/html5/thumbnails/21.jpg)
FORMS – MENUS
![Page 22: Forms 2010](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b87f964a795976368b45bd/html5/thumbnails/22.jpg)
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>
![Page 23: Forms 2010](https://reader033.vdocuments.site/reader033/viewer/2022061219/54b87f964a795976368b45bd/html5/thumbnails/23.jpg)
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.