1 / 11

COMP 135 Web Site Design Intermediate

COMP 135 Web Site Design Intermediate. Week 10. Forms. Form controls. <form> element. Parent containing element for other form control elements Requires method and action attributes to process the information collected by the form

tarmon
Download Presentation

COMP 135 Web Site Design Intermediate

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. COMP 135Web Site Design Intermediate Week 10

  2. Forms Form controls

  3. <form> element Parent containing element for other form control elements Requires method and action attributes to process the information collected by the form Actions are usually scripts processed by the web server; can also be used to create an electronic mail message

  4. Form Input Control Elements • Multiple ways to collect data • <input> element • <select>element • <textarea>element • type attribute for <input>element determines both its behaviour and presentation

  5. <input> element type determines type of element text password checkbox radio file submit reset button

  6. <select> element • Use when checkboxes and radio buttons become too inefficient • Choices defined by the <option> element • The label attribute can be used to present a shortened version of an option when appearing in an optgroup • Can be grouped using the <optgroup> element • The label attribute can be used to identify the options of an option group • Multiple selections allowed by setting multiple attribute to value of “multiple”

  7. <textarea> element Function identical to the <input type=“text”> element but allows for multiple lines of text to be entered

  8. name Attribute Data collected from form controls are associated to a value specified by the name attribute of the form control element that collected the information The name value is like a variable that contains the form input value

  9. <label> element • Used for marking up a form control’s descriptive text • Has no presentation value unless styled with CSS • Provides two features: • Usability • Improvement for mouse users – clickable area • Accessibility • Make a form control’s purpose clearer for users of assistive technologies

  10. for attribute The glue that binds the text inside the label element with the form control it is related (explicit association) If you wrap a form control inside a <label> </label> you could skip the for attribute (implicit association) Best practice: do both

  11. What to Expect in Web Site Design Advanced • Web Servers • Apache, Microsoft IIS • Web Server Technologies: • PHP, MySQL, TLS/SSL • Survey of responsive image solutions • JavaScript frameworks • Web Applications • CMS (Drupal, WordPress, etc) • Creating/modifying themes

More Related