ITVDN logo
Видеокурсы по
программированию

Доступ более чем к 7700 видеоурокам от $19.99

Подписка
ITVDN logo
Видеокурсы по
программированию

Доступ более чем к 7700 видеоурокам от $19.99

Подписка

Введение

Формы – не самая простая тема в изучении HTML. Перемещаться по странице с контентом – это одно, а вот заполнять поля формы – совсем другое. Вот почему хороша идея добавить несколько элементов к форме.


Labels

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

<form>

        <label for="yourName">Your Namelabel>

        <input name="yourName" id="yourName">

Плюсом использования labels также есть то, что они кликабельны, делая активным текущее поле формы. Атрибуты name и id обязательны: name нужен форме для управления полем, а id - для связи label с ним.

Группы элементов и их заголовки

Можно сгруппировать несколько однотипных полей имен (полное имя, фамилия и тд.) или адресов (Адрес1, адрес2, регион, страна, индекс и тд.), используя тег fieldset. Тегом legend определяется оглавление сгруппированных объектов.

<form action="somescript.php">

        <fieldset>

            <legend>Namelegend>

            <p>First name

                <input name="firstName">p>

            <p>Last name

                <input name="lastName">p>

        fieldset>

        <fieldset>

            <legend>Addresslegend>

            <p>Address

                <textarea name="address">textarea>p>

            <p>Postal code

                <input name="postcode">p>

        fieldset>

Большинство браузеров по умолчанию отображает группу элементов в рамке с названием сверху слева. Конечно, при желании все изменяется при помощи CSS.

Выбор варианта

Элемент optgroup объединяет в группу варианты выбора. Также нужен атрибут label. Браузеры автоматически сделают выпадающие списки из таких групп.

<select name="country">

        <optgroup label="Africa">

            <option value="gam">Gambiaoption>

            <option value="mad">Madagascaroption>

            <option value="nam">Namibiaoption>

        optgroup>

        <optgroup label="Europe">

            <option value="fra">Franceoption>

            <option value="rus">Russiaoption>

            <option value="uk">UKoption>

        optgroup>

        <optgroup label="North America">

            <option value="can">Canadaoption>

            <option value="mex">Mexicooption>

            <option value="usa">USAoption>

        optgroup>

    select>

Поля доступа

Поля форм (группы элементов) нуждаются в возможности доступа без использования указателей (мыши). На помощь приходят такие элементы, как tab stops и access keys. Атрибуты access key и tabindex добавляются в теги input и legend.

<input name="firstName" accesskey="f" tabindex="1">

Источник: http://www.htmldog.com/guides/html/advanced/forms/

СТАТЬИ ПО СХОЖЕЙ ТЕМАТИКЕ
ВИДЕО КУРСЫ ПО СХОЖЕЙ ТЕМАТИКЕ
КОМЕНТАРИИ И ОБСУЖДЕНИЯ
ОЦЕНИТЕ ДАННЫЙ МАТЕРИАЛ

ПОДПИСКА НА ITVDN ВЫГОДА ДО 29.95$ НА ОБУЧЕНИЕ ПРЕСТИЖНЫМ ПРОФЕССИЯМ!

1 месяц19.99$
подписка

легкий старт в обучении

3 месяца49.99$
подписка

выгода от подписки до9.98$

6 месяцев89.99$
подписка

выгода от подписки до29.95$