Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

HTML Foundations, pt 3: Forms

•
•
Shawn Calvert
Shawn Calvert

This document discusses different types of forms and form elements that can be used to collect user input on a website, including text fields, checkboxes, radio buttons, dropdown menus, submit buttons, and file uploads. It provides examples of how to code these different form elements using HTML tags like <form>, <input>, <label>, <select>, and <textarea> and describes attributes that can be added to customize elements. The document also offers best practices for labeling form fields and designing accessible forms.

1 of 49
Download to read offline
22-3375 Web Design I FORMS
Student Presentations Present your initial ideas for your portfolio Walk us through the flow (homepage, detail, about) What types of work will you be showing?
HTML Foundations, pt 3: Forms
What is a form? Forms provide an interface allowing users to interact in some way with your site. Forms collect input via controls, such as buttons, text fields, or scrolling menus. Controls are placed on the page using special elements in the markup. These elements are merely an interface for collecting information and do not actually possess the data. from Web Design in a Nutshell by Jennifer Niederst Robbins
HTML Foundations, pt 3: Forms
HTML Foundations, pt 3: Forms
Form Types
There are three basic types of form controls, for: Adding Text Making Choices Submitting Forms Uploading Files
Adding Text Text Input Password Input Text Area
Making Choices Radio Buttons Checkboxes Drop-downs
Submitting Forms Submit Buttons Image Buttons Buttons
Uploading Files File Upload
Form Syntax
<form> </form> The <form> tag is used to create an HTML form for user input.
<form> <input> </form> <input> elements are used within a <form> element to declare input controls that allow users to input data. <input> is an inline, self-closing tag. An input field can vary in many ways, depending on the type attribute.
<form> <input type=”text” name=”username”> </form> The <input> tag should always have, at a minimum, a type and name attribute. The “type” attribute controls the form type (text, radio, dropdown, etc), and the “name” attribute is how you identify the data when it is sent to the server.
Input Attributes: type You create the different type of form elements through the “type” attribute. These include: text, password, radio, checkbox, select, file, submit, image, and hidden.
Input Attributes: type For example: <input type=”text”> would create this:
Input Attributes: name You then need to add a name so the data can be identified by the server: <input type=”text” name=”username”>
Class Exercise Create a form for our tutorial: Text input (name) Dropdown (favorite color) Radio (human or robot) Text area (comment) Submit
Adding Text: Examples Text Input
Adding Text: Examples Text 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).
Adding Text: Examples Text Area Text areas are a bit different: they are not contained in an <input> tag, and they require a closing tag (<textarea></textarea>.
Making Choices: Checkboxes Checkboxes 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.
Making Choices: Radio Buttons Radio 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.
Making Choices: Dropdowns Drop-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.
Uploading Files File Upload
Submitting Forms: Submit Submit 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].
Submitting Forms: Image Image <input type=”image”> allows you to replace the standard submit button with an image of a submit button. This method is not recommended.
Submitting Forms: Button Button 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.
EXAMPLE
Form Labels
<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 form elements. The simplest way is to just add unmarked up text with <br> elements.
<label for=”name”> Your Name <label><br> <input type=”text” name=”name” id=”name”> Another way is to use the “label” element. It can wrap both the label and input, or stand outside of the 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 the form element (not required, but good for accessibility reasons).
<label> Your Name<br> <input type=”text” name=”name”> <label> You can also wrap the entire element in the label tag. Both used of the label tag give your radio and checkboxes the added feature of making the entire field clickable.
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

More Related Content

HTML Foundations, pt 3: Forms

  • 2. Student Presentations Present your initial ideas for your portfolio Walk us through the flow (homepage, detail, about) What types of work will you be showing?
  • 4. What is a form? Forms provide an interface allowing users to interact in some way with your site. Forms collect input via controls, such as buttons, text fields, or scrolling menus. Controls are placed on the page using special elements in the markup. These elements are merely an interface for collecting information and do not actually possess the data. from Web Design in a Nutshell by Jennifer Niederst Robbins
  • 8. There are three basic types of form controls, for: Adding Text Making Choices Submitting Forms Uploading Files
  • 14. <form> </form> The <form> tag is used to create an HTML form for user input.
  • 15. <form> <input> </form> <input> elements are used within a <form> element to declare input controls that allow users to input data. <input> is an inline, self-closing tag. An input field can vary in many ways, depending on the type attribute.
  • 16. <form> <input type=”text” name=”username”> </form> The <input> tag should always have, at a minimum, a type and name attribute. The “type” attribute controls the form type (text, radio, dropdown, etc), and the “name” attribute is how you identify the data when it is sent to the server.
  • 17. Input Attributes: type You create the different type of form elements through the “type” attribute. These include: text, password, radio, checkbox, select, file, submit, image, and hidden.
  • 18. Input Attributes: type For example: <input type=”text”> would create this:
  • 19. Input Attributes: name You then need to add a name so the data can be identified by the server: <input type=”text” name=”username”>
  • 20. Class Exercise Create a form for our tutorial: Text input (name) Dropdown (favorite color) Radio (human or robot) Text area (comment) Submit
  • 22. Adding Text: Examples Text 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).
  • 23. Adding Text: Examples Text Area Text areas are a bit different: they are not contained in an <input> tag, and they require a closing tag (<textarea></textarea>.
  • 24. Making Choices: Checkboxes Checkboxes 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.
  • 25. Making Choices: Radio Buttons Radio 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.
  • 26. Making Choices: Dropdowns Drop-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.
  • 28. Submitting Forms: Submit Submit 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].
  • 29. Submitting Forms: Image Image <input type=”image”> allows you to replace the standard submit button with an image of a submit button. This method is not recommended.
  • 30. Submitting Forms: Button Button 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.
  • 33. <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 form elements. The simplest way is to just add unmarked up text with <br> elements.
  • 34. <label for=”name”> Your Name <label><br> <input type=”text” name=”name” id=”name”> Another way is to use the “label” element. It can wrap both the label and input, or stand outside of the 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 the form element (not required, but good for accessibility reasons).
  • 35. <label> Your Name<br> <input type=”text” name=”name”> <label> You can also wrap the entire element in the label tag. Both used of the label tag give your radio and checkboxes the added feature of making the entire field clickable.