This section demonstrates an example of an HTML table element, complete with a caption/title,
a footer, columns/rows that span multiple units (columns/rows), and images within the table.
The table is also styled with CSS, which has created borders around all cells and centered the text within. The styling
also has highlighted the headers of the table, semantically created using <th>
Caption / Title of the Table
Column 1
Column 2
rowspan="3"
Image
Row 1
Data 1, 1
Data 1, 2
Stretched across 3 rows!
Row 2
Data 2, 1
Data 2, 2
colspan="2"
Stretched across 2 columns!
Chris Woodrich, CC BY-SA 4.0, via Wikimedia Commons
A Footer for the Table
Tic-Tac-Toe
This section demonstrates an HTML table element via a static tic-tac-toe display.
The 'game' is not interactable, just a depiction of a possible game state.
Tic-Tac-Toe
X has won!
X
X
O
X
O
X
X
O
O
Input Forms
In this section, several different types of input elements are explored. Some are specified via the type="" within an
input element, and some have their own elements, such as <select> and <meter>
Some attributes that are near universal among input types, besides the type="" attribute that defines their shape
and function, are the id="" and name="" attributes, as they're
important for submitting the inputted data via key-value pairs. Additionally, id is used to anchor a
<label> element to the input field.
Labels are important for accessibility, as they can help describe what the
input is for. To make identifying them easier, they have been styled with a border and lighter background color below.
Text
This section shows a text input field, along with a corresponding "label" element. Because this element has been marked as required,
via a required attribute within the <input> declaration, the text
field will appear red if no text has been inputted. This is due to the input pseudo-selector
input:valid and input:invalid.
Additionally, the placeholder="" attribute can display placeholder text or a placeholder message with instructions
while the input field is unfilled. It will automatically disappear once the user starts entering text.
Checkbox
This section displays a checkbox, where multiple options
may be selected. This input is also wrapped in a <fieldset>, which provides some borders +
a title/caption in the form of the <legend> element.
For checkboxes, there is an additional useful attribute checked, which results in a checkbox being automatically checked even
without user action. A user can then uncheck that value if they wish; it's like a default.
Dropdown
This section shows a dropdown menu, or as it is defined in HTML, a <select> element.
It is a method of querying input from the user, but is not specifically an <input> element defined via
type="".
Similar to <input> elements however, <select> elements also should have name
and id attributes, and should have a label.
The options of the menu are defined with the <option> element, with a value="" attribute
defining what is actually submitted to a theoretical backend. Within the tags, the user can write the option text itself.
Pre-filled
A text input can also have a prefilled value. Unlike a placeholder, the value doesn't erase itself as soon as the user
clicks into the input bar, and the value is not replaced if the user deletes it.
Color Select
Inputs can also take the form of color selectors. Clicking on the input usually brings up the browser's built-in color
selector.
Meter
The meter element. The common attributes are min="", max="", and value="", along with an
id attribute for accessibility purposes, as it can tie a <label>
element to the <meter> element for explanation purposes. By default, min is 0 and max is 1, meaning
value should be a fraction or decimal.
Email
An <input> of type="email" is a special version of a text input that has built-in validation
for the user input. It will enforce that the text entered is a valid email format, but won't validate whether the email exists
or not.
Using the input:valid and input:invalid CSS pseudo-selectors, this pattern validation can be demonstrated.
Submit
Once inputs are filled out, the user can click a special 'submit' input, which
usually takes the form of a button. Inputs are usually wrapped within a <form> element, which has an
action="" attribute that dictates what should happen once the submit button is pressed.
For instance, the following
submit button is tied to a action="mailto:name@email.com" form, which should open up the user's default email program
