DevGang
Авторизоваться

Теги select и textarea в HTML5

Select

<select> - элемент содержащий меню опций <option> или меню групп опций <optgroup>. Имеет схожие с <input> атрибуты, а также атрибуты multiple и size. Обычно select располагается внутри тега <form> или связывается с ним атрибутом form.

<form action="">
    <select name="some_list"></select>
</form>

<option> - тег, который используется для определения пункта списка внутри тега <select>, но также его можно встретить и в тегах. Атрибуты: selected - позволяет пред-выбрать элемент. disabled - работает как всегда. и другие.

<form action="">
    <label for="select">Select item</label>
    <select name="list" id="select">
        <option value="item-1">Item #1</option>
        <option value="item-2">Item #2</option>
        <option value="item-3">Item #3</option>
        <option value="item-4">Item #4</option>
    </select>
</form>

<optgroup> - позволяет группировать опции внутри <select>. Имеет атрибуты - name и disabled.

name - задает имя группы.

disabled - исключает возможность выбора элементов из группы.

label - Задает имя группы которое видно пользователю.

<form action="">
    <label for="select2">Select item</label>

    <select name="list" id="select2">

        <optgroup label="Veggie">
            <option value="item-1" selected>Mushrooms</option>
            <option value="item-2">Carrot</option>
        </optgroup>

        <optgroup label="Meat" disabled>
            <option value="item-3">Pork</option>
            <option value="item-4">Chicken</option>
        </optgroup>

    </select>
</form>

Атрибут multiple тега <select> позволяет выбирать не один, а сразу несколько <option> если зажата клавиша CTRL (для windows или linux) или COMMAND (для macOS)

<form action="">
    <label for="select3">Select item</label>

    <select name="list" id="select3" multiple>

        <optgroup label="Veggie">
            <option value="item-1" selected>Mushrooms</option>
            <option value="item-2">Carrot</option>
        </optgroup>

        <optgroup label="Meat" disabled>
            <option value="item-3">Pork</option>
            <option value="item-4">Chicken</option>
        </optgroup>

    </select>
</form>

Textarea

<textarea> - позволяет добавить поле для ввода большого количества текста, обычно располагается внутри тега <form>. Имеет атрибуты схожие с <input>, а также cols и rows.

cols - определяет ширину <textarea>

rows - определяет высоту <textarea>

<form action="">
    <label for="message">Your massage</label>
    <textarea
            name="user_message"
            id="message"
            cols="30"
            rows="10"
            placeholder="Your message..."
    ></textarea>
</form>

У тега <textarea> нет атрибута value, а если вы ходите установить ему какое-то значение по-умолчанию, нужно писать его между открывающим и закрывающим тегами.

<form action="">
    <label for="message2">Your massage</label>
    <textarea
            name="user_message"
            id="message2"
            cols="30"
            rows="10"
            placeholder="Your message..."
    >Some predefined data goes here</textarea>
</form>
* * *

Файлы с урока 

select

textarea

P.S. Подписывайся на мой youtube и telegram каналы чтобы получать больше контента )

Источники:

#JavaScript #CSS #HTML
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

В подарок 100$ на счет при регистрации

Получить