HTML - Select и Checkbox

Иногда требуется создание HTML-формы, в которой пользователь будет выбирать определенные значения.

Для экономии места в интерфейсе рекомендуется выносить все списки длиннее 4-5 пунктов в меню select.

Пример: форма для поступления в университет, в которой студенты выбирают нужный профиль подготовки.

Элементу <select> нужны открывающие и закрывающие теги.

<select> отображает выпадающее меню с заданными значениями. Сам по себе элемент select не выполняет никаких действий, т.к. ему нужны дополнительные теги (элементы option). Здесь можно провести параллель с тегом <ul> , которому необходимы элементы <li> .

Атрибуты:
<option>– вариант выбора из меню select. Использует атрибут value. value – при отправке формы на сервер каждый элемент обладает определенным значением (value) для текстовых полей и областей. Иными словами, value – это все, что пользователь указывает в поле. Но при создании меню select с готовыми опциями необходимо заранее определять в них value.

Пример:

<form action="index.html" method="post">
	<h2>Your basic info</h2>

	<select id="courses" name="student_courses">
	  <option value="computer_engineering">Computer Science Engineering</option>
	  <option value="slectrical_engineering">Electrical Engineering</option>
	  <option value="mechanical_engineering">Mechanical Engineering</option>
	  <option value="civil_engineering">Civil Engineering</option>
	  <option value="chemical_engineering">Chemical Engineering</option>
	</select>

	<button type="submit">Submit</button>
</form>

Результат:

Радиокнопки

Меню select – это идеальное решение для HTML-формы с объемным списком. Однако при наличии 5 и менее вариантов выбора, лучше реализовать их через радиокнопки.

В отличие от меню select, радиокнопки (radio button) сразу показывают все доступные опции. Пользователь по-прежнему может выбрать только один вариант.

Атрибуты:
value – определение значений заданных вариантов.

Примечание: При выделении одного варианта и попытке выделения другого первый выбор удалится. Это реализуется благодаря атрибуту name, в котором прописана принадлежность этих двух радиокнопок к одной группе.

Пример:

<form action="index.html" method="post">
	<label>Age:</label>
	<input type="radio" id="under_16" value="under_16" name="user_age"><label for="under_16" class="light">Under 16</label><br>
	<input type="radio" id="over_16" value="over_16" name="user_age"><label for="over_16" class="light">16 or Older</label>
</form>

Результат:

Чекбоксы

Иногда необходимо создать некую группу различных вариантов, из которых пользователь сможет выбрать несколько. С этим помогут чекбоксы.

Атрибуты:
value – определение значений заданных вариантов.
checked – отметка о предвыборе данного варианта, т.к. по умолчанию у чекбоксов нет выбранного значения. Важно помнить, что это логический атрибут (boolean).

Синтаксис:

<input type="checkbox" checked id="name" value="abhishek" name="user_name" />

В примере ниже каждый отдельный вариант использовался с метками (элементом label). Для объединения чекбоксов и меток внутри HTML-формы использовался атрибут for для label и атрибут id для checkbox.

Примечание: поскольку кликать по маленьким чекбоксам неудобно, лучше оборачивать элемент label вокруг каждого чекбокса. Тогда при клике в области метки выделение чекбокса будет добавляться или сниматься. Однако в примере ниже этого не сделано.

Пример:

<form action="index.html" method="post">
	<label>Interests:</label><br>
	<input type="checkbox" id="engineering" value="interest_engineering" name="user_interest"><label class="light" for="engineering">Engineering</label><br>
	<input type="checkbox" id="business" value="interest_business" name="user_interest"><label class="light" for="business">Business</label><br>
	<input type="checkbox" id="law" value="interest_law" name="user_interest"><label class="light" for="law">Law</label>
</form>

Результат: