• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML Foundations, pt 3: Forms
 

HTML Foundations, pt 3: Forms

on

  • 690 views

 

Statistics

Views

Total Views
690
Views on SlideShare
583
Embed Views
107

Actions

Likes
1
Downloads
17
Comments
0

1 Embed 107

http://www.shawncalvert.com 107

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML Foundations, pt 3: Forms HTML Foundations, pt 3: Forms Presentation Transcript

    • 22-3375 Web Design IFORMS
    • Student PresentationsPresent your initial ideas for your portfolioWalk us through the flow (homepage, detail, about)What types of work will you be showing?
    • 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
    • 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 data.<input> is an inline, self-closing tag.An input field can vary in many ways, dependingon the type attribute.
    • <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.
    • 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.
    • 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=”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: ExamplesText Input
    • 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).
    • 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>.
    • 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.
    • 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.
    • 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.
    • Uploading FilesFile Upload
    • 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].
    • 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.
    • 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.
    • 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 formelements. The simplest way is to just addunmarked 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 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).
    • <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.
    • Form Design