Вкратце о формах - Блог ITVDN
ITVDN: курсы программирования
Видеокурсы по
программированию

    Выбери свою IT специальность

    Начать бесплатно

    Выбери свою IT специальность

    Начать бесплатно

      Вкратце о формах

      Введение

      Формы – не самая простая тема в изучении 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/

      КОММЕНТАРИИ И ОБСУЖДЕНИЯ

      Пакеты подписки с доступом ко всем курсам и сервисам

      Стартовый
      • Все видеокурсы на 3 месяца
      • Тестирование по 10 курсам
      • Проверка 5 домашних заданий
      • Консультация с тренером 30 мин
      Базовый
      • Все видеокурсы на 6 месяцев
      • Тестирование по 16 курсам
      • Проверка 10 домашних заданий
      • Консультация с тренером 60 мин
      Премиум
      • Все видеокурсы на 1 год
      • Тестирование по 24 курсам
      • Проверка 20 домашних заданий
      • Консультация с тренером 120 мин
      new
      Премиум Plus
      • Все видеокурсы на 1 год
      • Тестирование по 24 курсам
      • Проверка 20 домашних заданий
      • Консультация с тренером 120 мин
      • Скачивание видео уроков
      Notification success
      Мы используем cookie-файлы, чтобы сделать взаимодействие с нашими веб-сайтами и услугами простым и значимым.