Атрибут name тега <select> — ім'я списку у формі
Атрибут nameвизначає унікальне ім'я елемента <select> . Як правило, це ім'я використовується для доступу до даних через скрипти або для отримання цього значення списку на сервері.
Загальний опис
автор: NagarD
- Порада
-
Як ім'я використовується набір символів, включаючи числа і букви. JavaScript залежний від регістру, тому при зверненні до елементу
автор: с3с<select>по імені дотримуйтесь ту ж форму написання, що і в атрибутіname.
Синтаксис
<select name="text">Атрибут name може отримувати єдине значення:
-
text -
Ім'я випадаючого списку.
автор: с3с
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 3 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML атрибута name теґа <select>
HTML
<p id="text"></p>
<form>
<select name="type" size="4">
<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:10px;
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Чотири рядки форми, і вердикт «піде на сервер чи ні» під кожним малюють правила з :has() — вони дивляться на саму розмітку, а не на підпис, набраний руками. Клацніть по обох підписах: перший показує на id і переводить фокус, другий показує на ім'я поля й не робить нічого.
HTML
<form>
<p class="row">
<label for="s1">Підпис із for="s1" — показує на id</label>
<select id="s1" name="misto">
<option value="">Оберіть місто</option>
<option value="kyiv">Київ</option>
<option value="lviv">Львів</option>
</select>
</p>
<p class="row">
<label for="misto2">Підпис із for="misto2" — це ІМʼЯ, а не id</label>
<select id="s2" name="misto2">
<option value="kyiv">Київ</option>
</select>
</p>
<p class="row">
<label for="s3">Список без name</label>
<select id="s3">
<option value="kyiv">Київ</option>
</select>
</p>
<p class="row">
<label for="s4">Кілька значень: name="tegy[]" і multiple</label>
<select id="s4" name="tegy[]" multiple size="3">
<option value="html" selected>html</option>
<option value="css" selected>css</option>
<option value="js">js</option>
</select>
</p>
<p class="row">
<label for="s5">Вимкнений список із name</label>
<select id="s5" name="vymknenyj" disabled>
<option value="kyiv">Київ</option>
</select>
</p>
</form>CSS
.row {
max-width: 520px;
margin: 0 0 16px;
padding: 8px 10px;
border-left: 6px solid #c9ced6;
background: #f6f9ff;
}
label {
display: block;
margin-bottom: 4px;
font-weight: 600;
}
select {
padding: 5px;
font: inherit;
border: 2px solid #b9c6d8;
border-radius: 4px;
background: #fff;
}
select:focus {
outline: 3px solid #f2b134;
}
.row:has(select[name]):not(:has(select:disabled)) {
border-left-color: #3a9a4f;
}
.row:has(select[name]):not(:has(select:disabled))::after {
content: "піде на сервер під іменем з name";
display: block;
margin-top: 6px;
color: #3a9a4f;
font-size: .9em;
}
.row:not(:has(select[name]))::after {
content: "не піде взагалі: імені немає";
display: block;
margin-top: 6px;
color: #d64545;
font-size: .9em;
}
.row:not(:has(select[name])) {
border-left-color: #d64545;
}
.row:has(select:disabled)::after {
content: "не піде: вимкнене поле не потрапляє в дані форми";
display: block;
margin-top: 6px;
color: #d64545;
font-size: .9em;
}
.row:has(select:disabled) {
border-left-color: #d64545;
}
.row:has(select[multiple])::before {
content: "обрано два пункти — ім'я повториться двічі";
display: block;
margin-bottom: 6px;
color: #1b4f9c;
font-size: .9em;
}Коментарі
Коментарів ще немає — будьте першим!