Атрибут size тега <input> — ширина поля в символах
Атрибут size визначає ширину текстового поля, яка визначається числом символів моноширинного шрифту(ширина задається кількістю букв однакової ширини по горизонталі).
Якщо розмір шрифту змінюється за допомогою стилів, ширина також відповідно змінюється. Атрибут тільки для елементів наступних типів: text , search , tel , url , email і password (інші ігноруються).
Загальний опис
автор: NagarD
- Порада
-
Щоб вказати максимальну допустиму кількість символів в елементі
автор: с3с<input>, використовуйте атрибут maxlength. - Нотатка
-
Атрибут size працює з наступними input типами: text, search, tel, url, email та password.
автор: с3с
Синтаксис
<input size="number">Атрибут size може отримувати єдине значення:
-
number -
Визначає ширину елемента
автор: с3с<input>, в символах. Значення за замовчуванням - 20.
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | ≤12.1 | 12 | 5.5 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML атрибута size теґа <input>
HTML
<code>size</code>
<hr>
<form name = "myForm">
<p>Ширина текстового поля 3 <input type = "text" size = "3"></p>
<p>Ширина текстового поля 5 <input type = "text" size = "5" ></p>
<p>Ширина текстового поля 10 <input type = "text" size = "10" ></p>
<p>Ширина текстового поля 20 (за замовчуванням) <input type = "text"></p>
</form>CSS
p{
float:left;
padding:10px;
}
*{
text-align:center;
}Перші два поля показують, що size — це ширина, а не обмеження: у вузьке поле спокійно вводиться довгий текст. Третє обмежує довжину через maxlength. Четверте має size="5", але ширину йому задає CSS — атрибут не діє.
HTML
<p><label>size="5" — вузьке поле, але вводиться будь-що<br>
<input type="text" size="5" value="це довгий текст"></label></p>
<p><label>size="30" — типова ширина для адреси<br>
<input type="text" size="30" value="вул. Соборна, 12, кв. 4"></label></p>
<p><label>size="6" maxlength="5" — обмежує саме maxlength (спробуйте дописати)<br>
<input type="text" size="6" maxlength="5" value="01001"></label></p>
<p><label>size="5", але в CSS є width — атрибут програє<br>
<input type="text" size="5" class="wide" value="ширину задав CSS"></label></p>CSS
label { font-size: .9rem; color: #444; }
input { font: inherit; padding: .3em .4em; }
.wide { width: 24ch; }Gриклад використання HTML атрибута size теґа <input>
HTML
<p>У цьому прикладі, Ви можете змінювати значення для властивості <code>size </code>в межах від 0 до 30 переміщаючи повзунок.</p>
<p id="text"></p>
<input type="range" id="range" min="0" max="30" step="1" name="range">
<input type="button" value="Встановити size" onclick="f()">
<hr>
<br>
<div class="block1" >
<p> З використанням атрибута <code> size </code> </p>
<input id="password" type="password">
</div>
<div class="block2">
<p> Без використання атрибута <code> size </code></p>
<input type="password" size="20">
</div>CSS
*{
text-align:center;
}
.block1{
float:left;
width:45%;
}JS
function f() {
var size = document.getElementById("range").value;
var password = document.getElementById("password");
password.setAttribute("size", size);
text.innerHTML = "Поточна довжина:" + size;
}
//# sourceURL=pen.jsКоментарі
Коментарів ще немає — будьте першим!