1 / 25

Tables Forms

Tables Forms. Webdesign og webkommunikation E2008 IT University of Copenhagen 13.11.2008. Goals of the lecture. Tables Forms. Tables. Two types Tabular data Layout (now we should use stylesheets ) Tabular data Information arranged in rows and columns

sumi
Download Presentation

Tables Forms

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

More Related