hoe de breedte van een invoer tekstvak in te stellen in HTML, CSS en JavaScript

oktober 27, 2020 admin 0 Comments

In dit bericht zullen we zien hoe de breedte van een invoer tekstvak in te stellen in HTML, CSS en JavaScript.

Set width in HTML

In HTML kunt u het width attribuut gebruiken om de breedte van een element in te stellen.,

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., Het idee is om een klasse te definiëren om width CSS property in te stellen.

Edit in JSFiddle

U kunt ook de CSS-selector van een invoertekstvak gebruiken om de eigenschap width CSS in te stellen.

Edit in JSFiddle

Set width with JavaScript

met JavaScript kunt u de setAttribute() functie gebruiken om de waarde van size attribuut in te stellen op het invoer tekstvak.

Edit in JSFiddle

kunt u ook dynamisch de breedte van een tekstkader aanpassen aan de lengte van de invoer., 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.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *