Styleguide

Formulaire

• v.0.0.1

Les éléments ci-dessous sont juste là à titre indicatif afin de voir le rendu des éléments sans style de module. Vous pouvez utiliser cette page pour voir si des effets de bords s'appliquent aux éléments des bases.

Vous devez utiliser les styles de composants définis sur cette page : Composants de formulaire.

<fieldset>
  <legend>Legend</legend>
  <p>The Form:</p>
  <form>
    <p>
      <label for="text_field">Text Field:</label>
      <br>
      <input id="text_field" type="text">
    </p>
    <p>
      <label for="text_field_disabled">Disabled Text Field:</label>
      <br>
      <input id="text_field_disabled" type="text" disabled="" value="I'm disabled">
    </p>
    <p>
      <label for="text_field_readonly">Readonly Text Field:</label>
      <br>
      <input id="text_field_readonly" type="text" readonly="" value="I'm readonly">
    </p>
    <p>
      <label for="text_area">Text Area:</label>
      <br>
      <textarea id="text_area"></textarea>
    </p>
    <p>
      <label for="text_area_disabled">Disabled Text Area:</label>
      <br>
      <textarea id="text_area_disabled" disabled="">I'm disabled</textarea>
    </p>
    <p>
      <label for="text_area">Readonly Text Area:</label>
      <br>
      <textarea id="text_area" readonly="">I'm readonly</textarea>
    </p>
    <p>
      <label for="select_element">Select Element:</label>
      <br>
      <select id="select_element">
        <optgroup label="Option Group 1">
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
        </optgroup>
        <optgroup label="Option Group 2">
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3" disabled="">Disabled Option</option>
        </optgroup>
      </select>
    </p>
    <p>
      <label for="select_element_disabled">Disabled Select Element:</label>
      <br>
      <select id="select_element_disabled" disabled="">
        <option value="1">Unselectable Option</option>
        <option value="2">This option should not even be seen</option>
      </select>
    </p>
    <p>Radio Buttons:
      <br>
      <label>
        <input class="radio" type="radio" name="radio_button" value="radio_1"> Radio 1
      </label>
      <br>
      <label>
        <input class="radio" type="radio" name="radio_button" value="radio_2"> Radio 2
      </label>
      <br>
      <label>
        <input class="radio" type="radio" name="radio_button" value="radio_3"> Radio 3
      </label>
      <br>
      <label>
        <input class="radio" type="radio" name="radio_button" value="radio_4" disabled=""> Radio Disabled
      </label>
      <br>
    </p>
    <p>Checkboxes:
      <br>
      <label>
        <input class="checkbox" type="checkbox" name="checkboxes" value="check_1"> Checkbox 1
      </label>
      <br>
      <label>
        <input class="checkbox" type="checkbox" name="checkboxes" value="check_2"> Checkbox 2
      </label>
      <br>
      <label>
        <input class="checkbox" type="checkbox" name="checkboxes" value="check_3"> Checkbox 3
      </label>
      <br>
      <label>
        <input class="checkbox" type="checkbox" name="checkboxes" value="check_4" disabled=""> Checkbox Disabled
      </label>
      <br>
    </p>
    <p>
      <label for="password">Password:</label>
      <br>
      <input class="password" id="password" type="password">
    </p>
    <p>
      <label for="file">File Input:</label>
      <br>
      <input class="file" id="file" type="file">
    </p>
    <h3>HTML5-specific Form Elements</h3>
    <p>
      <label for="email">Email:</label>
      <br>
      <input id="email" type="email">
    </p>
    <p>
      <label for="url">URL:</label>
      <br>
      <input id="url" type="url">
    </p>
    <p>
      <label for="tel">Telephone:</label>
      <br>
      <input id="tel" type="tel">
    </p>
    <p>
      <label for="number">Number:</label>
      <br>
      <input id="number" type="number" min="0" max="10" step="1" value="5">
    </p>
    <p>
      <label for="search">Search:</label>
      <br>
      <input id="search" type="search">
    </p>
    <p>
      <label for="date">Date:</label>
      <br>
      <input id="date" type="date">
    </p>
    <p>
      <label for="time">Time:</label>
      <br>
      <input id="time" type="time">
    </p>
    <p>
      <label for="color">Color:</label>
      <br>
      <input id="color" type="color">
    </p>
    <p>
      <label for="datalist">Datalist:</label>
      <br>
      <input id="datalist" list="browsers" name="browser" type="datalist">
      <datalist id="browsers">
        <option value="Internet Explorer"></option>
        <option value="Firefox"></option>
        <option value="Chrome"></option>
        <option value="Opera"></option>
        <option value="Safari"></option>
      </datalist>
    </p>
    <p>
      <label for="range">Range:</label>
      <br>
      <input id="range" type="range" name="points" min="1" max="10">
    </p>
    <p>
      <label for="output">Output:</label>
      <br>
      <output id="output" name="result">42</output>
    </p>
    <p>
      <label for="progress">Progress:</label>
      <br>
      <progress id="progress" value="65" max="100"></progress>
    </p>
    <p>
      <label for="meter">Meter:</label>
      <br>
      <meter id="meter" min="200" max="500" value="350">350 degrees</meter>
    </p>
    <p>
      <button>Button Element</button>
    </p>
    <p>
      <input type="reset" value="Clear">
    </p>
    <p>
      <input type="submit" value="Submit">
    </p>
  </form>
</fieldset>