Skip to content

Commit

Permalink
fr: Format /web/html using Prettier (part 3)
Browse files Browse the repository at this point in the history
  • Loading branch information
@queengooborg
queengooborg committed Jul 26, 2023
1 parent c44cdda commit 9e681a5
Show file tree
Hide file tree
Showing 88 changed files with 1,533 additions and 1,063 deletions.
32 changes: 23 additions & 9 deletions files/fr/web/html/element/input/image/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,8 +150,13 @@ Un élément `<input type="image">` est [un élément remplacé](/fr/docs/Web/CS
Prenons un exemple simple qui utilise les différentes fonctionnalités essentielles d'un tel bouton (et qui fonctionnent de la même façon que pour un élément `<img>`)&nbsp;:

```html
<input id="image" type="image" width="100" height="30" alt="Login"
src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png">
<input
id="image"
type="image"
width="100"
height="30"
alt="Login"
src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" />
```

{{EmbedLiveSample('', 600, 50)}}
Expand Down Expand Up @@ -199,14 +204,19 @@ L'exemple suivant affiche le même bouton qu'auparavant, cette fois-ci inclus da
<p>Connectez-vous à votre compte</p>
<div>
<label for="userId">Identifiant utilisateur</label>
<input type="text" id="userId" name="userId">
<input type="text" id="userId" name="userId" />
</div>
<div>
<label for="pwd">Mot de passe</label>
<input type="password" id="pwd" name="pwd">
<input type="password" id="pwd" name="pwd" />
</div>
<div>
<input id="image" type="image" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" alt="Login" width="100">
<input
id="image"
type="image"
src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
alt="Login"
width="100" />
</div>
</form>
```
Expand Down Expand Up @@ -243,16 +253,20 @@ Dans ce nouvel exemple, on adapte l'exemple précédent afin d'avoir plus de pla
<p>Connectez-vous à votre compte</p>
<div>
<label for="userId">Identifiant utilisateur</label>
<input type="text" id="userId" name="userId">
<input type="text" id="userId" name="userId" />
</div>
<div>
<label for="pwd">Mot de passe</label>
<input type="password" id="pwd" name="pwd">
<input type="password" id="pwd" name="pwd" />
</div>
<div>
<input id="image" type="image"
<input
id="image"
type="image"
src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
alt="Login" width="200" height="100">
alt="Login"
width="200"
height="100" />
</div>
</form>
```
Expand Down
180 changes: 120 additions & 60 deletions files/fr/web/html/element/input/index.md
View file

Large diffs are not rendered by default.

106 changes: 61 additions & 45 deletions files/fr/web/html/element/input/month/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ Il est possible de définir une valeur par défaut pour le contrôle en utilisan

```html
<label for="bday-month">Quel est le mois de votre naissance ?</label>
<input id="bday-month" type="month" name="bday-month" value="2017-06">
<input id="bday-month" type="month" name="bday-month" value="2017-06" />
```

{{EmbedLiveSample('', 600, 60)}}
Expand All @@ -72,12 +72,12 @@ Il est également possible de manipuler la date en JavaScript grâce à la propr

```html
<label for="bday-month">Quel est le mois de votre naissance ?</label>
<input id="bday-month" type="month" name="bday-month" value="2017-06">
<input id="bday-month" type="month" name="bday-month" value="2017-06" />
```

```js
let monthControl = document.querySelector('input[type="month"]');
monthControl.value = '1978-06';
monthControl.value = "1978-06";
```

{{EmbedLiveSample("", 600, 60)}}
Expand Down Expand Up @@ -131,7 +131,7 @@ Dans son expression la plus simple, il suffit d'employer un élément `<input>`
```html
<form>
<label for="bday-month">Quel est le mois de votre naissance ?</label>
<input id="bday-month" type="month" name="bday-month">
<input id="bday-month" type="month" name="bday-month" />
</form>
```

Expand All @@ -144,8 +144,12 @@ On peut utiliser les attributs [`min`](/fr/docs/Web/HTML/Element/Input#attr-min)
```html
<form>
<label for="bday-month">Quel est le mois de votre naissance ?</label>
<input id="bday-month" type="month" name="bday-month"
min="1900-01" max="2017-08">
<input
id="bday-month"
type="month"
name="bday-month"
min="1900-01"
max="2017-08" />
</form>
```

Expand All @@ -172,12 +176,17 @@ Prenons un exemple avec une période délimitée et un champ obligatoire&nbsp;:
<form>
<div>
<label for="month">À quel mois souhaitez-vous venir cet été ?</label>
<input id="month" type="month" name="month"
min="2017-06" max="2017-09" required>
<input
id="month"
type="month"
name="month"
min="2017-06"
max="2017-09"
required />
<span class="validity"></span>
</div>
<div>
<input type="submit" value="Envoyer le formulaire">
<input type="submit" value="Envoyer le formulaire" />
</div>
</form>
```
Expand Down Expand Up @@ -206,15 +215,15 @@ input + span {
padding-right: 30px;
}

input:invalid+span:after {
input:invalid + span:after {
position: absolute;
content: '✖';
content: "✖";
padding-left: 5px;
}

input:valid+span:after {
input:valid + span:after {
position: absolute;
content: '✓';
content: "✓";
padding-left: 5px;
}
```
Expand Down Expand Up @@ -242,14 +251,22 @@ Une façon de contourner ce problème consiste à utiliser l'attribut [`pattern`
```html
<form>
<div>
<label for="month">À quel mois souhaitez-vous venir cet été ? (utilisez le format yyyy-mm)</label>
<input id="month" type="month" name="month"
min="2017-06" max="2017-09" required
pattern="[0-9]{4}-[0-9]{2}">
<label for="month"
>À quel mois souhaitez-vous venir cet été ? (utilisez le format
yyyy-mm)</label
>
<input
id="month"
type="month"
name="month"
min="2017-06"
max="2017-09"
required
pattern="[0-9]{4}-[0-9]{2}" />
<span class="validity"></span>
</div>
<div>
<input type="submit" value="Envoyer le formulaire">
<input type="submit" value="Envoyer le formulaire" />
</div>
</form>
```
Expand All @@ -274,15 +291,15 @@ input + span {
padding-right: 30px;
}

input:invalid+span:after {
input:invalid + span:after {
position: absolute;
content: '✖';
content: "✖";
padding-left: 5px;
}

input:valid+span:after {
input:valid + span:after {
position: absolute;
content: '✓';
content: "✓";
padding-left: 5px;
}
```
Expand All @@ -301,7 +318,7 @@ Voici le fragment de code HTML utilisé&nbsp;:
<form>
<div class="nativeDatePicker">
<label for="month-visit">À quel mois souhaitez-vous venir cet été ?</label>
<input type="month" id="month-visit" name="month-visit">
<input type="month" id="month-visit" name="month-visit" />
<span class="validity"></span>
</div>
<p class="fallbackLabel">À quel mois souhaitez-vous venir cet été ?</p>
Expand All @@ -326,8 +343,7 @@ Voici le fragment de code HTML utilisé&nbsp;:
</span>
<span>
<label for="year">Année :</label>
<select id="year" name="year">
</select>
<select id="year" name="year"></select>
</span>
</div>
</div>
Expand All @@ -350,15 +366,15 @@ input + span {
padding-right: 30px;
}

input:invalid+span:after {
input:invalid + span:after {
position: absolute;
content: '✖';
content: "✖";
padding-left: 5px;
}

input:valid+span:after {
input:valid + span:after {
position: absolute;
content: '✓';
content: "✓";
padding-left: 5px;
}
```
Expand All @@ -367,27 +383,27 @@ Une partie intéressante du code est celle qui permet de détecter la prise en c

```js
// On définit des variables
let nativePicker = document.querySelector('.nativeDatePicker');
let fallbackPicker = document.querySelector('.fallbackDatePicker');
let fallbackLabel = document.querySelector('.fallbackLabel');
let nativePicker = document.querySelector(".nativeDatePicker");
let fallbackPicker = document.querySelector(".fallbackDatePicker");
let fallbackLabel = document.querySelector(".fallbackLabel");

let yearSelect = document.querySelector('#year');
let monthSelect = document.querySelector('#month');
let yearSelect = document.querySelector("#year");
let monthSelect = document.querySelector("#month");

// Par défaut on masque le sélecteur alternatif
fallbackPicker.style.display = 'none';
fallbackLabel.style.display = 'none';
fallbackPicker.style.display = "none";
fallbackLabel.style.display = "none";

// On teste si un nouveau contrôle est automatiquement
// converti en un champ texte
let test = document.createElement('input');
test.type = 'month';
let test = document.createElement("input");
test.type = "month";
// Si c'est le cas, on exécute le code dans ce bloc if
if(test.type === 'text') {
if (test.type === "text") {
// on masque le sélecteur natif et on masque le sélecteur alternatif
nativePicker.style.display = 'none';
fallbackPicker.style.display = 'block';
fallbackLabel.style.display = 'block';
nativePicker.style.display = "none";
fallbackPicker.style.display = "block";
fallbackLabel.style.display = "block";

// on génère les valeurs pour les années
populateYears();
Expand All @@ -400,9 +416,9 @@ function populateYears() {

// On ajoute l'année courante et les 100 années à venir
// dans l'élément <select> pour l'année
for(let i = 0; i <= 100; i++) {
let option = document.createElement('option');
option.textContent = year-i;
for (let i = 0; i <= 100; i++) {
let option = document.createElement("option");
option.textContent = year - i;
yearSelect.appendChild(option);
}
}
Expand Down
Loading

0 comments on commit 9e681a5

Please sign in to comment.