GRA422 W14 Lecture 4

All about HTML forms

Transcript

1. GRA422 Electronic Document Design II — Lecture #4 Forms http://gra422.com/funbox/form.html Winter 2014 Instructor: Ahmed Sagarwala
2. GRA422 Electronic Document Design II — Lecture #3 + #4 Cascading Style Sheets HTML Forms form element All fields associated with form a encapsulated Allows for multiple forms on one page (sign-up or sign-in) Controls how/where data is processed
3. GRA422 Electronic Document Design II — Lecture #3 + #4 Cascading Style Sheets Forms sample form <form action='process.php' method='get'> <label for='un'>User Name:</label> <input type='text' name='user' id='un'><br> <label for='pwd'>Password:</label> <input type='password' name='pass' id='pwd'><br> <input type='submit'> </form>
4. GRA422 Electronic Document Design II — Lecture #3 + #4 Cascading Style Sheets Forms attributes <form action='process.php' method='get'> This form would send data to process.php The method specifies how the data should be sent GET vs. POST query string vs. posted data process.php?user=jon.doe&password=pass
5. GRA422 Electronic Document Design II — Lecture #3 + #4 Cascading Style Sheets Forms labels & ids <label for='un'>User Name:</label> <input type='text' name='user' id='un'><br> Label is associated with form field for => id Allows label to describe the field Has another subtle impact
6. GRA422 Electronic Document Design II — Lecture #3 + #4 Cascading Style Sheets Forms type attribute <form action='process.php' method='get'> <label for='un'>User Name:</label> <input type='text' name='user' id='un'><br> <label for='pwd'>Password:</label> <input type='password' name='pass' id='pwd'><br> <input type='submit'> </form> The ‘type’ attribute changes input field behaviour color, date, datetime, datetime-local, checkbox, email, file, image, month, number, radio, range, reset, search, tel, time, url, week
7. GRA422 Electronic Document Design II — Lecture #3 + #4 Cascading Style Sheets Forms name attribute <form action='process.php' method='get'> <label for='un'>User Name:</label> <input type='text' name='user' id='un'><br> <label for='pwd'>Password:</label> <input type='password' name='pass' id='pwd'><br> <input type='submit'> </form> The ‘name’ attribute is used for processing data name = jon.doe
8. GRA422 Electronic Document Design II — Lecture #3 + #4 Cascading Style Sheets Forms buttons <input type='submit'> Standard “submit” button <input type='reset'> Button to “reset” the form <input type='button'> Button which has no action <input type='image'> Image with button properties
9. GRA422 Electronic Document Design II — Lecture #3 + #4 Cascading Style Sheets Forms checkboxes <label>Check this: <input type='checkbox'></label> Encapsulating with label tags, no ID? Allows for multiple selections for items with the same name
10. GRA422 Electronic Document Design II — Lecture #3 + #4 Cascading Style Sheets Forms radio input <label>Check this: <input type='radio'></label> Labels again! Allows for single selection for items with the same name
11. GRA422 Electronic Document Design II — Lecture #3 + #4 Cascading Style Sheets Forms select <label for='id-drop'>Dropdown</label> <select id='id-drop' name='dropper'> <option value=''>Choose One</option> <optgroup label='Warm'> <option value='#F00'>Red</option> <option>Pink</option> </optgroup> <optgroup label='Cold'> <option value='#00F' selected>Blue</option> <option value='#0F0'>Green</option> </optgroup> </select>
12. GRA422 Electronic Document Design II — Lecture #3 + #4 Cascading Style Sheets Forms options + option groups <option value=''>Choose One</option> <optgroup label='Warm'> <option value='#F00'>Red</option> <option>Pink</option> </optgroup> Options are selectable and assign value Option groups divide options and cannot be selected Value can be different from text
13. GRA422 Electronic Document Design II — Lecture #3 + #4 Cascading Style Sheets Forms dropdown vs. combo box <select id='id-drop' name='dropper' multiple>
14. GRA422 Electronic Document Design II — Lecture #3 + #4 Cascading Style Sheets Forms textarea <textarea name='txt' rows='5'>Default Text</textarea> Used for blocks of text (multiple lines) Rows control number of lines visible Cols control width measured by number of characters (ems). Use CSS. No value attribute, default value is within tags
15. GRA422 Electronic Document Design II — Lecture #3 + #4 Cascading Style Sheets Forms html5 Colour picker Email, URL, Telephone Time and/or date required attribute Use JS to add support for older browsers
16. GRA422 Electronic Document Design II — Lecture #3 + #4 Cascading Style Sheets Forms validation Client-side vs Server-side Which is better?
17. GRA422 Electronic Document Design II — Lecture #3 + #4 Cascading Style Sheets Forms html5 validation <input type='text' placeholder='Your Name' required>
18. GRA422 Electronic Document Design II — Lecture #3 + #4 Cascading Style Sheets Forms JS validation <input type='text' class='validate[required]'>
19. GRA422 Electronic Document Design II — Lecture #3 + #4 Cascading Style Sheets Forms server-side validation Older browsers without HTML5 support JavaScript disabled Malicious bots CAPTCHA
20. GRA422 Electronic Document Design II — Lecture #3 + #4 Cascading Style Sheets Forms CAPTCHA Completely Automated Public Turing test to tell Computers and Humans Apart
21. GRA422 Electronic Document Design II — Lecture #3 + #4 Cascading Style Sheets Upcoming next week Site optimization Lab: Quiz, STW, CSS break-points