11 – USER INTERFACE ELEMENTS

The search input type is a special kind of text input that conveys the additional semantic that the user will be entering search terms.

Numerous date and time inputs for specifying the date and time, a month, or a week.

Input types of tel, url, and email also represent special text inputs, but with different structures as well as semantics.

On an <input> element, the autofocus attribute indicates to the browser that this input should be focused upon loading the page, so the user can start typing without having to first activate that input.

The <output> element is used to perform some sort of computation or calculation based on input from the user.

The <details> element is for representing and presenting a piece of content that offers a summary label with further details provided through a progressive disclosure interface. The new <summary> element marks up the summary or label inside the <details> element.

details

Shopping List
  • avocado
  • broccoli
  • carrots
  • grapes
  • kale
  • spinach
  • tamales
  • tomatoes

The <meter> element can be used to display measurements such as a score, a rating, a countdown, or donations towards a goal. The new element comes with min and max attributes to set the bottom and top ends of the range, as well as a value attribute.

The <progress> element is for the special case of progress towards completion of a task; and also has max and value attributes.

 

Leave a Reply

Your email address will not be published.