Lecture 2 Pre-doing

Press right arrow

Instructions

Hierarchy

Meta:

Inline elements

Lists

Hyperlinks

Multimedia

Figures

Tables

Generic containers

Interactivity

Disclosure widget

  • The details element allows us to have hidden content, with a summary that toggles it.
  • If we don't provide a summary, the browser will generate a default one (usually “Details”)
  • The boolean attribute open makes it open by default. It is also added by the browser when the user opens it (which can then be used by CSS for styling). Add it to the examples here and observe what happens!
  • Fun fact: These notes that you're reading right now are in a details element, just styled this way with CSS. Inspect it to see for yourself!
  • Useful for decluttering an interface and hiding away controls that don't need to be visible at all times (e.g. settings, advanced info etc). However, there is a certain learnability tradeoff: often people don't notice this hidden content and don’t view it.

Input fields

  • The input element can generate a wide variety of form controls, differentiated by the type attribute. If no type attribute is present, type="text" is assumed.
  • The following only applies to textual inputs (text, url, email, tel etc):
    • The placeholder attribute shows placeholder text when the field is empty. This is available on textarea too.
    • The pattern attribute allows you to restrict input. This does not currently work on textareas, but there are efforts to make it so.
  • In numerical and date inputs (number, range, date, time etc), the min and max attributes allow you to restrict the range of input.
  • On number and range inputs, you can use the step attribute to control the increment (1 by default).

Multiple choices

  • Group radio buttons via the name attribute to make them mutually exclusive.
  • Set checked state on checkbox and radio buttons via the checked attribute
  • label elements are very useful for all form controls, but especially checkboxes and radios as they increase the target area!
  • Depending on the number of options, different form controls are more appropriate for usability:
    • For < 4 options, prefer radios if you have space (sometimes avoiding clutter is more important, e.g. when part of a template that is multiplied), as they are the most efficient.
    • Between 5-20 options, select menus are ideal
    • For longer than 20 options, search time for select menus becomes longer than typing the first few characters. In those cases, use input with datalist for autocomplete)
  • The fieldset element is useful for grouping together related form controls.

Buttons & Forms

  • The button element creates buttons.
  • These buttons don’t do anything by themselves, but you can make them useful via JavaScript or form elements.
  • The action attribute of form elements controls which file will receive the submission. By default it's the current file.
  • What’s submitted? Only elements that are both enabled and have a name attribute.
  • target="_blank" works here too, to submit the form in a new tab

Web Components

- There are also *custom HTML elements*, which are distinguished from built-in HTML elements from the hyphen in their tag name. These are also called *Web Components*. - We will learn how to make our own later in the semester. Here we have used an [existing web component](https://shoelace.style/components/rating), from a library called [Shoelace](https://shoelace.style) - Similarly, we can have custom CSS properties, that are distinguished from the built-in ones because they start with a double hyphen (`--`). - Web Components make heavy use of custom CSS properties for styling custom aspects.

HTML resources

Looking for help online?

How to avoid bad/outdated resources