2. Today Presentation on Forms Using Dreamweaver Creating a Form Using Dreamweaver. Practice Form
3. 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.
4. Forms – What happens when submitted? Server -> Web Application Name = John Doe Email = J.Doe@xyz.com
5. 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>
6. Form Attributes Action – provides the location of the script used to process the form information on the server. <formaction="/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.
7. 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 Doe Email = J.Doe@xyz.com After browser encodes Name="John%20Doe&email=J.Doe%40xyz.com
8.
9. 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.
10. 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>
11. Forms –Fieldset and Lengend Used to create a logical group of form controls. May also include a legend element that provides a caption.
12. 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>
13. 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" />
14. 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>
15. Forms –Input and Reset buttons <input type="submit" /> <input type="reset" /> <input type="submit" /> <input type="reset" value="start over />
21. 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>
22. 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.
