Embed

• 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.

Audio

<audio controls="">
  <source src="http://www.w3schools.com/tags/horse.ogg" type="audio/ogg">
  <source src="http://www.w3schools.com/tags/horse.mp3" type="audio/mpeg">  Your browser does not support the audio element.
</audio>

Vidéo

<video width="320" height="240" controls="">
  <source src="http://www.w3schools.com/tags/movie.mp4" type="video/mp4">
  <source src="http://www.w3schools.com/tags/movie.ogg" type="video/ogg">  Your browser does not support the video tag.
</video>

Iframe

<iframe width="640" height="360" src="https://www.youtube.com/embed/bJ9r8LMU9bQ" frameborder="0" allowfullscreen></iframe>

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>

Typographie

• 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 titres.

Balises de titre

<h1>Balise H1</h1>
<h2>Balise H2</h2>
<h3>Balise H3</h2>
<h4>Balise H4</h3>
<h5>Balise H5</h4>
<h6>Balise H6</h5>

Blocs de textes

<h1>L'albatros</h1>
<p>Souvent, pour s'amuser, les hommes d'équipage prennent des albatros, vastes oiseaux des mers, qui suivent, indolents compagnons de voyage, le navire glissant sur les gouffres amers.</p>
<p>A peine les ont-ils déposés sur les planches, que ces rois de l'azur, maladroits et honteux, laissent piteusement leurs grandes ailes blanches comme des avirons traîner à côté d'eux.</p>
<p>Ce voyageur ailé, comme il est gauche et veule ! Lui, naguère si beau, qu'il est comique et laid ! L'un agace son bec avec un brûle-gueule, L'autre mime, en boitant, l'infirme qui volait !</p>
<p>Le Poète est semblable au prince des nuées qui hante la tempête et se rit de l'archer ; exilé sur le sol au milieu des huées, ses ailes de géant l'empêchent de marcher.</p>
<p>Charles Baudelaire : <em>Les Fleurs du mal</em></p>

Éléments de typographie

<p>Élement de <a href="#">lien</a> et de <a href="http://example.com" target="_blank">lien externe</a></p>
<p>Élement <abbr>abbr</abbr> et <abbr title="Abbreviation">abbr</abbr> avec un attibut title</p>
<p>Élement <acronym title="Mon attribut title">ACRONYM</acronym></p>
<p>Élement <b>b</b></p>
<p>Élement <cite>cite</cite></p>
<p>Élement <code>code</code></p>
<p>Élement <data value="666">data</data></p>
<p>Élement <del>del</del></p>
<p>Élement <dfn>dfn</dfn> et <dfn title="Mon attribut title">dfn avec attribut title</dfn></p>
<p>Élement <em>em</em><p>
<p>Élement <i>i</i></p>
<p>Élement <ins>ins</ins></p>
<p>Élement <kbd>kbd</kbd></p>
<p>Élement <mark>mark</mark></p>
<p>Élement <q>q</q></p>
<p>Élement <s>s</s></p>
<p>Élement <samp>samp</samp></p>
<p>Élement <small>small</small></p>
<p>Élement <span>span</span></p>
<p>Élement <strong>strong</strong></p>
<p>Élement <sub>sub</sub></p>
<p>Élement <sup>sup</sup></p>
<p>Élement <time datatime="2005-05-15 19:00">time</time></p>
<p>Élement <u>u</u></p>

Éléments de liste

Liste ordonnée

<ul>
  <li>Élement de liste 1</li>
  <li>Élement de liste 2</li>
  <li>Élement de liste 3
    <ul>
      <li>Élement de liste 3.1</li>
      <li>Élement de liste 3.2
        <ul>
          <li>Élement de liste 3.2.1</li>
          <li>Élement de liste 3.2.2</li>
        </ul>
      </li>
      <li>Élement de liste 3.3</li>
    </ul>
  </li>
  <li>Élement de liste 4</li>
</ul>

Liste non ordonnée

<ol>
  <li>Élement de liste 1</li>
  <li>Élement de liste 2</li>
  <li>Élement de liste 3
    <ol>
      <li>Élement de liste 3.1</li>
      <li>Élement de liste 3.2
        <ol>
          <li>Élement de liste 3.2.1</li>
          <li>Élement de liste 3.2.2</li>
        </ol>
      </li>
      <li>Élement de liste 3.3</li>
    </ol>
  </li>
  <li>Élement de liste 4</li>
</ol>

Liste de définition

<dl>
  <dt>Définition 1</dt>
  <dd>Description de la défnition 1</dd>
  <dt>Définition 2</dt>
  <dd>Description de la défnition 2</dd>
</dl>

Tableau

<table cellspacing="0" cellpadding="0">
  <caption>Élement caption</caption>
  <thead>
    <tr>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
      <th>Table Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Division 1</td>
      <td>Division 2</td>
      <td>Division 3</td>
    </tr>
    <tr class="even">
      <td>Division 1</td>
      <td>Division 2</td>
      <td>Division 3</td>
    </tr>
    <tr>
      <td>Division 1</td>
      <td>Division 2</td>
      <td>Division 3</td>
    </tr>
    <tr>
      <td colspan="3">A row with a cell spanning all 3 columns</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Table Footer 1</th>
      <th>Table Footer 2</th>
      <th>Table Footer 3</th>
    </tr>
  </tfoot>
</table>