Forms

Missing.css aims to style HTML nicely without authors needing to concern themselves over anything other than using HTML tags with correct meanings, but this is not always feasible. Forms are a particularly complex part of HTML, with multiple ways to mark up the same semantics. For instance, you can label an element in multiple ways:

<form>
  <label>Name <input></label>
  <!-- or... -->
  <label for="adr">Address</label> <input id="adr">
</form>

Because of this, it's not really possible to write a stylesheet that will work with any HTML form.

Missing.css will work best on forms that follow these markup conventions:

§ Inputs and labels

Inputs inside labels will be display: inline. Inputs outside labels will be display: block.

§ Tabular forms

You can use the .table and .rows classes to create a form with inputs lined up like cells of a table.

<form class="table rows">
  <p><label for=inp>Label</label> <input id=inp></p>
  ...
A tabular form

§ Labeling radio buttons

The accepted way to label a group of radio buttons is to use <fieldset> and <legend>:

<fieldset>
  <legend>Color</legend>
  <ul>
    <li><label><input type=radio name=color value="ff0000">Red</label>
    <li><label><input type=radio name=color value="00ff00">Green</label>
    <li><label><input type=radio name=color value="0000ff">Blue</label>
  </ul>
</fieldset>

This works in missing.css, but these two elements are [notorious] for being hard to style. You can use the following pattern instead:

Note the role, aria-labelledby and the ID on the label itself.
<div role=radiogroup aria-labelledby=color-lbl>
  <span id=color-lbl>Color</span>
  <div>
    <div><label><input type=radio name=color value="ff0000"> Red</label></div>
    <div><label><input type=radio name=color value="00ff00"> Green</label></div>
    <div><label><input type=radio name=color value="0000ff"> Blue</label></div>
  </div>
</div>

The above will work with tabular forms:

A radiogroup in a tabular form
Color