Список выбора html

В этом уроке HTML мы рассмотрим некоторые базовые компоненты для создания пользовательских интерфейсов, в частности, мы увидим те элементы, которые позволяют пользователям выбирать между предустановленными значениями.

HTML-флажок

С помощью флажков мы можем позволить пользователю сделать несколько вариантов. Например:

<form action="">
<fieldset>
<legend>Известные языки</legend><br>
<input type="checkbox" name="html" value="html"/> html
<br />
<input type="checkbox" name="css" value="css"/> css
<br />
<input type="checkbox" name="javascript" value="javascript"/> JavaScript
</fieldset>
</form>
Известные языки
html
css
JavaScript

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

<form action="">
<input name="html" type="checkbox" value="html" checked="checked"/>
</form>

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

<form action="">
<input name="html" type="checkbox" value="html" disabled="disabled"/>
</form>

Кнопка HTML-радио

radio button  ( «радио — кнопка» ) эта кнопка чтобы позволить вам сделать эксклюзивный выбор. Следовательно, в этом случае один выбор исключает другой. Чтобы получить этот эффект, поля должны иметь одинаковое имя и другое значение:

<form action="">
<fieldset>
<legend>Известные языки</legend>
HTML <input type="radio" name="language" value="html"/>
CSS <input type="radio" name="language" value="css"/>
JavaScript <input type="radio" name="language" value="javascript"/>
</fieldset>
</form>
Известные языки HTML CSS JavaScript

Также в этом случае можно назначить значение по умолчанию или отключить кнопку.

<form action="">
<input type="radio" name="language" value="html" checked="checked" disabled="disabled"/>
</form>

Выпадающий список HTML select

Благодаря тегу <select> вы можете создавать меню опций. В этом случае каждая запись должна быть включена в тег <option> (закрытие тега необязательно), а значение должно быть указано с помощью атрибута «value» . С атрибутом «selected» вы можете указать выбор по умолчанию:

<form>
<fieldset>
<legend>Выберите язык программирования</legend>
<select name="siti" >
<option value="html" selected="selected">html</option>
<option value="css">css</option>
<option value="javascript">javascript</option>
</select>
</fieldset>
</form>
Выберите язык программирования

Наконец, с помощью тега выбора также можно установить несколько вариантов. Как вы можете видеть, при использовании атрибута «multiple» внешний вид тега select значительно меняется:

<form>
<fieldset>
<legend>Выберите язык программирования</legend>
<select name="siti" multiple="multiple">
<option value="html" selected="selected">html</option>
<option value="css">css</option>
<option value="javascript">javascript</option>
</select>
</fieldset>
</form>
Выберите язык программирования

Используя клавишу CTRL, пользователь может сделать несколько вариантов.

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

<form>
<fieldset>
<legend>Выберите язык программирования</legend>
<select name="siti" size="2" multiple="multiple">
<option value="html" selected="selected">html</option>
<option value="css">css</option>
<option value="javascript">javascript</option>
</select>
</fieldset>
</form>
Выберите язык программирования

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *