Form elements

This page demonstrates how form elements appear with the default CSS defined in au_typo3_shared.css - a CSS document shared by all TYPO3 installations.

Input fields with labels using "for" attribute

input field one
input field two
input field three

<label class="au_t3_form_label" for="i1">input field 1</label>
    <input type="text" class="au_t3_form_textfield" name="i1" id="i1" /><br />
<label class="au_t3_form_label" for="i2">input field 2</label>
    <input type="text" class="au_t3_form_textfield" name="i2" id="i2" /><br />
<label class="au_t3_form_label" for="i3">input field 3 - longer</label>
    <input type="text" class="au_t3_form_textfield" name="i3" id="i3" />

Input fields with labels using wraps (the label wraps the input element)

input field four
input field five
input field six

    <label class="au_t3_form_label_wrapped">input field 4
      <input type="text" class="au_t3_form_textfield" name="i4" id="i4" />
    </label>
    <br />
    <label class="au_t3_form_label_wrapped">input field 5
      <input type="text" class="au_t3_form_textfield" name="i5" id="i5" />
    </label>
    <br />
    <label class="au_t3_form_label_wrapped">input field 6
      <input type="text" class="au_t3_form_textfield" name="i6" id="i6" />
    </label>

Text areas with labels using the "for" attribute

textarea seven - with longer label that should wrap nicely This is the default appearance of a text area with no values defined for cols or rows.
textarea seven again - with longer label that should wrap nicely This is the default appearance of a text area with no values defined for cols or rows.

<label class="au_t3_form_label" for="i8">textarea 7 - with longer label that should wrap nicely </label>
<textarea class="au_t3_form_textarea" name="i8" id="i8" rows="" cols="">This is the default appearance 
of a text area with no values defined for cols or rows.</textarea>

Radio buttons with labels using the "for" attribute

<label>Choose something</label><input name="i9" type="radio" value="1" />

Radio one
Radio two
Radio three
Radio four

 <label>
  <input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_0" />
      Radio 1</label>
  <br />
  <label>
  <input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_1" />
      Radio 2</label>
  <br />
  <label>
  <input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_2" />
      Radio 3</label>
  <br />
  <label>
  <input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_3" />
      Radio 4</label>
  <br />
  </p>

Check boxes

Choose
Choose more
Choose less
Choose alot
Choose something

<label class="au_t3_form_label" for="i10">Choose</label><input class="au_t3_form_checkbox" id="i10" name="i10" type="checkbox" value="i10" /><br />
<label class="au_t3_form_label" for="i11">Choose more</label><input class="au_t3_form_checkbox" id="i11" name="i11" type="checkbox" value="i11" /><br />
<label class="au_t3_form_label" for="i12">Choose less</label><input class="au_t3_form_checkbox" id="i12" name="i12" type="checkbox" value="i12" /><br />
<label class="au_t3_form_label" for="i13">Choose alot</label><input class="au_t3_form_checkbox" id="i13" name="i13" type="checkbox" value="i13" /><br />
<label class="au_t3_form_label" for="i14">Choose something</label><input class="au_t3_form_checkbox" id="i14" name="i14" type="checkbox" value="i14" />

Lists / menues

Choose something

<label class="au_t3_form_label" for="i15">Choose something</label>
 <select class="au_t3_form_dropdown" name="i15" id="i15">
   <option value="1">test 1</option>
   <option value="2">test 2</option>
   <option value="3">test 3</option>
   <option value="4">test 4</option>
   <option value="5">test 5</option>
 </select>

Choose (hold ctrl for multiple selections)

<label class="au_t3_form_label" for="i16">Choose (hold ctrl for multiple selections)</label>
 <select class="au_t3_form_multiple" name="i16" id="i16" size="5" multiple>
   <option value="1">test 1</option>
   <option value="2">test 2</option>
   <option value="3">test 3</option>
   <option value="4">test 4</option>
   <option value="5">test 5</option>
 </select>

Choose something

<label class="au_t3_form_label" for="i17">Choose something</label>
  <select name="i17" id="i17" class="au_t3_form_dropdown">
    <optgroup label="Microsoft Internet Explorer">
      <option value="4.x or higher">
        Microsoft internet explorer 4.x or higher
      </option>
      <option value="3.x">Microsoft Internet Explorer 3.x</option>
      <option value="2.x">Microsoft Internet Explorer 2.x</option>
      <option value="1.x">Microsoft Internet Explorer 1.x</option>
    </optgroup>
    <optgroup label="Netscape Navigator">
      <option value="4.x or higher">
        Netscape Navigator 4.x or higher
      </option>
      <option value="3.x">Netscape Navigator 3.x</option>
      <option value="2.x">Netscape Navigator 2.x</option>
      <option value="1.x">Netscape Navigator 1.x</option>
    </optgroup>
    <optgroup label="Firefox">
      <option value="3.x or higher">Firefox 1.x</option>
    </optgroup>
    <optgroup label="Opera">
      <option value="3.x or higher">Opera 3.x or higher</option>
      <option value="2.x">Opera 2.x</option>
    </optgroup>
    <option>other</option>
  </select>

Submit buttons

The <label> element is not needed nor required with submit buttons, since these already have an implied value attribute which describes their behaviour. Please also note that we highly advise against using any form of"clear form" or "reset form"concept - they clutter both layout and usability

<input class="au_t3_form_submit" name="i18" type="submit" value="Cancel action" />&nbsp;&nbsp;
<input class="au_t3_form_submit" name="i19" type="button" value="Save action" />

Revised 23.09.2025

Marianne Dammand Iversen