Tables Forms

1. TablesForms Webdesign og webkommunikation E2008 IT University of Copenhagen 13.11.2008

2. Goals of the lecture • Tables • Forms

3. Tables • Two types • Tabular data • Layout (now we should use stylesheets) • Tabular data • Information arranged in rows and columns • Calendars, timetables, statistics… • Examples? • Layout • Just forget about it

4. Elements • Define the table • <table>…</table> • Sets the beginning and the end of the table • Row • <tr>…</tr> • Element in a row (cell) • <td>…</td> • Table headers (they are cells, too) • <th>…</th> • And the columns? • Given by the number of <td>’s

5. Example Table headers Table contents <table> <tr> <th>Name</th><th>Group</th><th>e-mail</th> </tr> <tr> <td>Student 1</td><td>3</td><td>name1@itu.dk</td> </tr> <tr> <td>Student 2</td><td>5</td><td>name2@itu.dk</td> </tr> </table>

6. Elements II • All content must go in a cell!! • <td>content</td> • <th>content</th> • Content can be anything (text, images, etc.)

7. Cell spanning • Stretch a cell so it covers several rows or columns • Column span • <td colspan=“3”> • <td colspan=“3”> • The cell occupies two cells in the same row <table> <tr> <th colspan="3">Operating systems</th> </tr> <tr> <td>Mac</td> <td>Linux</td> <td>Windows</td> </tr> </table>

8. Cell spanning II • Row span • <td rowspan=“3”> • The cell occupies three cells in the same column <table> <tr> <th rowspan="3">Movies</th> <td>Pulp Fiction</td> </tr> <tr> <td>Memento</td> </tr> <tr> <td>Life of Brian</td> </tr> </table>

9. Cell padding • Space between border and content • Applied to the whole table • Preferred way: use CSS padding property <table> ... </table> <table cellpadding=“10px”> ... </table>

10. Cell spacing • Space between cells • Applied to the whole table • Default: 2px <table> ... </table> <table cellpadding=“10px”> ... </table>

11. Summary and caption • Summary • Description of the table and its contents • Not displayed • <table summary=“…”>…</table> • Caption • Table title • <caption>Title of the table</caption>

12. Forms • Used to collect information from the user and send it to the server • Uses: • Search box, sign up, surveys… • Information is processed by an application in the server (cgi, php, asp…) • <form action=“URL”>…</form>

13. Form element • <form> … </form> • Groups all the content of the form • Form controls • Any text or images • Cannot contain another form

14. Forms II Script <form action=“/cgi-bin/action.cgi” method=“post”> <p> First name: <input type=“text” name=“firstname” /> <br /> Last name: <input type=“text” name=“lastname” /> <br /> </p> <input type=“submit” value=“Search” /> Button Text box

15. Method • Post • Only the server sees the information transmitted • Suitable for long text • Get • The data gets back to the URL • Useful for search form (e.g. Google)

16. Variables and content <form action=“/cgi-bin/action.cgi” method=“post”> <p> First name: <input type=“text” name=“firstname” /> <br /> Last name: <input type=“text” name=“lastname” /> <br /> </p> <input type=“submit” value=“Search” /> • name attribute: define the name of the variable • id attribute: “same” as name • What the user types in is the content of the variable • The server sees: • firstname = Homer Defines a variable

17. Variables II • The name of the variable is then used in the script (PHP…) • Variable name must be unique • Give descriptive names to the variables • favouriteMovie: OK • m: terrible

18. Forms III: form controls • Single line • Password • Radio buttons • Checkboxes • Submit and reset buttons

19. Forms IV <input type=“text” /> <input type=“radio” /> <input type=“checkbox” /> <input type=“submit” /> <input type=“reset” />

20. Text input • Single word or line of text • Attributes: • type=“text” • name=“variableName” • id=“variableName” • value: default value the field takes • size: size of the text box • maxlength: maximum length allowed

21. Password • Type a password. Characters are shown with * • Attributes • type=“password” • Same as text field

22. Multiline text • Allow the user to enter multiple lines of text • <textarea>Default content</textarea> • Attributes: • rows: number of rows displayed • cols: width of the text field in number or characters • name, id

23. Submit and reset buttons • Submit • Send the information to the server • <input type=“submit” /> • Reset • Reset all the controls to the original state • <input type=“reset” /> • The default text is Submit and Reset; it can be changed with the value=“new text” attribute

24. Radio and checkbox buttons • Radio • Used when only one choice is possible • <input type=“radio” value=“value1” /> • Checkbox • Multiple options can be selected • <input type=“checkbox” value=“value1” /> <input type=“radio” name=“age” value=“value1” /> <input type=“radio” name=“age” value=“value2” /> <input type=“radio” name=“age” value=“value3” checked />

25. Questions