Maison > interface Web > Questions et réponses frontales > Comment styliser une zone de texte en HTML

Comment styliser une zone de texte en HTML

PHPz
Libérer: 2023-04-13 11:13:50
original
3407 Les gens l'ont consulté

Dans la conception Web, les zones de texte sont un élément couramment utilisé qui peut être utilisé pour permettre aux utilisateurs de saisir des informations sur la page. Cet article explique comment configurer des zones de texte en HTML.

  1. Utilisez la balise

Pour créer une zone de texte, vous pouvez utiliser la balise Voici un exemple basique :

<input type="text" name="username">
Copier après la connexion

Dans cet exemple, nous créons une zone de texte et la nommons "nom d'utilisateur".

  1. Définissez la taille de la zone de texte et la longueur maximale

Vous pouvez définir la taille de la zone de texte à l'aide de l'attribut "size", par exemple :

<input type="text" name="username" size="30">
Copier après la connexion

Dans cet exemple, nous définissons la taille de la zone de texte à 30 caractères larges.

De plus, vous pouvez également utiliser l'attribut "maxlength" pour définir la longueur maximale de la zone de texte, par exemple :

<input type="text" name="username" maxlength="20">
Copier après la connexion

Dans cet exemple, nous définissons la longueur maximale de la zone de texte à 20 caractères.

  1. Définir la valeur par défaut et l'espace réservé

Vous pouvez utiliser l'attribut "value" pour définir la valeur par défaut de la zone de texte, par exemple :

<input type="text" name="username" value="请输入用户名">
Copier après la connexion

Dans cet exemple, nous définissons la valeur par défaut de la zone de texte sur " Veuillez saisir votre nom d'utilisateur ".

De plus, vous pouvez également utiliser l'attribut "placeholder" pour définir l'espace réservé de la zone de texte, par exemple :

<input type="text" name="username" placeholder="请输入用户名">
Copier après la connexion

Dans cet exemple, nous définissons l'espace réservé de la zone de texte sur "Veuillez entrer votre nom d'utilisateur". L'espace réservé disparaîtra automatiquement lorsque l'utilisateur entrera dans la zone de texte.

  1. Utilisez la balise