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 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>
<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 width="640" height="360" src="https://www.youtube.com/embed/bJ9r8LMU9bQ" frameborder="0" allowfullscreen></iframe>
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>
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.
<h1>Balise H1</h1>
<h2>Balise H2</h2>
<h3>Balise H3</h2>
<h4>Balise H4</h3>
<h5>Balise H5</h4>
<h6>Balise H6</h5>
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.
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.
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 !
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.
Charles Baudelaire : Les Fleurs du mal
<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>
Élement de lien et de lien externe
Élement abbr et abbr avec un attibut title
Élement ACRONYM
Élement b
Élement cite
Élement code
Élement data
Élement del
Élement dfn et dfn avec attribut title
Élement em
Élement i
Élement ins
Élement kbd
Élement mark
Élement q
Élement s
Élement samp
Élement small
Élement span
Élement strong
Élement sub
Élement sup
Élement
Élement u
<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>
<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>
<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>
<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>
| Table Header 1 | Table Header 2 | Table Header 3 |
|---|---|---|
| Division 1 | Division 2 | Division 3 |
| Division 1 | Division 2 | Division 3 |
| Division 1 | Division 2 | Division 3 |
| A row with a cell spanning all 3 columns | ||
| Table Footer 1 | Table Footer 2 | Table Footer 3 |
<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>