Comment mettre des zones de texte dans un formulaire HTML5 - dummies

La plupart des éléments de formulaire HTML5 sont basés sur la balise d'entrée. Ce cheval de trait de création de pages Web est un tag général utilisé pour créer un certain nombre d'objets d'entrée intéressants, mais ce n'est pas le seul type de zone de texte à votre disposition. Vous pouvez également créer des champs de mot de passe et des zones de texte multilignes, comme indiqué dans la partie supérieure de cette démo de formulaire.

Le code des zones de texte de cette figure ressemble à ceci:

formDemo. html

Formulaire Démo
Saisie de texte
Zone de texte
Mot de passe type = "mot de passe" id = "myPwd" valeur = "secret" />
Zone de texte id = "myTextArea" rows = " 3 "cols =" 80 "> Votre texte ici

Une boîte de texte de base

Construire une boîte de texte de base est simple:

1. Créer un élément d'entrée.

   L'étiquette crée la structure générale de l'élément.

2. Définissez le type sur " texte " pour indiquer que vous créez un élément de texte standard, et non quelque chose de plus élaboré.

3. Ajoutez un attribut id pour nommer l'élément.

   Cela devient très important lorsque vous ajoutez du JavaScript à la page, car votre code JavaScript utilisera l'ID pour extraire les données du formulaire.

4. Ajouter des données par défaut .

   Vous pouvez ajouter des données par défaut si vous le souhaitez, en utilisant l'attribut value. Tout texte que vous placez dans la valeur deviendra la valeur par défaut du formulaire.

L'élément de texte place une petite boîte sur l'écran. Lorsqu'un visiteur de votre page Web sélectionne la case, le curseur se transforme en I-beam, et votre visiteur sera en mesure de taper du texte dans la boîte.

Champ de mot de passe

Le champ de mot de passe, similaire à celui du champ de texte ordinaire, présente une différence principale: Lorsque l'utilisateur tape des données dans le champ mot de passe, le contenu du champ est remplacé par des astérisques.

Un champ de mot de passe utilise la même balise d'entrée qu'un champ de texte de base. La seule différence est que vous définissez l'attribut id sur "mot de passe".

Les astérisques de remplacement peuvent empêcher un spectateur malveillant de découvrir votre mot de passe, mais un champ de mot de passe n'offre aucune réelle sécurité - surtout si vous utilisez JavaScript, ce qui rend le code de récupération disponible gratuitement pour le navigateur. JavaScript n'est pas la langue à utiliser si vous voulez garder beaucoup de secrets.

Zone de texte multiligne

Parfois, vous voulez donner aux visiteurs de votre page Web la possibilité d'entrer plusieurs lignes de texte. L'élément textuel HTML5 est parfait pour cette situation. Voici comment créer votre propre zone de texte:

1. Commencez avec la balise pour indiquer le début d'une zone de texte multiligne.

   Utilisez la balise pour donner un nom à votre zone de texte si vous le souhaitez.

2. Spécifiez le nombre de lignes.

   Indiquez le nombre de lignes (ou de lignes) de texte que vous voulez que la zone de texte contienne. Les grandes boîtes acceptent plus de texte mais nécessitent plus de place sur l'écran.

3. Indiquez le nombre de colonnes.

   Le nombre de colonnes indique la largeur (en caractères) de la zone de texte. Un formulaire de largeur de page contient généralement 80 caractères.

4. Ajoutez la balise de fermeture.