1 / 35

WeB FORMS

WeB FORMS. ART340. WHAT IS AN HTML FORM?. On the web, a form makes it possible for users to pass data to a server . HTML forms provides a set of controls that make it possible to collect information from visitors. What are some different types of forms?. Examples. Making a Purchase

wyman
Download Presentation

WeB FORMS

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. WeB FORMS ART340

  2. WHAT IS AN HTML FORM? On the web, a form makes it possible for users to pass data to a server. HTML forms provides a set of controls that make it possible to collect information from visitors. What are some different types of forms?

  3. Examples • Making a Purchase • Signing up for a Mailing List • Requesting Product Information • Contact Form • Donation Form • Search Boxes • Online Shopping Interfaces

  4. How Forms Work • Browser reads your markup and renders form control elements on page. • Users enter info into fields and click • Browser collects info and encodes it. • Browsers sends it to the processor on the server. • Processor accepts info and processes it (however it was written to do so). • The web application returns a response and sends it back to the browser where it is displayed. Simply, data is entered, collected, processed, and then a response is displayed. Submit

  5. Form Components

  6. The Steps of a Transaction

  7. The <form> Tag <form>Where the magic happens.</form> • A container for all form content. • May also contain block-level elements (<p>). • May not contain another form. • In order for the form to actually do something, attributes, such as action and method, must be set.

  8. The action attribute • Describes the processing page, location (URL) of the application or script. • In the text, you used a .php page to process. • PHP is an open source scripting language most commonly used with the Apache Web Server. • Most of the time, you will work with a web developer or server administrator who will provide the name and location of the program.

  9. The method attribute • Specifies how the info should be sent to the server. • Two methods: • POST – Send a separate server request. • Only server sees data. Good for private info. • No character limit. • GET – Encoded data gets added to the URL sent to the server. • Good for bookmarking form data, such as search results. • Not good for private information. • 256 character limit.

  10. FORM CONTROLS A form element, or control, allows users to enter info or choose options. (entry fields, buttons, menus, etc.)

  11. Controls for Adding Text • Text Input: Single line of text (i.e.. email, name) • Password Input: Single line of masked text • Textarea: Multi-line of text (i.e.. messages, comments)

  12. Text Input First name: <inputtype="text“ name="firstname"> <br>Last name: <input type="text" name="lastname">

  13. Password Input First name: <inputtype="text“ name="firstname"> <br>Last name: <input type="text" name="lastname">

  14. Textarea

  15. Controls for Making Choices • Radio buttons: One selection must be made. • Checkboxes: Multiple selections can be made. • Drop-down boxes: One selection must be made from a list.

  16. Radio Buttons First name: <inputtype="text“ name="firstname"> <br>Last name: <input type="text" name="lastname">

  17. Checkboxes First name: <inputtype="text“ name="firstname"> <br>Last name: <input type="text" name="lastname">

  18. Drop-down Boxes

  19. Controls for Submitting • Submit button: Submits data from your form to another page on the server. • Image button: Same as above, but replaces button with an image. Submit

  20. Submit Button First name: <inputtype="text“ name="firstname"> <br>Last name: <input type="text" name="lastname">

  21. Image Button Submit First name: <inputtype="text“ name="firstname"> <br>Last name: <input type="text" name="lastname">

  22. LABELING FORM CONTROLS

  23. Why Use Labels? • Labels identify the purpose of each form control. • By using labels, the form is accessible to the visually impaired. • Some labels we will use include: • <label> • <fieldset> • <legend>

  24. The <label> Tag • Labels a form control. • One per form control. • Two ways to use: • Nested: Label wraps around the text description and the form control. • Separate (for): Label kept separate. Uses “for” attribute to indicate which form control it is labeling.

  25. Nested vs. Separate • Nested: Label wraps around the text description and the form control. • Separate (for): Label kept separate. Uses “for” attribute to indicate which form control it is labeling. <label> Age: <input type=“text” name=“age” /></label> <label for=”year”> Age: </label> <input type=“text” name=“age” id=“year" />

  26. The <fieldset> Tag • Groups form elements together. • Helpful with longer forms. • Most browsers show a line around the edge of the fieldset. Can be adjusted using CSS. <fieldset>Wraps around grouped form elements.</fieldset>

  27. The <legend> Tag • Comes directly after the opening of the <fieldset> tag. • Contains a caption which identifies the purposes of that control group. <fieldset> <legend>My Radio buttons</legend> </fieldset>

  28. SENDING INFORMATION

  29. Name/Value • If forms collect data, how is it sent to the server? • All information is sent in name/value pairs. • The name attribute names the control. • Data entered/selected by the user, is the value. • All form control elements (except Submit and Reset) must include a name so that the form processor can sort the info. • Tip: You should never change the name of a form control unless you are certain the server code will understand it.

  30. Name/Value Example In this example, the nameis “comment” and the value is “Would you like to comment?”: <textarea name =“comment”>Would you like to comment?</textarea>

  31. Spry Form Validation • Form validation ensures that users have filled in the form control correctly. • Messages can be provided to users to assist them in filling out the necessary content.

  32. Browser Defaults

  33. Simple Contact Form HTML Place on page and modify as needed: <form action="mail.php" method="post">       <fieldset>       <legend>Contact</legend>       <p><label for="name">Name: </label>       <input type="text" name="name" id="name" /></p>       <p><label for="email">Email:</label>       <input type="text" name="email" id="email" /></p>       <p><label for="comments">Comments:</label><br />       <textarea id="comments" name="message" cols="" rows="">Enter your comments...</textarea></p>       <p><input type="submit" value="Submit"/></p>       </fieldset>     </form>

  34. Simple Contact Form PHP Create mail.php and copy and paste the following PHP before the <DOCTYPE>: Name: "mail.php" <?php $name = $_POST['name']; $email = $_POST['email']; $message = $_POST['message']; $formcontent="From: $name \n Message: $message"; $recipient = "cass54321@comcast.net"; $subject = "Contact Form"; $mailheader = "From: $email \r\n"; mail($recipient, $subject, $formcontent, $mailheader) or die("Error!"); echo "Thank You!"; ?>

  35. References Duckett, Jon. HTML & CSS: Design and Build Websites. Indianapolis, IN : Chichester: Wiley, 2011. Print. “HTML Forms and Input.“ W3CSchools.com. Web. 24 Nov 2012.<http://www.w3schools.com/html/html_forms.asp>. Niederst Robbins, Jennifer. Learning Web Design: A Beginner's Guide to (X)HTML, Style Sheets and Web Graphics. 3rd ed. Beijing ; Sebastopol, CA: O'Reilly, 2007. Print.

More Related