COMP 135Web Site Design

IntermediateWeek 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

Actions are usually scripts processed by the web server; can also be used to create an electronic mail message

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

<input> element type determines type of element

text password checkbox radio file submit reset button

<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”

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

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

<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

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

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