Web Forms

  1. Forms are used to gather input from the user
    1. Information is manipulated with client-side logic (JavaScript)
    2. Or submitted to the web server for processing (PHP)
    3. HTML5 greatly expands the number of form elements and their functionality
    4. Website Forms Usability: Top 10 Recommendations
  2. form tag
    1. All form elements should be surrounded by <form> tags
    2. The attributes method and action are used with server-side scripts (like PHP), but we will ignore these for now
  3. Text boxes
    1. For reading in a single line of text
      <input type="text" value="hacker1" size="10" maxlength="15">
      
    2. For getting a password
      <input type="password" size="10">
      
    3. Multi-line text box
      <textarea rows="3" cols="20">
      Please tell me your life's story.</textarea>
      
  4. Buttons
    1. Simple button
      <input type="button" value="Press Me"> 
      
    2. Submit button for submitting a form to a web server
      <input type="submit" value="Submit"> 
      
    3. Reset button to reset the form to its original settings (don't use)
      <input type="reset" value="Reset"> 
      
    4. Fancy button that can render marked-up text and images
      <button type="button">
      	<img src="images/arrow1.gif" alt="triangle"> 
      	<strong>Press me!</strong>
      	<img src="images/arrow1.gif" alt="triangle">
      </button>
      
    5. Fancy submit button
      <button type="submit">
      	<img src="images/arrow1.gif" alt="triangle"> 
      	<em style="color:red">Submit</em>
      </button>
      
  5. Selection lists
    1. Drop-down list box
      <select>
      	<option>Walking</option>
      	<option>Running</option>
      	<option>Sliding</option>
      	<option>Gliding</option>
      </select>
      
    2. List box
      <select size="3">
      	<option>Walking</option>
      	<option selected>Running</option>
      	<option>Sliding</option>
      	<option>Gliding</option>
      </select>
      
    3. Multiple-select list box (hold down Ctrl or Shift and arrows) - Not easy for many of users
      <select size="3" multiple>
      	<option>Walking</option>
      	<option>Running</option>
      	<option>Sliding</option>
      	<option>Gliding</option>
      </select>
      
  6. Radio buttons and check boxes
    1. Radio buttons are for selecting a single item. name must be same for the group
      <input type="radio" name="color" value="red" checked>Red<br>
      <input type="radio" name="color" value="green">Green<br>
      <input type="radio" name="color" value="blue">Blue
      
      Red
      Green
      Blue
    2. Check boxes are for selecting zero, one, or more items. name can be same for the group or unique
      <input type="checkbox" name="color" value="red" checked>Red<br>
      <input type="checkbox" name="color" value="green">Green<br>
      <input type="checkbox" name="color" value="blue">Blue
      
      Red
      Green
      Blue
  7. Labels
    1. Does not display anything differently
    2. Helpful for sight-impaired using screen readers
    3. Improves usability for radio buttons and check boxes by making label clickable
      <label><input type="radio" name="gender" value="m">Male</label><br>
      <label><input type="radio" name="gender" value="f">Female</label>
      

    4. Use with or without for attribute
      <!-- Using "for" attribute -->
      <label for="email">Email address:
      <input type="text" id="email">	
      
      <!-- Control nested inside label -->
      <label>Phone number:
         <input type="text" id="phone"></label>
      

  8. Hidden fields
    1. Does not show anything in the browser
    2. Useful for passing some special information to the server, like an identifier used to identify a particular web page
    3. Example:
      <input type="hidden" name="userid" value="white123">
      
  9. Group boxes
    1. Used to group related elements by showing a box around them
    2. Example:
      <fieldset>
      	<legend align="top">Music</legend>
      	<input type="checkbox">Rock<br>
      	<input type="checkbox">Country<br>
      	<input type="checkbox">Jazz
      </fieldset>
      
      Music Rock
      Country
      Jazz