{"id":3847,"url":"\/distributions\/3847\/click?bit=1&hash=bc07366a6481421a3285442ad4d15e52e40fcff690631a2a988f8ab7935f89f9","title":"\u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u043a\u043e\u0434 \u043d\u043e\u0432\u0438\u0447\u043a\u043e\u0432 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0437\u0430 \u044d\u0442\u043e \u0434\u0435\u043d\u044c\u0433\u0438","buttonText":"\u041a\u0430\u043a \u044d\u0442\u043e?","imageUuid":"2d5b949a-5ac1-587d-aac5-43560e643b30","isPaidAndBannersEnabled":false}
Vladimir Shaitan

Теги для создания форм. Часть №5. <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>

Открыть на CodePen

У <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>

Открыть на CodePen

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> </form>

Открыть на CodePen

P.S. Больше уроков у меня на канале

0
6 комментариев
Написать комментарий...
gt gt

А есть текстовая альтернатива? Чтобы читать примерно как этот пост, а не смотреть видео

Ответить
Развернуть ветку
Vladimir Shaitan
Автор

привет, текстовая альтернатива чего ? то я не понял(

Ответить
Развернуть ветку
gt gt

видео(

Ответить
Развернуть ветку
Vladimir Shaitan
Автор

Какого видео?, этот материал, комментарии к которому вы пишете, текстовый

Ответить
Развернуть ветку
gt gt

Видео на канале, не только про HTML, но и остальное

Ответить
Развернуть ветку
Vladimir Shaitan
Автор

Что-то есть в текстовом варианте, а чего-то нет. То что есть буду потихоньку выкладывать

Ответить
Развернуть ветку
Читать все 6 комментариев
null