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 = J.Doe@xyz.com

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 = J.Doe@xyz.com

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.