More HTML tags

1. More HTML tags And a homework assignment

2. But first… • You have a homework assignment due by 11:59pm on Thursday

3. But first… • You have a homework assignment due by 11:59pm on Thursday, October 3 • It involves using Javascript in the context of the browser, including some things we haven't quite gotten to yet (event handling, some DOM traversal methods) • We will get to these over the coming days

4. Today • How do HTML tables work? • How do HTML input fields work?

5. HTML tables • HTML tables allow us to create two-dimensional grids of elements • All elements in a given column have the same width • All elements in a given row have the same height • All elements may span multiple columns or rows • All elements take up a rectangular space in the table • No elements may overlap with each other

6. Tables 101 • A table is created using <table></table> • Each row in the table has its own <tr></tr> tags, which are placed inside the corresponding table tags • Rows are specified from the top down • Each element in the row has its own <td></td> tags, which are placed inside the corresponding tr tags • Elements are specified left to right • Let's make a 4x4 table…

7. Tables 102 • If we want an element to span multiple rows or multiple columns, we can set the following properties on the td elements: • colspan – how many columns you want the element to take up • rowspan – how many rows you want the element to take up • Let's adjust the size of table elements…

8. Tables 201 • We can indicate elements that function as headers by using <thead></thead> to contain header rows, and <th></th> in place of <td></td> for elements that are header elements • Header elements are usually in the first columns or first rows of a table

9. Tables 202 • We can create a <tfoot></tfoot> element to contain footer rows at the bottom of a table • We can use <tbody></tbody> to contain elements that are part of "the main part" of the table • Our tables will display fine without these, BUT… • It improves accessibility to include this separation • It makes styling easier • It gives browsers the option to print things out intelligently or to have the headers scroll • I haven't seen any actually do it

10. HTML Forms • Areas on a webpage where people can type stuff in are usually included under the term "forms" • "UI elements" might be a better name these days • We can create these graphical elements and then use them from Javascript-land to make pages that take in user input • They all* take the same general form:

11. Input tag • The input tag represents a graphical UI element where the user can give input • <input type="something" id="someID" value="something?" placeholder="something?"> • You will always want to specify a type • You will almost always want to give it an id (so you can find it from js)

12. <input type="text"> • This creates a textbox where the user can type in a line of text • value specifies any starting text to be placed in the box (defaults to "") • placeholder specifies text to display in the box when no text has been entered (defaults to "") • Let's create one of these and then access the value from javascript…

13. Labeling our inputs • Unless it is blatantly obvious, you should label what your various inputs do • You can do this using a <label> tag • Set the "for" property of the label to the id of the associated input • Advantages include: • a11y • Making it easier to click on (or tap) the control • Let's label our textbox…

14. <input type="password"> • Allows you to enter a password • Works just like type="text", except that it's displayed using * or • or something like that

15. <input type="search"> • Again, behaves almost exactly like "text" • Allows you to style it differently • Provides different semantics • Some browsers include a "clear" button

16. <input type="tel"> • On most browsers, behaves just like a text field • most…

17. <input type="button" value="Button Label"> • Button inputs represent a button that can be clicked • When the button is clicked, something is supposed to happen • The value attribute specifies what the button label is supposed to be

18. <input type="color"> • Allows the user to pick a color they want • Color picker depends on the OS and browser someone is using