22-3375 Web Design IFORMS
Student PresentationsPresent your initial ideas for your portfolioWalk us through the flow (homepage, detail, about)What t...
What is a form?Forms provide an interface allowing users tointeract in some way with your site.Forms collect input via con...
Form Types
There are three basic types    of form controls, for:   Adding TextMaking ChoicesSubmitting FormsUploading Files
Adding TextText InputPassword InputText Area
Making ChoicesRadio ButtonsCheckboxesDrop-downs
Submitting FormsSubmit ButtonsImage ButtonsButtons
Uploading FilesFile Upload
Form Syntax
<form></form>The <form> tag is used to create an HTML formfor user input.
<form> <input></form><input> elements are used within a <form>element to declare input controls that allow usersto input d...
<form> <input type=”text” name=”username”></form>The <input> tag should always have, at aminimum, a type and name attribut...
Input Attributes: typeYou create the different type of formelements through the “type” attribute.These include:text, passw...
Input Attributes: typeFor example:<input type=”text”>would create this:
Input Attributes: nameYou then need to add a name so the datacan be identified by the server:<input type=”text” name=”user...
Class Exercise  Create a form for our tutorial:   Text input (name)Dropdown (favorite color) Radio (human or robot)  Text ...
Adding Text: ExamplesText Input
Adding Text: ExamplesText Input   You can add additional attributes to your text             inputs to control their width...
Adding Text: ExamplesText Area       Text areas are a bit different: they are not                contained in an <input> t...
Making Choices: CheckboxesCheckboxes   With checkboxes and radio buttons, the             “name” attribute creates the gro...
Making Choices: Radio ButtonsRadio Buttons   Use a radio button when the user can only                select one option. L...
Making Choices: DropdownsDrop-downs   Dropdowns are made up of two opening and             closing tags: <select> and <opt...
Uploading FilesFile Upload
Submitting Forms: SubmitSubmit        A simple <input type=”submit”> is the easiest              way to add a submit butto...
Submitting Forms: ImageImage        <input type=”image”> allows you to replace             the standard submit button with...
Submitting Forms: ButtonButton        Inside a <button> element you can put              content, like text or images. Thi...
EXAMPLE
Form Labels
<form>Your Name<br><input type=”text” name=”name”><br>Your Email<br><input type=”text” name=”email”><br><input type=”submi...
<label for=”name”> Your Name<label><br><input type=”text” name=”name” id=”name”>Another way is to use the “label” element....
<label>Your Name<br><input type=”text” name=”name”><label>You can also wrap the entire element in thelabel tag. Both used ...
Form Design
HTML Foundations, pt 3: Forms
HTML Foundations, pt 3: Forms
HTML Foundations, pt 3: Forms
HTML Foundations, pt 3: Forms
HTML Foundations, pt 3: Forms
HTML Foundations, pt 3: Forms
HTML Foundations, pt 3: Forms
HTML Foundations, pt 3: Forms
HTML Foundations, pt 3: Forms
HTML Foundations, pt 3: Forms
HTML Foundations, pt 3: Forms
HTML Foundations, pt 3: Forms
HTML Foundations, pt 3: Forms
HTML Foundations, pt 3: Forms
HTML Foundations, pt 3: Forms
HTML Foundations, pt 3: Forms
Upcoming SlideShare
Loading in...5
×

HTML Foundations, pt 3: Forms

921
-1

Published on

Published in: Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
921
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
39
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×