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?

html css input

— osos
source

duplication possible de Comment définir la taille d'une zone de texte HTML?

— Tony

Dans certains cas, le réglage max-widthsuffit

— Christophe Roussy

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
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
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
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
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
source