Como definir a largura de uma caixa de entrada de texto em HTML, CSS e JavaScript

Outubro 27, 2020 admin 0 Comments

neste post, vamos ver como definir a largura de uma caixa de entrada de texto em HTML, CSS e JavaScript.

Set width in HTML

In HTML, you can use the width attribute to set the width of an element.,

label for=”name”>Enter a value:</label>

<input type=”text” style=”width: 200px;”>
</body>
</html>

Edit in JSFiddle

Alternatively, you can also use the size attribute to define the width of the <input>.,ody>

<label for=”name”>Enter a value:</label>
<input type=”text” size=”20″>
</body>
</html>

Edit in JSFiddle

Set width with CSS

It is good practice to separate CSS from HTML markup., A idéia é definir uma classe para definir width propriedade CSS.

Edit in JSFiddle

Alternativamente, você também pode usar o selector de CSS de um campo de texto de entrada para definir a propriedade width CSS.

Edit in JSFiddle

Set width with JavaScript

With JavaScript, you can use the setAttribute() function to set the value of size attribute on the input text box.

Edite em JSFiddle

Você também pode mudar dinamicamente a largura de um campo de texto para corresponder com o comprimento da entrada., This can be easily done by setting the size attribute on key events.

Edit in JSFiddle

(21 votes, average: 5.00 out of 5)

Thanks for reading.

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *