Como o tamanho de uma caixa de texto de entrada pode ser definido em HTML?

90

Aqui está uma caixa de texto de entrada HTML:

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

Quais são as opções para definir o tamanho da caixa?

Como isso pode ser implementado em CSS?

osos
fonte
Em alguns casos, apenas definir max-widthé suficiente
Christophe Roussy

Respostas:

129

Você pode definir o seu width:

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

ou ainda melhor definir uma classe:

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

e em um arquivo CSS separado, aplique o estilo necessário:

.mytext {
    width: 300px;
}

Se você deseja limitar o número de caracteres que o usuário pode digitar nesta caixa de texto, você pode usar o maxlengthatributo:

<input type="text" id="text" name="text_name" class="mytext" maxlength="25" />
Darin Dimitrov
fonte
10
também: você pode alterar a largura em termos de "em" (e não de "px") e então o tamanho é proporcional ao tamanho da fonte da caixa de texto
Alexander Bird
45

O sizeatributo também funciona

<input size="25" type="text">
Análise Fuzzy
fonte
8

Tente isto

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

Se não

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

com o css:

 #txtbox
    {
     font-size:18pt;
     height:420px;
     width:200px;
    }
Janarthanan Ramu
fonte
3
Sua resposta não adiciona nada de novo e você deve especificar as unidades (px, pt,% v, etc) em css
Jon P
1
Bem- O font-size (style = "font-size: 18pt") era o que eu procurava e isso também aumenta o tamanho da caixa. Embora não seja explicitamente solicitado pelo OP, também agrega valor.
Wolf5 de
Isso funcionou. Portanto, muito obrigado. No entanto, o texto parece centrar-se verticalmente. Posso evitar isso de alguma forma?
Aaron John Sabu
@AaronJohnSabu Desculpe pela demora .. Tente aumentar o tamanho da largura .. espero que você já tenha encontrado a resposta ..
Janarthanan Ramu
3

Você pode definir a largura em pixels por meio de estilo embutido:

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

Você também pode definir a largura com um comprimento de caractere visível:

<input type="text" name="text" size="35">
Betrice Mpalanzi
fonte
-2
<input size="45" type="text" name="name">

O "tamanho" especifica a largura visível em caracteres da entrada do elemento.

Você também pode usar a altura e a largura do css.

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