¿Cómo se puede definir el tamaño de un cuadro de texto de entrada en HTML?

90

Aquí hay un cuadro de texto de entrada HTML:

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

¿Cuáles son las opciones para definir el tamaño de la caja?

¿Cómo se puede implementar esto en CSS?

osos
fuente
En algunos casos, la configuración max-widthes suficiente
Christophe Roussy

Respuestas:

129

Puedes configurar su width:

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

o incluso mejor definir una clase:

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

y en un archivo CSS separado aplique el estilo necesario:

.mytext {
    width: 300px;
}

Si desea limitar la cantidad de caracteres que el usuario puede escribir en este cuadro de texto, puede usar el maxlengthatributo:

<input type="text" id="text" name="text_name" class="mytext" maxlength="25" />
Darin Dimitrov
fuente
11
también: puede cambiar el ancho en términos de "em" (y no "px") y luego el tamaño es proporcional al tamaño de fuente del cuadro de texto
Alexander Bird
45

El sizeatributo también funciona

<input size="25" type="text">
Análisis difuso
fuente
¿En qué unidades se mide normalmente este atributo de tamaño?
Thomas Kimber
8

Prueba esto

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

Si no

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

con el css:

 #txtbox
    {
     font-size:18pt;
     height:420px;
     width:200px;
    }
Janarthanan Ramu
fuente
3
Su respuesta no agrega nada nuevo y debe especificar unidades (px, pt,% v, etc.) en css
Jon P
1
Bueno, el font-size (style = "font-size: 18pt") era el que estaba buscando y eso también aumenta el tamaño de la caja. Aunque el OP no lo pide explícitamente, también agrega valor.
Wolf5
Esto funcionó. De ahí muchas gracias. Sin embargo, el texto parece centrarse verticalmente. ¿Puedo prevenir esto de alguna manera?
Aaron John Sabu
@AaronJohnSabu Perdón por la demora .. Intenta aumentar el tamaño del ancho .. espero que ya hayas encontrado la respuesta ..
Janarthanan Ramu
3

Puede establecer el ancho en píxeles mediante el estilo en línea:

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

También puede establecer el ancho con una longitud de carácter visible:

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

El "tamaño" especifica el ancho visible en caracteres de la entrada del elemento.

También puede usar la altura y el ancho de css.

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