Атрибут name тега <button> — ім'я кнопки для сервера
Атрибута name визначає унікальне ім'я елемента <button>.
Атрибут name використовується для відправлення значення кнопки на сервер, або для звернень до неї через JavaScript.
Загальний опис
автор: NagarD
- Порада
-
Атрибут
автор: с3сnameвиступає в ролі атрибутаid. - Нотатка
-
Допускається використання однакових імен для кнопок в межах однієї форми, але при цьому необхідно, щоб вони мали різні значення (атрибут
автор: с3сvalue). Ім'я кнопки може використовуватися при роботі клієнтських скриптів на мові Javascript.
Синтаксис
<button name="name">Атрибут name може отримувати єдине значення:
-
name -
Унікальне ім'я форми. В якості імені використовується набір символів, включаючи числа і букви.
автор: с3с
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | ≤4 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | ≤3.2 |
Приклади
+ запропонувати свій приклад у пісочниці
П'ять кнопок однієї форми. Підпис праворуч малює CSS правилом content: attr(name) "=" attr(value) — це рівно те, що додасть до форми натискання саме цієї кнопки; кнопки без name і кнопки, які нічого не надсилають, позначено окремо.
HTML
<form action="/stattia" method="post">
<p><label>Заголовок <input type="text" name="title" value="Чернетка"></label></p>
<p><button type="submit" name="act" value="save">Зберегти</button></p>
<p><button type="submit" name="act" value="publish">Опублікувати</button></p>
<p><button type="submit" name="act">Ім'я без значення</button></p>
<p><button type="submit" value="delete">Значення без імені</button></p>
<p><button type="button" name="act" value="preview">Попередній перегляд</button></p>
<p><button type="submit" name="act" value="archive" disabled>До архіву</button></p>
</form>CSS
form p {
margin: 0 0 10px;
}
button {
font: inherit;
min-width: 210px;
padding: 5px 10px;
border: 2px solid #b9c6d8;
border-radius: 5px;
background: #f6f9ff;
text-align: left;
}
button::after {
margin-left: 12px;
font-family: ui-monospace, monospace;
font-weight: 600;
}
button[type="submit"][name][value]::after {
content: "надішле " attr(name) "=" attr(value);
color: #1b6b33;
}
button[type="submit"][name]:not([value])::after {
content: "надішле " attr(name) "= (порожньо)";
color: #b06a00;
}
button[type="submit"]:not([name])::after {
content: "не надішле нічого: немає name";
color: #d64545;
}
button[type="button"]::after {
content: "не надішле нічого: type=\"button\"";
color: #d64545;
}
button:disabled {
border-color: #d3d9e2;
background: #eef1f5;
color: #8a94a6;
}
button[type="submit"][name][value]:disabled::after {
content: "не надішле нічого: кнопка вимкнена";
color: #d64545;
}Найпростіший приклад використання HTML атрибута name теґа <button>
<form>
<p> Приклад використання атрибуту "name"</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>Коментарі
Коментарів ще немає — будьте першим!