Skip to content

Commit b573cd0

Browse files
BodheemBodheem
authored
Ajout d'exemple d'attributs (#3)
* Added example code for attributes on an input element * Removed defer attribute from script loading * Added documentation for attribute page in README * Added input as children to label to show impact on behaviour in hierarchy
1 parent 9a70892 commit b573cd0

File tree

3 files changed

+68
-1
lines changed

3 files changed

+68
-1
lines changed

‎README.md

+11-1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ La page contient également des liens vers d'autres pages à travers des balises
1919
- le lien [./page2.html](./page2.html) qui est un chemin relatif vers le document [page2.html](./page2.html) (page secondaire)
2020
- le lien [https://polymtl.ca](https://polymtl.ca) qui est un chemin absolu vers le site web de Polytechnique Montréal.
2121
- l'attribut et sa valeur `target="_blank"` indiquent que le lien sera ouvert dans un nouvel onglet.
22+
- le lien [./attributes.html](./attributes.html) qui est un chemin relatif vers le document [attributes.html](./attributes.html) démontrant l'utilisation et les impacts des attributs HTML, notamment l'attribut `type` de la balise `<input>`.
2223

2324
## Manipulation du DOM avec JS
2425

@@ -69,4 +70,13 @@ if (serverResponse.status === 404) {
6970

7071
À titre d'exemple :
7172
- L'identifiant `1` retournera `La planette Tatooine a une population de 200000`.
72-
- L'identifiant `61` retournera `Aucune planète trouvée`.
73+
- L'identifiant `61` retournera `Aucune planète trouvée`.
74+
75+
76+
## Attributs HTML
77+
78+
Les attributs HTML sont des informations supplémentaires que l'on peut ajouter à une balise pour modifier son comportement ou son apparence. Certains attributs sont globaux et peuvent être utilisés sur n'importe quelle balise, tandis que d'autres sont spécifiques à une balise en particulier. Par exemple, l'attribut `id` est un attribut global qui peut être utilisé sur n'importe quelle balise, tandis que l'attribut `type` de la balise `<input>` est spécifique à cette balise.
79+
80+
Les attributs peuvent avoir un grand impact sur le rendu et le comportement d'une balise. Par exemple, l'attribut `type` de la balise `<input>` peut changer le type de champ de saisie affiché à l'écran et son comportement. À noter que l'affichage et le comportement des attributs peuvent varier d'un navigateur à l'autre : ouvrez la page dans différents navigateurs (ex : `Chrome` et `Firefox`) pour observer les différences.
81+
82+
Certains attributs peuvent avoir n'importe quelle valeur, tandis que d'autres ont des valeurs prédéfinies. Par exemple, l'attribut `type` de la balise `<input>` a des valeurs prédéfinies telles que `text`, `password`, `checkbox`, etc. Contrairement, l'attribut `id` peut avoir n'importe quelle valeur, mais celle-ci doit être unique dans le document. L'attribut `class` peut avoir plusieurs valeurs séparées par des espaces et ses valeurs peuvent se retrouver sur plusieurs éléments.

‎attributes.html

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="styles.css" />
8+
<title>Impact des attributs HTML</title>
9+
<style>
10+
label {
11+
margin: 10px;
12+
display:block
13+
}
14+
</style>
15+
</head>
16+
17+
<body>
18+
<header>
19+
<nav id="navigation">
20+
<ul>
21+
<li>
22+
<a href="https://polymtl.ca" target="_blank">Polytechnique</a>
23+
</li>
24+
<li><a href="./page2.html">Notre Page 2</a></li>
25+
<li><a href="./attributes.html">Attributs HTML</a></li>
26+
</ul>
27+
</nav>
28+
<h1>Exemples d'impacts des attributs sur un élément HTML</h1>
29+
</header>
30+
<main>
31+
<h2>Le champs de saisi &lt;input&gt; est très versatile à l'aide de son attribut <em>type</em> qui peut modifier son visuel ET son comportement.</h2>
32+
<h2>Notez que chaque navigateur implémente ces visuels et comportement à sa manière.<br> Ouvrez le sélecteur de couleur sur Firefox et Chrome pour voir les différences entre les 2 implémentations.</h2>
33+
<div id="label-container">
34+
<label>Texte :
35+
<input type="text">
36+
</label>
37+
<label>Mot de passe :
38+
<input type="password">
39+
</label>
40+
<label>Checkbox :
41+
<input type="checkbox">
42+
</label>
43+
<label>Date :
44+
<input type="date">
45+
</label>
46+
<label>Intervale :
47+
<input type="range">
48+
</label>
49+
<label>Couleur :
50+
<input type="color">
51+
</label>
52+
</div>
53+
</main>
54+
</body>
55+
56+
</html>

‎index.html

+1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
<a href="https://polymtl.ca" target="_blank">Polytechnique</a>
1616
</li>
1717
<li><a href="./page2.html">Notre Page 2</a></li>
18+
<li><a href="./attributes.html">Attributs HTML</a></li>
1819
</ul>
1920
</nav>
2021
</header>

0 commit comments

Comments
 (0)