Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML Foundations, pt 3: Forms


Published on

Published in: Design
  • Be the first to comment

HTML Foundations, pt 3: Forms

  1. 1. 22-3375 Web Design IFORMS
  2. 2. Student PresentationsPresent your initial ideas for your portfolioWalk us through the flow (homepage, detail, about)What types of work will you be showing?
  3. 3. What is a form?Forms provide an interface allowing users tointeract in some way with your site.Forms collect input via controls, such as buttons,text fields, or scrolling menus. Controls are placedon the page using special elements in the markup.These elements are merely an interface forcollecting information and do not actually possessthe data.from Web Design in a Nutshell by Jennifer Niederst Robbins
  4. 4. Form Types
  5. 5. There are three basic types of form controls, for: Adding TextMaking ChoicesSubmitting FormsUploading Files
  6. 6. Adding TextText InputPassword InputText Area
  7. 7. Making ChoicesRadio ButtonsCheckboxesDrop-downs
  8. 8. Submitting FormsSubmit ButtonsImage ButtonsButtons
  9. 9. Uploading FilesFile Upload
  10. 10. Form Syntax
  11. 11. <form></form>The <form> tag is used to create an HTML formfor user input.
  12. 12. <form> <input></form><input> elements are used within a <form>element to declare input controls that allow usersto input data.<input> is an inline, self-closing tag.An input field can vary in many ways, dependingon the type attribute.
  13. 13. <form> <input type=”text” name=”username”></form>The <input> tag should always have, at aminimum, a type and name attribute.The “type” attribute controls the form type (text,radio, dropdown, etc), and the “name” attribute ishow you identify the data when it is sent to theserver.
  14. 14. Input Attributes: typeYou create the different type of formelements through the “type” attribute.These include:text, password, radio, checkbox, select,file, submit, image, and hidden.
  15. 15. Input Attributes: typeFor example:<input type=”text”>would create this:
  16. 16. Input Attributes: nameYou then need to add a name so the datacan be identified by the server:<input type=”text” name=”username”>
  17. 17. Class Exercise Create a form for our tutorial: Text input (name)Dropdown (favorite color) Radio (human or robot) Text area (comment) Submit
  18. 18. Adding Text: ExamplesText Input
  19. 19. Adding Text: ExamplesText Input You can add additional attributes to your text inputs to control their width (size, in characters), and maxlength (in characthers). You can also control the width of the input field in your css (in pixels, % or ems).
  20. 20. Adding Text: ExamplesText Area Text areas are a bit different: they are not contained in an <input> tag, and they require a closing tag (<textarea></textarea>.
  21. 21. Making Choices: CheckboxesCheckboxes With checkboxes and radio buttons, the “name” attribute creates the grouping between the options. The “value” attribute tells the server which option the user selected. add a “checked” value if you want an option to be preselected.
  22. 22. Making Choices: Radio ButtonsRadio Buttons Use a radio button when the user can only select one option. Like checkboxes, add a “checked” value if you want an option to be preselected.
  23. 23. Making Choices: DropdownsDrop-downs Dropdowns are made up of two opening and closing tags: <select> and <option>. Whatever option appears at the top is the default, unless you add a “selected=”selected” attribute to the option tag.
  24. 24. Uploading FilesFile Upload
  25. 25. Submitting Forms: SubmitSubmit A simple <input type=”submit”> is the easiest way to add a submit button to your form. You can hook onto this element in css by using the pseudo selector input[type=submit].
  26. 26. Submitting Forms: ImageImage <input type=”image”> allows you to replace the standard submit button with an image of a submit button. This method is not recommended.
  27. 27. Submitting Forms: ButtonButton Inside a <button> element you can put content, like text or images. This is the difference between this element and buttons created with the <input> element.
  28. 28. EXAMPLE
  29. 29. Form Labels
  30. 30. <form>Your Name<br><input type=”text” name=”name”><br>Your Email<br><input type=”text” name=”email”><br><input type=”submit”></form>There are a few ways to add labels to your formelements. The simplest way is to just addunmarked up text with <br> elements.
  31. 31. <label for=”name”> Your Name<label><br><input type=”text” name=”name” id=”name”>Another way is to use the “label” element. It canwrap both the label and input, or stand outside ofthe input. You can style the label element in css.If you use this method, you should add a “for”attribute to the label that matches the id of theform element (not required, but good foraccessibility reasons).
  32. 32. <label>Your Name<br><input type=”text” name=”name”><label>You can also wrap the entire element in thelabel tag. Both used of the label tag give yourradio and checkboxes the added feature ofmaking the entire field clickable.
  33. 33. Form Design