Атрибут name тега <input> — ім'я поля для надсилання
автор: с3с
Загальний опис
автор: NagarD
- Порада
-
В якості значення атрибута
автор: с3сnameвикористовується набір символів, включаючи числа і букви. JavaScript чутливий до регістру, тому при зверненні до елементу по імені дотримуйтесь тієї ж форми написання, що і в атрибутіname. - Нотатка
-
Тільки елементи з атрибутом імені будуть мати свої значення та будуть відправлені на сервер при відправці форми.
автор: с3с
Синтаксис
<input name="text">Атрибут name може отримувати єдине значення:
-
text -
Ім'я елемента форми.
автор: с3с
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | ≤12.1 | 12 | 5.5 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML атрибута name теґа <input>
HTML
<p><b>Виберіть свій улюблений колір:</b></p>
<p id="text"></p>
<form>
<select name="type" size="6">
<option value = "Синій">Синій</option>
<option value = "Жовтий">Жовтий</option>
<option value = "Зелений">Зелений</option>
<option value = "Сірий">Сірий </option>
<option value = "Білий">Білий</option>
<option value = "Фіолетовий">Фіолетовий</option>
<option value = "Чорний">Чорний</option>
<option value = "Вишневий">Вишневий </option>
</select>
<input type="button" value="Обрати" onClick="dataSelect(this.form)">
</form>CSS
div{
padding:30px;
float:left;
}
select:focus{
border: 2px solid #ff0000;
}JS
text.innerHTML = "Ваш улюблений колір: ";
function dataSelect(f) {
n = f.type.selectedIndex;
text.innerHTML = "Ваш улюблений колір: " + f.type.options[n].value;
}
//# sourceURL=pen.jsЛіва група — три радіокнопки з ОДНАКОВИМ name: це одна група, вибрати можна лише щось одне. У середній групі імена різні, і кнопки перестали бути перемикачами — вмикаються всі разом. Знизу два текстові поля: у другого немає name, і хоч на екрані воно нічим не гірше, у даних форми його не буде.
HTML
<form>
<fieldset>
<legend>Однакове name — це ОДНА група</legend>
<label><input type="radio" name="size" value="s"> S</label>
<label><input type="radio" name="size" value="m"> M</label>
<label><input type="radio" name="size" value="l"> L</label>
</fieldset>
<fieldset>
<legend>Різні name — три незалежні кнопки</legend>
<label><input type="radio" name="a" value="s"> S</label>
<label><input type="radio" name="b" value="m"> M</label>
<label><input type="radio" name="c" value="l"> L</label>
</fieldset>
<fieldset>
<legend>Що поїде на сервер</legend>
<p><label>З іменем: <input type="text" name="city" value="Київ"></label></p>
<p><label>Без імені: <input type="text" value="Львів"></label></p>
<p class="note">Друге значення не потрапить у дані форми взагалі.</p>
</fieldset>
</form>CSS
fieldset { margin-bottom: .8em; border: 1px solid #bbb; }
legend { font-weight: bold; }
label { display: inline-block; margin-right: 1em; padding: .25em .5em; border-radius: 4px; }
label:has(:checked) { background: #d8f0dc; }
input[type="text"] { font: inherit; padding: .3em; }
input[type="text"]:not([name]) { border: 2px dashed #c0392b; }
.note { color: #c0392b; margin: .2em 0 0; }Різниця між HTML 4.01 та HTML5
Немає
Коментарі
Коментарів ще немає — будьте першим!