Comment définir la taille d'une zone de texte d'entrée en HTML?

90

Voici une zone de texte d'entrée HTML:

<input type="text" id="text" name="text_name" />

Quelles sont les options pour définir la taille de la boîte?

Comment cela peut-il être implémenté dans CSS?

osos
la source
Dans certains cas, le réglage max-widthsuffit
Christophe Roussy

Réponses:

129

Vous pouvez définir son width:

<input type="text" id="text" name="text_name" style="width: 300px;" />

ou mieux encore définir une classe:

<input type="text" id="text" name="text_name" class="mytext" />

et dans un fichier CSS séparé, appliquez le style nécessaire:

.mytext {
    width: 300px;
}

Si vous souhaitez limiter le nombre de caractères que l'utilisateur peut saisir dans cette zone de texte, vous pouvez utiliser l' maxlengthattribut:

<input type="text" id="text" name="text_name" class="mytext" maxlength="25" />
Darin Dimitrov
la source
10
aussi: vous pouvez changer la largeur en termes de "em" (et non de "px") et ensuite la taille est proportionnelle à la taille de la police de la zone de texte
Alexander Bird
45

L' sizeattribut fonctionne également

<input size="25" type="text">
Analyse floue
la source
8

Essaye ça

<input type="text" style="font-size:18pt;height:420px;width:200px;">

Ou sinon

 <input type="text" id="txtbox">

avec le css:

 #txtbox
    {
     font-size:18pt;
     height:420px;
     width:200px;
    }
Janarthanan Ramu
la source
3
Votre réponse n'ajoute rien de nouveau et vous devez spécifier les unités (px, pt,% v, etc.) en css
Jon P
1
Eh bien, la taille de la police (style = "font-size: 18pt") était celle que je recherchais et cela augmente également la taille de la boîte. Bien que cela ne soit pas explicitement demandé par le PO, il ajoute également de la valeur.
Wolf5
Cela a fonctionné. Par conséquent merci beaucoup. Cependant le texte semble se centrer verticalement. Puis-je empêcher cela de quelque manière que ce soit?
Aaron John Sabu
@AaronJohnSabu Désolé pour le retard .. Essayez d'augmenter la taille de la largeur .. j'espère que vous avez déjà trouvé la réponse ..
Janarthanan Ramu
3

Vous pouvez définir la largeur en pixels via le style en ligne:

<input type="text" name="text" style="width: 195px;">

Vous pouvez également définir la largeur avec une longueur de caractère visible:

<input type="text" name="text" size="35">
betrice mpalanzi
la source
-2
<input size="45" type="text" name="name">

La "taille" spécifie la largeur visible en caractères de l'entrée de l'élément.

Vous pouvez également utiliser la hauteur et la largeur de css.

<input type="text" name="name" style="height:100px; width:300px;">
Daniel dos Santos
la source