<output name="out1" form="form1" for="inp1 inp2"></output>
Chapitre 18: Élément div
Introduction
L'élément div dans HTML est un élément conteneur qui encapsule d'autres éléments et peut être utilisé pour regrouper et séparer des parties d'une page Web. Une div par elle-même ne
représente en soi rien mais est un outil puissant dans la conception de sites Web. Ce sujet couvre le but et les applications de l'élément div.
Syntaxe
<div>example div</div> •
Examples
Nidification
Il est courant de placer plusieurs <div> dans un autre <div> . Ceci est généralement appelé
éléments "d'imbrication" et permet de diviser davantage les éléments en sous-sections ou d'aider les développeurs avec un style CSS.
Le <div class="outer-div"> est utilisé pour regrouper deux éléments <div class="inner-div"> ; chacun contenant un élément <p> .
<div class="outer-div"> <div class="inner-div"> <p>This is a paragraph</p> </div>
<div class="inner-div">
<p>This is another paragraph</p> </div>
</div>
Cela donnera le résultat suivant (styles CSS appliqués pour plus de clarté):
Imbrication d'éléments en ligne et de blocs Lors de l'imbrication d'éléments, vous devez garder
à l'esprit qu'il existe des éléments en ligne et des blocs. tandis que les éléments de bloc "ajoutent un saut de ligne en arrière-plan", ce qui signifie que les autres éléments imbriqués sont affichés automatiquement dans la ligne suivante, les éléments en ligne peuvent être positionnés les uns à côté des autres par défaut
Un format de conteneur imbriqué profond et souvent utilisé montre un style de codage incorrect. Les coins arrondis ou certaines fonctions similaires créent souvent un tel code HTML. Pour la plupart des navigateurs de dernière génération, il existe des contreparties CSS3. Essayez d'utiliser le moins possible d'éléments HTML pour augmenter le rapport entre le contenu et les balises et réduire le chargement de la page, ce qui se traduit par un meilleur classement dans les moteurs de recherche.
div section L'élément ne doit pas être plus imbriqué que 6 couches.
Utilisation de base
L'élément <div> n'a généralement aucune signification sémantique spécifique, représentant simplement une division, et est généralement utilisé pour regrouper et encapsuler d'autres
éléments dans un document HTML et pour séparer ceux des autres groupes de contenu. En tant que tel, chaque <div> est mieux décrit par son contenu.
<div>
<p>Hello! This is a paragraph.</p> </div>
L'élément div est généralement un élément de niveau bloc , ce qui signifie qu'il sépare un bloc d'un document HTML et occupe la largeur maximale de la page. Les navigateurs ont
généralement la règle CSS par défaut suivante:
div {
display: block; }
Le Consortium World Wide Web (W3C) encourage vivement l’élément div comme
élément de dernier recours, lorsque aucun autre élément ne convient. L'utilisation d'éléments plus appropriés au lieu de l'élément div entraîne une meilleure accessibilité pour les lecteurs et une facilité de maintenance pour les auteurs.
Par exemple, un article de blog serait marqué en utilisant <article> , un chapitre utilisant <section> , des aides à la navigation d'une page utilisant <nav> et un groupe de contrôles de formulaire utilisant <fieldset> .
Les éléments div peuvent être utiles à des fins stylistiques ou pour envelopper plusieurs paragraphes dans une section qui doivent tous être annotés de manière similaire.
Chapitre 19: Éléments de contrôle d'entrée
Introduction
Composant essentiel des systèmes Web interactifs, les balises d’entrée sont des éléments HTML conçus pour prendre en charge une forme d’information spécifique des utilisateurs. Différents types d'éléments de saisie peuvent réguler les données saisies pour s'adapter à un format spécifié et assurer la sécurité de la saisie du mot de passe.
Syntaxe
<input type="" name="" value=""> •
Paramètres
Paramètre Détails
classe Indique la classe de l'entrée
id Indique l'ID de l'entrée
type
Identifie le type de contrôle d'entrée à afficher. Les valeurs acceptables sont hidden , text , tel , url , email , password , date , time , number , range , color , checkbox , radio , file , submit , image , reset et button . Par défaut, le text n'est pas spécifié, si la valeur n'est pas valide ou si le navigateur ne prend pas en charge le type spécifié.
prénom Indique le nom de l'entrée
désactivée
Valeur booléenne indiquant que l'entrée doit être désactivée. Les contrôles désactivés ne peuvent pas être modifiés, ne sont pas envoyés lors de l'envoi du formulaire et ne peuvent pas recevoir le focus.
vérifié
Lorsque la valeur de l'attribut type est radio ou case à cocher, la présence de cet attribut booléen indique que le contrôle est sélectionné par défaut. sinon il est ignoré.
plusieurs HTML5 Indique que plusieurs fichiers ou valeurs peuvent être transmis (s'applique uniquement aux entrées de type file et email )
espace réservé
HTML5 Un indice pour l'utilisateur de ce qui peut être saisi dans le contrôle.
Le texte d'espace réservé ne doit pas contenir de retour chariot ou de saut de ligne
Paramètre Détails
lecture seulement
Valeur booléenne indiquant que l'entrée n'est pas modifiable. Les
commandes en lecture seule sont toujours envoyées lors de la soumission du formulaire, mais ne reçoivent pas le focus. HTML5: cet attribut est ignoré lorsque la valeur de l'attribut type est définie sur hidden , range , color ,
checkbox , radio , file ou button . Champs
obligatoires
HTML5 Indique qu'une valeur doit être présente ou que l'élément doit être
vérifié pour que le formulaire soit soumis
alt Un texte alternatif pour les images, au cas où elles ne seraient pas affichées.
autofocus L'élément <input> devrait avoir le focus lors du chargement de la page.
valeur Spécifie la valeur de l'élément <input> .
étape
L'attribut step spécifie les intervalles de numéros légaux. Il fonctionne avec les types d'entrées suivants: number , range , date , date - date datetime-local , month , time et week .
Remarques
Comme pour les autres éléments vides de HTML5, <input> se ferme automatiquement et peut être écrit <input /> . HTML5 ne nécessite pas cette barre oblique.
Les types d'entrées valides suivants sont en HTML:
button • checkbox • file • hidden • image • password • radio • reset • submit •
text (valeur par défaut) •
5
Les suivants sont des types d’entrée nouvellement introduits dans le standard HTML 5. Certains de ces types ne sont pas pris en charge par tous les navigateurs Web. Dans le cas où un type n'est pas pris en charge, l'élément d'entrée sera par défaut le type de text .
color
•
date
•
datetime / heure (obsolète et obsolète) •
month • number • range • search • tel • time • url • week •
Pour vérifier quels navigateurs prennent en charge quels types, vous pouvez aller sur caniuse.com .