Comment construire des entrées de style de texte pour vos pages Web HTML5 et CSS3

La plupart des éléments de formulaire sur les pages Web HTML5 et CSS3 sont des variantes du même tag. La balise peut créer des zones de texte à une seule ligne, des zones de mot de passe, des boutons et même du contenu invisible (tels que des champs masqués). La plupart de ces objets partagent les mêmes attributs de base, bien que l'apparence extérieure puisse être différente.

Comment créer un champ de texte standard

La forme la plus courante de l'élément d'entrée est un champ de texte brut .

Pour effectuer une saisie de texte de base, vous avez besoin d'un formulaire et d'un élément d'entrée. L'ajout d'une étiquette pour que l'utilisateur sache ce qu'il est censé entrer dans la zone de texte est également courant. Voici le code:

zone de texte. html
Nom

Un élément d'entrée a trois attributs communs:

• type : L'attribut type indique le type d'élément d'entrée. Ce premier exemple définit le type sur du texte, en créant une zone de texte standard. D'autres types créent des mots de passe, des champs masqués, des cases à cocher et des boutons.

• id : L'attribut id crée un identifiant pour le champ. Lorsque vous utilisez un langage de programmation pour extraire des données de cet élément, utilisez id pour spécifier le champ auquel vous faites référence. Un champ d'identification commence souvent par une phrase d'indice pour indiquer le type d'objet (par exemple, txt indique une zone de texte).

  

• valeur : Cet attribut détermine la valeur par défaut de la zone de texte. Si vous laissez cet attribut, le champ de texte commence vide.

Les champs de texte peuvent aussi avoir d'autres attributs, qui ne sont pas aussi souvent utilisés, tels que

• size : Cet attribut détermine le nombre de caractères affichés.

• maxlength : Utilisez cet attribut pour définir le plus grand nombre de caractères autorisés.

Il n'y a pas de tag. Les tags d'entrée sont un hold-up des jours où de nombreux tags n'avaient pas de tags de fin. Vous venez de terminer la balise d'origine avec un caractère barre oblique, comme indiqué dans l'exemple de code précédent.

Vous pourriez vous demander pourquoi la balise a été ajoutée si elle n'a aucun effet sur l'apparence ou le comportement du formulaire. Dans cet exemple particulier, le tag n'a pas d'effet, mais comme tout le reste en HTML, vous pouvez faire des choses incroyables avec CSS. Même si les étiquettes n'ont généralement pas de style par défaut, elles restent utiles.

Comment créer un champ de mot de passe

Les mots de passe sont comme des zones de texte, sauf que le texte ne s'affiche pas. Au lieu de cela, une série d'astérisques apparaît.

Le code suivant révèle que les mots de passe sont presque identiques aux champs de texte ordinaires:

mot de passe.html Entrez un mot de passe
Tapez le mot de passe ici

Dans cet exemple, un champ de mot de passe a été créé avec l'ID. La valeur par défaut de ce champ est. Le terme secret n'apparaîtra pas réellement dans le champ; il sera remplacé par six caractères astérisques.

Le champ de mot de passe n'offre pratiquement aucune sécurité significative. Il protège l'utilisateur contre les satellites espions qui jettent un coup d'œil par-dessus son épaule pour lire un mot de passe, mais c'est à peu près tout. Les standards ouverts de HTML et les langages de programmation signifient que les mots de passe sont souvent transmis à l'extérieur. Il existe des solutions - telles que la technologie SSL - mais pour l'instant, sachez que le champ de mot de passe ne convient pas à la protection de vos secrets.

Cet exemple ne fait vraiment rien avec le mot de passe, mais vous utiliserez d'autres technologies pour cela.

Comment créer une entrée de texte multiligne

Le champ de texte sur une seule ligne est une fonctionnalité puissante, mais parfois, vous voulez quelque chose avec un peu plus d'espace. Le programme montre comment vous pourriez créer une page pour une question à développement.

La vedette de ce programme est un nouveau tag -:

essai. html Quiz
Nom
Veuillez entrer la somme totale de la pensée occidentale. Soit bref.

Voici quelques points à garder à l'esprit lorsque vous utilisez la balise:

• Elle a besoin d'un attribut, tout comme un élément d'entrée.

• Vous pouvez spécifier la taille withandattributes.

• Le contenu passe entre les balises. La zone de texte peut contenir beaucoup plus d'informations que les balises ordinaires, donc plutôt que de placer les données dans l'attribut, le contenu du texte passe entre les balises et.

Tout ce qui est placé entre et dans le code finit aussi dans la sortie. Cela inclut les espaces et les retours chariot. Si vous ne voulez pas d'espaces vides dans la zone de texte, placez la balise de fin juste à côté de la balise de début.