diff options
Diffstat (limited to 'files/fr/web/html/element/input/radio/index.md')
| -rw-r--r-- | files/fr/web/html/element/input/radio/index.md | 396 |
1 files changed, 187 insertions, 209 deletions
diff --git a/files/fr/web/html/element/input/radio/index.md b/files/fr/web/html/element/input/radio/index.md index 8b8fd78f46..c344792efe 100644 --- a/files/fr/web/html/element/input/radio/index.md +++ b/files/fr/web/html/element/input/radio/index.md @@ -8,98 +8,98 @@ tags: - Reference translation_of: Web/HTML/Element/input/radio --- -<div>{{HTMLRef}}</div> +{{HTMLRef}} -<p>Les éléments <code><input></code> dont l'attribut <code>type</code> vaut <strong><code>radio</code></strong> sont généralement utilisés pour construire des groupes d'options parmi lesquelles on ne peut choisir qu'une valeur. Les « boutons radio » sont représentés par des cercles remplis lorsqu'ils sont sélectionnés.</p> +Les éléments `<input>` dont l'attribut `type` vaut **`radio`** sont généralement utilisés pour construire des groupes d'options parmi lesquelles on ne peut choisir qu'une valeur. Les « boutons radio » sont représentés par des cercles remplis lorsqu'ils sont sélectionnés. -<div>{{EmbedInteractiveExample("pages/tabbed/input-radio.html", "tabbed-standard")}}</div> +{{EmbedInteractiveExample("pages/tabbed/input-radio.html", "tabbed-standard")}} -<p>On les appelle boutons radios par analogie avec les boutons qui étaient utilisés sur les anciens postes de radios.</p> +On les appelle boutons radios par analogie avec les boutons qui étaient utilisés sur les anciens postes de radios. -<div class="note"> -<p><strong>Note :</strong> <a href="/fr/docs/Web/HTML/Element/input/checkbox">Les cases à cocher (<em>checkboxes</em>)</a> ressemblent aux boutons radios. Toutefois, il existe une différence fondamentale : les boutons radio ne permettent de sélectionner qu'une seule option au sein d'un groupe alors que les cases à cocher permettent d'en sélectionner plusieurs.</p> -</div> +> **Note :** [Les cases à cocher (_checkboxes_)](/fr/docs/Web/HTML/Element/input/checkbox) ressemblent aux boutons radios. Toutefois, il existe une différence fondamentale : les boutons radio ne permettent de sélectionner qu'une seule option au sein d'un groupe alors que les cases à cocher permettent d'en sélectionner plusieurs. -<h2 id="Valeur">Valeur</h2> +## Valeur -<p>L'attribut <code>value</code> est une chaîne de caractères (un objet {{domxref("DOMString")}} au sens du DOM) qui contient la valeur du bouton radio. Cette valeur n'est pas montrée à l'utilisateur par le navigateur ou tout autre agent utilisateur, elle permet d'identifier l'option sélectionnée.</p> +L'attribut `value` est une chaîne de caractères (un objet {{domxref("DOMString")}} au sens du DOM) qui contient la valeur du bouton radio. Cette valeur n'est pas montrée à l'utilisateur par le navigateur ou tout autre agent utilisateur, elle permet d'identifier l'option sélectionnée. -<h3 id="Définir_un_groupe_de_boutons_radio">Définir un groupe de boutons radio</h3> +### Définir un groupe de boutons radio -<p>Pour définir un groupe de boutons radio, on leur donne le même nom via l'attribut {{htmlattrxref("name", "input")}}. Une fois qu'on a formé un groupe de boutons radio, on ne pourra sélectionner qu'une seule des options de ce groupes (cliquer sur une option désélectionnera automatiquement l'option précédemment choisie dans ce groupe).</p> +Pour définir un groupe de boutons radio, on leur donne le même nom via l'attribut {{htmlattrxref("name", "input")}}. Une fois qu'on a formé un groupe de boutons radio, on ne pourra sélectionner qu'une seule des options de ce groupes (cliquer sur une option désélectionnera automatiquement l'option précédemment choisie dans ce groupe). -<p>Il est possible d'avoir autant de groupes que nécessaire, il suffit que chaque groupe ait un nom (l'attribut <code>name</code>) unique.</p> +Il est possible d'avoir autant de groupes que nécessaire, il suffit que chaque groupe ait un nom (l'attribut `name`) unique. -<p>Ainsi, si on souhaite utiliser un formulaire afin de demander à l'utilisateur sa méthode de contact préférée, on pourra créer trois boutons radio avec l'attribut <code>name</code> qui vaut <code>contact</code> et pour lesquels l'attribut {{htmlattrxref("value", "input")}} varie : <code>email</code> pour le premier, <code>telephone</code> pour le deuxième et <code>courrier</code> pour le dernier. Cette valeur et le nom du groupe ne sont pas affichés (ce sera le rôle de l'élément {{HTMLElement("label")}} de fournir un intitulé).</p> +Ainsi, si on souhaite utiliser un formulaire afin de demander à l'utilisateur sa méthode de contact préférée, on pourra créer trois boutons radio avec l'attribut `name` qui vaut `contact` et pour lesquels l'attribut {{htmlattrxref("value", "input")}} varie : `email` pour le premier, `telephone` pour le deuxième et `courrier` pour le dernier. Cette valeur et le nom du groupe ne sont pas affichés (ce sera le rôle de l'élément {{HTMLElement("label")}} de fournir un intitulé). -<p>Voici le fragment de code HTML correspondant à cet exemple :</p> +Voici le fragment de code HTML correspondant à cet exemple : -<pre class="brush: html"><form> - <p>Veuillez choisir la meilleure méthode pour vous contacter :</p> - <div> - <input type="radio" id="contactChoice1" - name="contact" value="email"> - <label for="contactChoice1">Email</label> +```html +<form> + <p>Veuillez choisir la meilleure méthode pour vous contacter :</p> + <div> + <input type="radio" id="contactChoice1" + name="contact" value="email"> + <label for="contactChoice1">Email</label> - <input type="radio" id="contactChoice2" - name="contact" value="telephone"> - <label for="contactChoice2">Téléphone</label> + <input type="radio" id="contactChoice2" + name="contact" value="telephone"> + <label for="contactChoice2">Téléphone</label> - <input type="radio" id="contactChoice3" - name="contact" value="courrier"> - <label for="contactChoice3">Courrier</label> - </div> - <div> - <button type="submit">Envoyer</button> - </div> -</form></pre> + <input type="radio" id="contactChoice3" + name="contact" value="courrier"> + <label for="contactChoice3">Courrier</label> + </div> + <div> + <button type="submit">Envoyer</button> + </div> +</form> +``` -<p>On voit ici trois boutons radio dont l'attribut <code>name</code> vaut <code>contact</code> et dont chacun possède une valeur unique pour l'attribut <code>value</code>. Ils possèdent également un identifiant unique ({{domxref("Element.id", "id")}}) qui est utilisé pour rattacher le libellé fourni par l'élément {{HTMLElement("label")}} via l'attribut {{htmlattrxref("for", "label")}}.</p> +On voit ici trois boutons radio dont l'attribut `name` vaut `contact` et dont chacun possède une valeur unique pour l'attribut `value`. Ils possèdent également un identifiant unique ({{domxref("Element.id", "id")}}) qui est utilisé pour rattacher le libellé fourni par l'élément {{HTMLElement("label")}} via l'attribut {{htmlattrxref("for", "label")}}. -<p>Voici le résultat obtenu :</p> +Voici le résultat obtenu : -<p>{{EmbedLiveSample('Définir_un_groupe_de_boutons_radio', 600, 130)}}</p> +{{EmbedLiveSample('Définir_un_groupe_de_boutons_radio', 600, 130)}} -<h3 id="La_représentation_des_données_d’un_groupe_de_boutons_radio">La représentation des données d’un groupe de boutons radio</h3> +### La représentation des données d’un groupe de boutons radio -<p>Lorsqu'on envoie le formulaire précédent avec une option sélectionnée, les données du formulaire contiendront une valeur sous la forme <code>"contact=<em>valeur</em>"</code>. Ainsi, si l'utilisateur clique sur le bouton radio « Téléphone » et envoie le formulaire, les données du formulaire contiendront <code>"contact=telephone"</code>.</p> +Lorsqu'on envoie le formulaire précédent avec une option sélectionnée, les données du formulaire contiendront une valeur sous la forme `"contact=valeur"`. Ainsi, si l'utilisateur clique sur le bouton radio « Téléphone » et envoie le formulaire, les données du formulaire contiendront `"contact=telephone"`. -<p>Si l'attribut <code>value</code> n'est pas fourni dans le document HTML, la valeur par défaut utilisée sera <code>on</code> pour l'ensemble du groupe. Si c'était le cas avec notre exemple précédent et que l'utilisateur avait cliqué sur l'option « Téléphone » et envoyé le formulaire, les données envoyées auraient contenu <code>"contact=on"</code> ce qui ne s'avère pas très utile. Aussi, mieux vaut ne pas oublier les attributs <code>value</code> !</p> +Si l'attribut `value` n'est pas fourni dans le document HTML, la valeur par défaut utilisée sera `on` pour l'ensemble du groupe. Si c'était le cas avec notre exemple précédent et que l'utilisateur avait cliqué sur l'option « Téléphone » et envoyé le formulaire, les données envoyées auraient contenu `"contact=on"` ce qui ne s'avère pas très utile. Aussi, mieux vaut ne pas oublier les attributs `value` ! -<div class="note"> -<p><strong>Note :</strong> Si aucun bouton radio n'est sélectionné au moment de l'envoi du formulaire, le groupe radio n'est pas inclus dans les données envoyées par le formulaire car il n'y a aucune valeur à fournir.</p> -</div> +> **Note :** Si aucun bouton radio n'est sélectionné au moment de l'envoi du formulaire, le groupe radio n'est pas inclus dans les données envoyées par le formulaire car il n'y a aucune valeur à fournir. -<p>Généralement, on souhaite qu'au moins une option soit sélectionné parmi les boutons d'un groupe et on inclue donc souvent un attribut <code>checked</code> sur l'un des boutons afin d'avoir une option sélectionnée par défaut.</p> +Généralement, on souhaite qu'au moins une option soit sélectionné parmi les boutons d'un groupe et on inclue donc souvent un attribut `checked` sur l'un des boutons afin d'avoir une option sélectionnée par défaut. -<p>Ajoutant un peu de code à notre exemple pour étudier les données générées par ce formulaire. On modifie le code HTML afin d'ajouter un bloc {{HTMLElement("pre")}} qui contiendra les données produites par le formulaire :</p> +Ajoutant un peu de code à notre exemple pour étudier les données générées par ce formulaire. On modifie le code HTML afin d'ajouter un bloc {{HTMLElement("pre")}} qui contiendra les données produites par le formulaire : -<pre class="brush: html"><form> - <p>Veuillez choisir la meilleure méthode pour vous contacter :</p> - <div> - <input type="radio" id="contactChoice1" - name="contact" value="email"> - <label for="contactChoice1">Email</label> +```html +<form> + <p>Veuillez choisir la meilleure méthode pour vous contacter :</p> + <div> + <input type="radio" id="contactChoice1" + name="contact" value="email"> + <label for="contactChoice1">Email</label> - <input type="radio" id="contactChoice2" - name="contact" value="telephone"> - <label for="contactChoice2">Téléphone</label> + <input type="radio" id="contactChoice2" + name="contact" value="telephone"> + <label for="contactChoice2">Téléphone</label> - <input type="radio" id="contactChoice3" - name="contact" value="courrier"> - <label for="contactChoice3">Courrier</label> - </div> - <div> - <button type="submit">Envoyer</button> - </div> -</form> -<pre id="log"> -</pre> + <input type="radio" id="contactChoice3" + name="contact" value="courrier"> + <label for="contactChoice3">Courrier</label> + </div> + <div> + <button type="submit">Envoyer</button> + </div> +</form> +<pre id="log"> </pre> +``` -<p>Ensuite, on ajoute du code <a href="/fr/docs/Web/JavaScript">JavaScript</a> pour rattacher un gestionnaire d'évènement sur l'évènement {{event("submit")}} qui est déclenché lorsque l'utilisateur clique sur le bouton « Envoyer » :</p> +Ensuite, on ajoute du code [JavaScript](/fr/docs/Web/JavaScript) pour rattacher un gestionnaire d'évènement sur l'évènement {{event("submit")}} qui est déclenché lorsque l'utilisateur clique sur le bouton « Envoyer » : -<pre class="brush: js">var form = document.querySelector("form"); +```js +var form = document.querySelector("form"); var log = document.querySelector("#log"); form.addEventListener("submit", function(event) { @@ -110,122 +110,112 @@ form.addEventListener("submit", function(event) { }; log.innerText = output; event.preventDefault(); -}, false);</pre> - -<p>Vous pouvez manipuler cet exemple et voir qu'il n'y a jamais plus 'un résultat pour le groupe <code>"contact"</code>.</p> - -<p>{{EmbedLiveSample("La_représentation_des_données_d’un_groupe_de_boutons_radio", 600, 130)}}</p> - -<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> - -<p>En complément des attributs partagés par l'ensemble des éléments {{HTMLElement("input")}}, les boutons radio peuvent utiliser les attributs suivants :</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Attribut</th> - <th scope="col">Definition</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>{{anch("checked")}}</code></td> - <td>Un attribut booléen qui indique si le bouton radio est l'élément sélectionné du groupe.</td> - </tr> - <tr> - <td><code>{{anch("value")}}</code></td> - <td>Une chaîne à utiliser comme valeur pour le bouton radio lors de l'envoi du formulaire si ce bouton est choisi.</td> - </tr> - </tbody> -</table> +}, false); +``` + +Vous pouvez manipuler cet exemple et voir qu'il n'y a jamais plus 'un résultat pour le groupe `"contact"`. + +{{EmbedLiveSample("La_représentation_des_données_d’un_groupe_de_boutons_radio", 600, 130)}} + +## Attributs supplémentaires + +En complément des attributs partagés par l'ensemble des éléments {{HTMLElement("input")}}, les boutons radio peuvent utiliser les attributs suivants : -<h3 id="htmlattrdef(checked)">{{htmlattrdef("checked")}}</h3> +| Attribut | Definition | +| -------------------------- | -------------------------------------------------------------------------------------------------------------- | +| `{{anch("checked")}}` | Un attribut booléen qui indique si le bouton radio est l'élément sélectionné du groupe. | +| `{{anch("value")}}` | Une chaîne à utiliser comme valeur pour le bouton radio lors de l'envoi du formulaire si ce bouton est choisi. | -<p>Un attribut booléen qui indique si c'est ce champ radio qui est sélectionné parmi le groupe.</p> +### {{htmlattrdef("checked")}} -<p>À la différence des autres navigateurs, Firefox conservera <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">l'état coché dynamique</a> d'un bouton radio au fur et à mesure des chargements de la page. On pourra utiliser l'attribut {{htmlattrxref("autocomplete","input")}} afin de contrôler cette fonctionnalité.</p> +Un attribut booléen qui indique si c'est ce champ radio qui est sélectionné parmi le groupe. -<h3 id="htmlattrdef(value)">{{htmlattrdef("value")}}</h3> +À la différence des autres navigateurs, Firefox conservera [l'état coché dynamique](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) d'un bouton radio au fur et à mesure des chargements de la page. On pourra utiliser l'attribut {{htmlattrxref("autocomplete","input")}} afin de contrôler cette fonctionnalité. -<p>L'attribut <code>value</code> est partagé par l'ensemble des types d'élément {{HTMLElement("input")}}. Dans le cas d'un bouton radio, il a un rôle spécifique et permet d'associer un texte qui sera envoyé avec le formulaire pour représenter la valeur sélectionnée. Si la valeur de <code>value</code> n'est pas définie, ce sera la chaîne de caractères <code>"on"</code> qui sera envoyée.</p> +### {{htmlattrdef("value")}} -<h2 id="Utiliser_les_boutons_radio">Utiliser les boutons radio</h2> +L'attribut `value` est partagé par l'ensemble des types d'élément {{HTMLElement("input")}}. Dans le cas d'un bouton radio, il a un rôle spécifique et permet d'associer un texte qui sera envoyé avec le formulaire pour représenter la valeur sélectionnée. Si la valeur de `value` n'est pas définie, ce sera la chaîne de caractères `"on"` qui sera envoyée. -<p>Nous avons déjà vu certaines techniques ci-avant. Voyons désormais d'autres fonctionnalités fréquemment utilisées avec ces boutons.</p> +## Utiliser les boutons radio -<h3 id="Sélectionner_un_bouton_radio_par_défaut">Sélectionner un bouton radio par défaut</h3> +Nous avons déjà vu certaines techniques ci-avant. Voyons désormais d'autres fonctionnalités fréquemment utilisées avec ces boutons. -<p>Pour qu'un bouton radio soit sélectionné par défaut, on ajoutera l'attribut booléen <code>checked</code>. Voici ce que ça donne pour l'exemple précédent, légèrement modifié :</p> +### Sélectionner un bouton radio par défaut -<pre class="brush: html"><form> - <p>Veuillez choisir la meilleure méthode pour vous contacter :</p> - <div> - <input type="radio" id="contactChoice1" - name="contact" value="email" checked> - <label for="contactChoice1">Email</label> +Pour qu'un bouton radio soit sélectionné par défaut, on ajoutera l'attribut booléen `checked`. Voici ce que ça donne pour l'exemple précédent, légèrement modifié : - <input type="radio" id="contactChoice2" - name="contact" value="telephone"> - <label for="contactChoice2">Téléphone</label> +```html +<form> + <p>Veuillez choisir la meilleure méthode pour vous contacter :</p> + <div> + <input type="radio" id="contactChoice1" + name="contact" value="email" checked> + <label for="contactChoice1">Email</label> - <input type="radio" id="contactChoice3" - name="contact" value="courrier"> - <label for="contactChoice3">Courrier</label> - </div> - <div> - <button type="submit">Envoyer</button> - </div> -</form></pre> + <input type="radio" id="contactChoice2" + name="contact" value="telephone"> + <label for="contactChoice2">Téléphone</label> -<p>{{EmbedLiveSample('Sélectionner_un_bouton_radio_par_défaut', 600, 130)}}</p> + <input type="radio" id="contactChoice3" + name="contact" value="courrier"> + <label for="contactChoice3">Courrier</label> + </div> + <div> + <button type="submit">Envoyer</button> + </div> +</form> +``` -<p>Ici, c'est le premier bouton radio qui sera sélectionné par défaut.</p> +{{EmbedLiveSample('Sélectionner_un_bouton_radio_par_défaut', 600, 130)}} -<div class="note"> -<p><strong>Note :</strong> Si l'attribut <code>checked</code> est placé sur plus d'un bouton, c'est le dernier bouton contenant l'attribut qui sera sélectionné. C'est donc l'ordre des valeurs qui déterminera la valeur par défaut. Pour rappel, il ne peut y avoir qu'un seul bouton radio du groupe qui soit sélectionné à un instant donné.</p> -</div> +Ici, c'est le premier bouton radio qui sera sélectionné par défaut. -<h3 id="Fournir_une_plus_grande_zone_de_sélection">Fournir une plus grande zone de sélection</h3> +> **Note :** Si l'attribut `checked` est placé sur plus d'un bouton, c'est le dernier bouton contenant l'attribut qui sera sélectionné. C'est donc l'ordre des valeurs qui déterminera la valeur par défaut. Pour rappel, il ne peut y avoir qu'un seul bouton radio du groupe qui soit sélectionné à un instant donné. -<p>Dans les exemples précédents, vous avez peut-être constaté qu'en cliquant sur l'élément {{htmlelement("label")}} associé au bouton radio, cela sélectionnait la valeur de ce bouton. C'est une fonctionnalité HTML très pratique qui facilite la sélection des options, notamment sur les écrans de petites tailles comme ceux des smartphones.</p> +### Fournir une plus grande zone de sélection -<p>Au-delà des raisons relatives à l'accessibilité, il s'agit d'un autre argument en faveur de la bonne utilisation des éléments <code><label></code> dans les formulaires.</p> +Dans les exemples précédents, vous avez peut-être constaté qu'en cliquant sur l'élément {{htmlelement("label")}} associé au bouton radio, cela sélectionnait la valeur de ce bouton. C'est une fonctionnalité HTML très pratique qui facilite la sélection des options, notamment sur les écrans de petites tailles comme ceux des smartphones. -<h2 id="Validation">Validation</h2> +Au-delà des raisons relatives à l'accessibilité, il s'agit d'un autre argument en faveur de la bonne utilisation des éléments `<label>` dans les formulaires. -<p>Il n'existe pas de contrainte de validation particulière pour les boutons radio.</p> +## Validation -<h2 id="Mettre_en_forme_les_boutons_radio">Mettre en forme les boutons radio</h2> +Il n'existe pas de contrainte de validation particulière pour les boutons radio. -<p>L'exemple qui suit est une version légèrement plus détaillée de l'exemple précédent qui contient une mise en forme et une meilleure sémantique grâce aux éléments HTML utilisés :</p> +## Mettre en forme les boutons radio -<pre class="brush: html"><form> - <fieldset> - <legend>Veuillez choisir la meilleure méthode pour vous contacter :</legend> - <div> - <input type="radio" id="contactChoice1" - name="contact" value="email" checked> - <label for="contactChoice1">Email</label> +L'exemple qui suit est une version légèrement plus détaillée de l'exemple précédent qui contient une mise en forme et une meilleure sémantique grâce aux éléments HTML utilisés : - <input type="radio" id="contactChoice2" - name="contact" value="telephone"> - <label for="contactChoice2">Téléphone</label> +```html +<form> + <fieldset> + <legend>Veuillez choisir la meilleure méthode pour vous contacter :</legend> + <div> + <input type="radio" id="contactChoice1" + name="contact" value="email" checked> + <label for="contactChoice1">Email</label> - <input type="radio" id="contactChoice3" - name="contact" value="courrier"> - <label for="contactChoice3">Courrier</label> - </div> - <div> - <button type="submit">Envoyer</button> - </div> - </fieldset> -</form></pre> + <input type="radio" id="contactChoice2" + name="contact" value="telephone"> + <label for="contactChoice2">Téléphone</label> -<p>On voit ici peu de modifications mais notamment l'ajout d'éléments {{htmlelement("fieldset")}} et {{htmlelement("legend")}} qui permettent de grouper les options (à la fois pour la mise en forme et pour la sémantique du document).</p> + <input type="radio" id="contactChoice3" + name="contact" value="courrier"> + <label for="contactChoice3">Courrier</label> + </div> + <div> + <button type="submit">Envoyer</button> + </div> + </fieldset> +</form> +``` -<p>La feuille de style CSS utilisée est la suivante :</p> +On voit ici peu de modifications mais notamment l'ajout d'éléments {{htmlelement("fieldset")}} et {{htmlelement("legend")}} qui permettent de grouper les options (à la fois pour la mise en forme et pour la sémantique du document). -<pre class="brush: css">html { +La feuille de style CSS utilisée est la suivante : + +```css +html { font-family: sans-serif; } @@ -280,74 +270,62 @@ button:active { background-color: white; color: black; outline: 1px solid black; -}</pre> +} +``` -<p>La propriété utilisée la plus notable est {{cssxref("-moz-appearance")}} (utilisée avec certains préfixes navigateur). Par défaut, les boutons radios (ainsi que les cases à cocher) sont mis en forme avec l'apparence native liée au système d'exploitation sous-jacente. Avec <code>appearance: none</code>, on peut passer outre cette mise en forme native et créer ses propres styles pour ces boutons. Ici, nous avons utilisé {{cssxref("border")}} et {{cssxref("border-radius")}} avec {{cssxref("transition")}} afin de créer une animation lors de la sélection. On utilise également la pseudo-classe {{cssxref(":checked")}} pour définir l'apparence du bouton radio lorsqu'il est sélectionné.</p> +La propriété utilisée la plus notable est {{cssxref("-moz-appearance")}} (utilisée avec certains préfixes navigateur). Par défaut, les boutons radios (ainsi que les cases à cocher) sont mis en forme avec l'apparence native liée au système d'exploitation sous-jacente. Avec `appearance: none`, on peut passer outre cette mise en forme native et créer ses propres styles pour ces boutons. Ici, nous avons utilisé {{cssxref("border")}} et {{cssxref("border-radius")}} avec {{cssxref("transition")}} afin de créer une animation lors de la sélection. On utilise également la pseudo-classe {{cssxref(":checked")}} pour définir l'apparence du bouton radio lorsqu'il est sélectionné. -<p>Cette méthode n'est pas exempte d'inconvénient : <code>appearance</code> fonctionne correctement pour une mise en forme simple mais peut se comporter de façons différentes selon les navigateurs et elle ne fonctionne pas du tout avec Internet Explorer. Attention donc à tester votre site dans les différents navigateurs.</p> +Cette méthode n'est pas exempte d'inconvénient : `appearance` fonctionne correctement pour une mise en forme simple mais peut se comporter de façons différentes selon les navigateurs et elle ne fonctionne pas du tout avec Internet Explorer. Attention donc à tester votre site dans les différents navigateurs. -<p>{{EmbedLiveSample('Mettre_en_forme_les_boutons_radio', 600, 120)}}</p> +{{EmbedLiveSample('Mettre_en_forme_les_boutons_radio', 600, 120)}} -<p>De plus, la légende et le bouton d'envoi ont été mis en forme pour avoir un contraste marqué. Ce n'est pas peut-être pas la mise en forme idéale pour toutes les applications web mais cela illustre certaines des possibilités.</p> +De plus, la légende et le bouton d'envoi ont été mis en forme pour avoir un contraste marqué. Ce n'est pas peut-être pas la mise en forme idéale pour toutes les applications web mais cela illustre certaines des possibilités. -<h2 id="Résumé_technique">Résumé technique</h2> +## Résumé technique <table class="properties"> - <tbody> - <tr> - <td><strong>{{anch("Valeur")}}</strong></td> - <td>Une chaîne de caractères {{domxref("DOMString")}} qui représente la valeur du bouton radio.</td> - </tr> - <tr> - <td><strong>Évènements</strong></td> - <td>{{event("change")}} et {{event("input")}}</td> - </tr> - <tr> - <td><strong>Attributs pris en charge</strong></td> - <td>{{htmlattrxref("checked", "input")}}</td> - </tr> - <tr> - <td><strong>Attributs IDL</strong></td> - <td><code>checked</code> et <code>value</code></td> - </tr> - <tr> - <td><strong>Méthodes</strong></td> - <td>{{domxref("HTMLInputElement.select", "select()")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td> + Une chaîne de caractères {{domxref("DOMString")}} qui représente + la valeur du bouton radio. + </td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td>{{event("change")}} et {{event("input")}}</td> + </tr> + <tr> + <td><strong>Attributs pris en charge</strong></td> + <td>{{htmlattrxref("checked", "input")}}</td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>checked</code> et <code>value</code></td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td> + {{domxref("HTMLInputElement.select", "select()")}} + </td> + </tr> + </tbody> </table> -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th>Spécification</th> - <th>État</th> - <th>Commentaires</th> - </tr> - <tr> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'forms.html#radio-button-state-(type=radio)', '<input type="radio">')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'forms.html#radio-button-state-(type=radio)', '<input type="radio">')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | +| | | | +| {{SpecName('HTML WHATWG', 'forms.html#radio-button-state-(type=radio)', '<input type="radio">')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'forms.html#radio-button-state-(type=radio)', '<input type="radio">')}} | {{Spec2('HTML5 W3C')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("html.elements.input.input-radio")}}</p> +{{Compat("html.elements.input.input-radio")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'élément {{HTMLElement("input")}} et l'interface {{domxref("HTMLInputElement")}} du DOM qui est implémentée par cet élément</li> - <li>L'interface {{domxref("RadioNodeList")}} qui décrit une liste de boutons radio</li> -</ul> +- L'élément {{HTMLElement("input")}} et l'interface {{domxref("HTMLInputElement")}} du DOM qui est implémentée par cet élément +- L'interface {{domxref("RadioNodeList")}} qui décrit une liste de boutons radio |