Атрибут value тега <button> — значення для відправки
Атрибут value визначає початкове значення для кнопки <button>, яке буде відправлено на сервер.
На сервер відправляється пара «ім'я=значення», де ім'я задається атрибутом name, а значення - атрибутом value тега <button>.
Атрибут value застосовується для доступу до значення кнопки через скрипти.
Загальний опис
автор: NagarD
- Нотатка
-
Значення кнопки буде надіслано на сервер, тільки якщо саме ця кнопка була використана для відправки форми.
автор: с3с
Синтаксис
<button value="value">Атрибут value може отримувати єдине значення:
-
value -
Значення кнопки, що буде відправлено на сервер. В якості значення може виступати будь який рядок.
автор: с3с
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | ≤4 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | ≤3.2 |
Приклади
+ запропонувати свій приклад у пісочниці
<form>
<p> Приклад використання атрибуту "value"</p>
<p>Виберіть свій профіль:</p>
<button name = "destiny" type = "submit" value = "disayner">Дизайнер</button><br><br>
<button name = "destiny" type = "submit" value = "web">Веб-розробник</button><br><br>
<button name = "destiny" type = "submit" value = "test">Тестувальник</button><br><br>
<button name = "destiny" type = "submit" value = "programmer">Програміст</button><br><br>
</form>Кожна кнопка сама розповідає, що з неї піде на сервер: підпис після стрілки домальовує CSS із справжніх атрибутів name і value. Видно всі три випадки — нормальна пара, кнопка без name (не надішлеться нічого) і name без value (порожній рядок замість напису). Останній рядок — <input type="submit">, у якого value водночас і підпис, і значення.
HTML
<form>
<p class="row">
<button name="act" value="save">Зберегти зміни</button>
</p>
<p class="row">
<button name="act" value="delete">Видалити назавжди</button>
<span class="why">та сама назва, інше значення — одна форма, дві дії</span>
</p>
<p class="row">
<button value="save">Кнопка без name</button>
</p>
<p class="row">
<button name="act">Кнопка без value</button>
</p>
<p class="row">
<button type="button">Кнопка з type="button"</button>
<span class="why">форму не надсилає взагалі — саме так роблять
допоміжні кнопки</span>
</p>
<p class="row">
<input type="submit" name="act" value="Надіслати">
<span class="why">тут value — і напис, і те, що піде на сервер:
act=Надіслати</span>
</p>
</form>CSS
.row {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: baseline;
margin: 10px 0;
}
button,
input[type="submit"] {
padding: 6px 12px;
border: 2px solid #b9c6d8;
border-radius: 5px;
background: #f6f9ff;
color: #1b4f9c;
font: 600 15px/1.4 system-ui, sans-serif;
}
button::after {
content: " → надішле " attr(name) "=" attr(value);
color: #3a9a4f;
font-weight: 400;
font-family: ui-monospace, monospace;
font-size: .85em;
}
button:not([name])::after,
button[type="button"]::after {
content: " → не надішле нічого";
color: #d64545;
}
button:not([name]) {
border-color: #d64545;
border-style: dashed;
}
.why {
max-width: 320px;
color: #5a6472;
font-size: .9em;
}Коментарі
Коментарів ще немає — будьте першим!