Skip to content

Commit

Permalink
Removes deprecated parameters from macro
Browse files Browse the repository at this point in the history
  • Loading branch information
@Lou8is
Lou8is committed Jul 8, 2023
1 parent 8ee46de commit 5f80c4d
Show file tree
Hide file tree
Showing 3 changed files with 243 additions and 9 deletions.
158 changes: 157 additions & 1 deletion files/fr/learn/forms/how_to_structure_a_web_form/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -289,7 +289,163 @@ Mettons ces idées en pratique et construisons une structure de formulaire un pe

Vous pouvez voir le formulaire terminé en action ci‑dessous (vous le trouverez aussi sur GitHub — voir la [source](https://github.com/mdn/learning-area/blob/main/html/forms/html-form-structure/payment-form.html) payment-form.html et une exécution [directe](https://mdn.github.io/learning-area/html/forms/html-form-structure/payment-form.html)):

{{EmbedLiveSample("Un_formulaire_de_paiement","100%","620", "", "Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML/Exemple")}}
#### Exemple en direct

Consultez le [code source complet ici](/Learn/Forms/How_to_structure_a_web_form/Example)

```html hidden
<form>
<h1>Formulaire de paiement</h1>
<p>Les champs obligatoires sont suivis par <strong><abbr title="required">*</abbr></strong>.</p>
<section>
<h2>Informations de contact</h2>
<fieldset>
<legend>Qualité</legend>
<ul>
<li>
<label for="title_1">
<input type="radio" id="title_1" name="title" value="M." >
Monsieur
</label>
</li>
<li>
<label for="title_2">
<input type="radio" id="title_2" name="title" value="Mme.">
Madame
</label>
</li>
</ul>
</fieldset>
<p>
<label for="name">
<span>Nom :</span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="text" id="name" name="username">
</p>
<p>
<label for="mail">
<span>e-mail :</span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="email" id="mail" name="usermail">
</p>
<p>
<label for="password">
<span>Mot de passe :</span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="password" id="pwd" name="password">
</p>
</section>
<section>
<h2>Informations de paiement</h2>
<p>
<label for="card">
<span>Type de carte :</span>
</label>
<select id="card" name="usercard">
<option value="visa">Visa</option>
<option value="mc">Mastercard</option>
<option value="amex">American Express</option>
</select>
</p>
<p>
<label for="number">
<span>Numéro :</span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="text" id="number" name="cardnumber">
</p>
<p>
<label for="date">
<span>Validité :</span>
<strong><abbr title="required">*</abbr></strong>
<em>format mm/aa</em>
</label>
<input type="text" id="date" name="expiration">
</p>
</section>
<section>
<p> <button type="submit">Valider le paiement</button> </p>
</section>
</form>
```

```css hidden
h1 {
margin-top: 0;
}

ul {
margin: 0;
padding: 0;
list-style: none;
}

form {
margin: 0 auto;
width: 450px;
padding: 1em;
border: 1px solid #CCC;
border-radius: 1em;
}

div+div {
margin-top: 1em;
}

label span {
display: inline-block;
width: 120px;
text-align: right;
}

input, textarea {
font: 1em sans-serif;
width: 250px;
box-sizing: border-box;
border: 1px solid #999;
}

input[type=checkbox], input[type=radio] {
width: auto;
border: none;
}

input:focus, textarea:focus {
border-color: #000;
}

textarea {
vertical-align: top;
height: 5em;
resize: vertical;
}

fieldset {
width: 250px;
box-sizing: border-box;
margin-left: 146px;
border: 1px solid #999;
}

button {
margin: 20px 0 0 124px;
}

label {
position: relative;
}

label em {
position: absolute;
right: 5px;
top: 20px;
}
```

{{ EmbedLiveSample("Exemple_en_direct", "100%", "620") }}

## Résumé

Expand Down
80 changes: 79 additions & 1 deletion files/fr/learn/forms/your_first_form/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -258,7 +258,85 @@ Du côté du serveur, le script à l'URL « `/my-handling-form-page` » recevra

Félicitations ! Vous avez construit votre premier formulaire HTML. Il ressemble à ceci&nbsp;:

{{EmbedLiveSample("Un_formulaire_simple", "100%", "240", "", "Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML/Exemple")}}
```html hidden
<form action="/my-handling-form-page" method="post">
<div>
<label for="name">Nom&nbsp;:</label>
<input type="text" id="name" name="user_name" />
<div>
<div>
<label for="mail">E-mail&nbsp;:</label>
<input type="email" id="mail" name="user_email" />
</div>
<div>
<label for="msg">Message :</label>
<textarea id="msg" name="user_message"></textarea>
</div>
</form>
...
```

```css hidden
form {
/* Uniquement centrer le formulaire sur la page */
margin: 0 auto;
width: 400px;
/* Encadré pour voir les limites du formulaire */
padding: 1em;
border: 1px solid #CCC;
border-radius: 1em;
}

form div + div {
margin-top: 1em;
}

label {
/* Pour être sûrs que toutes les étiquettes ont même taille et sont correctement alignées */
display: inline-block;
width: 90px;
text-align: right;
}

input, textarea {
/* Pour s'assurer que tous les champs texte ont la même police.
Par défaut, les textarea ont une police monospace */
font: 1em sans-serif;

/* Pour que tous les champs texte aient la même dimension */
width: 300px;
box-sizing: border-box;

/* Pour harmoniser le look & feel des bordures des champs texte */
border: 1px solid #999;
}

input:focus, textarea:focus {
/* Pour souligner légèrement les éléments actifs */
border-color: #000;
}

textarea {
/* Pour aligner les champs texte multi‑ligne avec leur étiquette */
vertical-align: top;

/* Pour donner assez de place pour écrire du texte */
height: 5em;
}

.button {
/* Pour placer le bouton à la même position que les champs texte */
padding-left: 90px; /* même taille que les étiquettes */
}

button {
/* Cette marge supplémentaire représente grosso modo le même espace que celui
entre les étiquettes et les champs texte */
margin-left: .5em;
}
```

{{EmbedLiveSample("Resume", "100%", "240")}}

Toutefois, ce n'est qu'un début — il est désormais temps de regarder plus en détail. Les formulaires HTML sont bien plus puissants que ce que vous avez pu voir ici et les autres articles de ce guide vous aiderons à maîtriser le reste.

Expand Down
14 changes: 7 additions & 7 deletions files/fr/learn/html/introduction_to_html/getting_started/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@ textarea.onkeyup = function(){
};
```

{{ EmbedLiveSample('Apprentissage_actif_créer_votre_premier_élément_HTML', 700, 400, "", "")}}
{{ EmbedLiveSample('Apprentissage_actif_créer_votre_premier_élément_HTML', 700, 400)}}

### Éléments imbriqués

Expand Down Expand Up @@ -225,7 +225,7 @@ Prenez l'exemple suivant :

{{htmlelement("em")}} est un élément en ligne et, comme vous pouvez le voir ci-dessous, les trois premiers éléments s'affichent sur la même ligne sans qu'il n'y ait d'espace entre eux. Par contre, {{htmlelement("p")}} est un élément de niveau bloc, donc chaque élément apparaît sur une nouvelle ligne et un espace apparaît au-dessus et au-dessous de chacun d'eux (l'espacement est dû au [style CSS](/fr/docs/Learn/CSS/First_steps) par défaut du navigateur qui s'applique aux paragraphes).

{{ EmbedLiveSample('Éléments_bloc_vs_en_ligne', 700, 200, "", "") }}
{{ EmbedLiveSample('Éléments_bloc_vs_en_ligne', 700, 200) }}

> **Note :** HTML5 a redéfini les catégories d'éléments dans HTML5 : voir [catégories de contenu d'éléments](https://html.spec.whatwg.org/multipage/indices.html#element-content-categories). Bien que ces définitions soient plus précises et moins ambiguës que celles qui précèdent, elles sont beaucoup plus compliquées à comprendre que « block » et « inline ». Nous nous en tiendrons donc à ces dernières tout au long de ce sujet.
Expand All @@ -243,7 +243,7 @@ Tous les éléments ne suivent pas le modèle ci-dessus d'ouverture de balise, p

Cela affichera l'élément suivant sur votre page :

{{ EmbedLiveSample('Éléments_vides', 700, 300, "", "") }}
{{ EmbedLiveSample('Éléments_vides', 700, 300) }}

## Attributs

Expand Down Expand Up @@ -401,7 +401,7 @@ textarea.onkeyup = function(){
};
```

{{ EmbedLiveSample('Apprentissage_actif_ajouter_des_attributs_à_un_élément', 700, 400,"","") }}
{{ EmbedLiveSample('Apprentissage_actif_ajouter_des_attributs_à_un_élément', 700, 400) }}

### Les attributs booléens

Expand Down Expand Up @@ -441,7 +441,7 @@ Cependant, si nous ajoutons l'attribut `title` dans ce même style, cela devient
En effet, le navigateur interprétera mal la balise, pensant que l'attribut `title` est en fait quatre attributs — un attribut `title` avec la valeur « La » et trois attributs booléens, « `page` », « `d'accueil` » et « `Mozilla` ». Ce n'est évidemment pas ce qui était prévu et cela provoquera des erreurs ou un comportement inattendu dans le code, comme on le voit dans l'exemple en direct ci-dessous. Essayez de passer la souris sur le lien pour voir ce que le texte de `title` donne.
{{ EmbedLiveSample("Omettre_des_guillemets_autour_des_valeurs_dattribut", 700, 100, "", "") }}
{{ EmbedLiveSample("Omettre_des_guillemets_autour_des_valeurs_dattribut", 700, 100) }}
Nous vous recommandons de toujours inclure les guillemets afin d'éviter ce type de problèmes, mais aussi pour que le code soit plus lisible.

Expand Down Expand Up @@ -661,7 +661,7 @@ textarea.onkeyup = function(){
};
```

{{ EmbedLiveSample('Apprentissage_actif_ajouter_certaines_fonctionnalités_à_un_document_HTML', 700, 600, "", "") }}
{{ EmbedLiveSample('Apprentissage_actif_ajouter_certaines_fonctionnalités_à_un_document_HTML', 700, 600) }}

### Espace vide en HTML

Expand Down Expand Up @@ -722,7 +722,7 @@ Pour transformer une section de contenu dans votre fichier HTML en commentaire,

Comme vous pouvez le voir ci-dessous, le premier paragraphe apparaît dans le rendu de l'éditeur en ligne, mais le second n'apparaît pas.

{{ EmbedLiveSample('Commentaires_en_HTML', 700, 100, "", "") }}
{{ EmbedLiveSample('Commentaires_en_HTML', 700, 100) }}

## Résumé

Expand Down

0 comments on commit 5f80c4d

Please sign in to comment.