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

Все о datalist, fieldset и button в HTML

Привет, в рамках этого урока мы разберемся оставшимися тегами формы, а именно: datalist, fieldset, legend, button. Также разберемся в нюансах и частоте использования этих тегов. Текстовая версия урока в полной версии этой статьи.

Datalist

<datalist> - содержит набор опций (<option>), доступных для выбора. Выбранное значение будет установлено для элемента <input>, с атрибутом list.

Не стоит использовать его вместо тега <select>, но можно использовать как вспомогательный тег для <input>. Причина в том что его сложнее обрабатывать через JavaScript.

<form action="">

    <label for="ice-cream-choice">Choose a flavor:</label>

    <input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

    <datalist id="ice-cream-flavors">
        <option value="Chocolate">
        <option value="Coconut">
        <option value="Mint">
        <option value="Strawberry">
        <option value="Vanilla">
    </datalist>

</form>

Fieldset

<fieldset> - существует для группировки <input> внутри тега <form>, а также помогает удобно управлять группой полей.

<form action="#">
    <h3>Registration form</h3>
    <fieldset>
        <div>
            <label for="name_input">First name:</label>
            <input id="name_input" type="text" placeholder="Email">
        </div>

        <div>
            <label for="surname_input">Surname:</label>
            <input id="surname_input" type="text" placeholder="Surname">
        </div>
    </fieldset>
    <br>
    <fieldset disabled>
        <div>
            <label for="email_input">Email:</label>
            <input id="email_input" type="text" placeholder="Email">
        </div>

        <div>
            <label for="password_input">Password:</label>
            <input id="password_input" type="text" placeholder="Password">
        </div>
    </fieldset>


</form>

У <fieldset> также есть несколько атрибутов, которые помогают управлять сразу всей группой <input>.

name - задает общее имя для группы

disabled - делает группу недоступной для редактирования

form - если <fieldset> лежит вне тега <form> то этот атрибут позволит вам связать их.

<form action="" id="example_form">
    <h3>Example form</h3>

    <label>
        <input type="text" placeholder="Some example input">
    </label>

</form>

<fieldset form="example_form">
    <div>
        <label for="name_2_input">First name:</label>
        <input id="name_2_input" type="text" placeholder="Email">
    </div>

    <div>
        <label for="surname_2_input">Surname:</label>
        <input id="surname_2_input" type="text" placeholder="Surname">
    </div>
</fieldset>

Legend

<legend> - Является заголовком для группы элементов, сгруппированных через <fieldset>

<form action="">
    <h3>Another Example Form</h3>

    <fieldset>
        <legend>User info</legend>

        <div>
            <label for="name_3_input">First name:</label>
            <input id="name_3_input" type="text" placeholder="Email">
        </div>

        <div>
            <label for="surname_3_input">Surname:</label>
            <input id="surname_3_input" type="text" placeholder="Surname">
        </div>
    </fieldset>

    <br>

    <fieldset disabled>
        <legend>User credentials</legend>

        <div>
            <label for="email_3_input">Email:</label>
            <input id="email_3_input" type="text" placeholder="Email">
        </div>

        <div>
            <label for="password_3_input">Password:</label>
            <input id="password_3_input" type="text" placeholder="Password">
        </div>
    </fieldset>

Button

<button> - Парный тег, который предназначен для создания кнопки, имеет схожие атрибуты с тегом <input>. Может использовать как внутри <form> заменяя собой <input type="button">, так и просто как отдельный элемент на странице.

<form action="">
    <h3>Another Example Form</h3>

    <fieldset>
        <legend>User info</legend>

        <div>
            <label for="name_3_input">First name:</label>
            <input id="name_3_input" type="text" placeholder="Email">
        </div>

        <div>
            <label for="surname_3_input">Surname:</label>
            <input id="surname_3_input" type="text" placeholder="Surname">
        </div>
    </fieldset>

    <br>

    <fieldset disabled>
        <legend>User credentials</legend>

        <div>
            <label for="email_3_input">Email:</label>
            <input id="email_3_input" type="text" placeholder="Email">
        </div>

        <div>
            <label for="password_3_input">Password:</label>
            <input id="password_3_input" type="text" placeholder="Password">
        </div>
    </fieldset>

    <fieldset>
        <legend>Form Controls</legend>
        <button type="submit">Submit</button>
        <button type="reset">Clear Form</button>
    </fieldset>
</form>

Файлы с урока

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

Источники:

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

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

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

Получить