<input type="checkbox" id="vehicle1" name="vehicle[]" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle[]" value="Car">
<label for="vehicle2"> I have a car</label><br>

We can have checkboxes with the same name by putting square brackets at the end of the

name

value. On server side we receive them whichever is checked as an array

Metadata

: Content that sets up the presentation or behavior of the rest of the content. These elements are found in the head of the document. Elements:

<base>

,

<link>

,

<meta>

,

<noscript>

,

<script>

,

<style>

,

<title>

Embedded

: Content that imports other resources into the document. Elements:

<audio>

,

<video>

,

<canvas>

,

<iframe>

,

<img>

,

<math>

,

<object>

,

<svg>

Interactive

Content specifically intended for user interaction. Elements:

<a>

,

<audio>

,

<video>

,

<button>

,

<details>

,

<embed>

,

<iframe>

,

<img>

,

<input>

,

<label>

,

<object>

,

<select>

,

<textarea>

Heading

Defines a section header. Elements:

<h1>

,

<h2>

,

<h3>

,

<h4>

,

<h5>

,

<h6>

,

<hgroup>

Phrasing

This model has a number of inline level elements in common with HTML4. Elements:

<img>

,

<span>

,

<strong>

,

<label>

,

<br />

,

<small>

,

<sub>

, ...

HTML forms only support

GET

and

POST

as HTTP request methods. A workaround for this is to tunnel other methods through

POST

by using a

hidden form field

which is read by the server and the request dispatched accordingly

<input type="hidden" name="_method" value="DELETE">

However,

GET

,

POST

,

PUT

and

DELETE

are supported by the implementations of XMLHttpRequest (i.e. AJAX calls) in all the major web browsers (IE, Firefox, Safari, Chrome, Opera)

<select name="cars" id="cars" multiple>
  <option value="volvo1">Volvo1</option>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

<optgroup>

is used to group several options together

<header>

- defines a header for a document or section;

<nav>

- defines a set of navigation links;

<main>

- specifies the main content of a document;

<footer>

- defines a footer for a document or section;

<article>

- defines an article;

<section>

- defines a section in a document;

<aside>

- defines content aside from the page content;

Solution to the problem was to add labels for the inputs but hidden by

CSS

/* Fix to pass Lighthouse: */
.label-hidden {
    position: absolute;
    height: 1px;
    width: 1px;
    clip: rect(1px,1px,1px,1px);
    border: 0;
    overflow: hidden
}

Another solution to the problem:

/* Fix to pass Lighthouse: */
label-hidden { 
    position: absolute; 
    top:-1000px; 
    left:-1000px; 
}

multiple

attribute enables us to select several options at the same time.

size

attribute determines select tag height in options

<a>

and

<span>

are inline containers that are going to take as much space as they need. Whereas

<p>

and

<div>

are block containers that take the entire width of the screen.

We can check as many checkboxes as we want, but we can only check one radio as long as they have the same name.

Note: There must not be more than one

<main>

element in a document. The

<main>

element must NOT be a descendant of an

<article>

,

<aside>

,

<footer>

,

<header>

, or

<nav>

element.