Формы ч. 2

Видеоурок

Этот урок также доступен в видеоформате

Смотреть

<button>
— (с англ. button — кнопка) один из важнейших тегов для форм и для всего HTML. Является интерактивным, а потому не может быть вложен в другие интерактивные теги. Обладает предустановленными браузерными стилями, как правило серым фоном и чёрной границей, слегка закруглёнными углами. Также может иметь предустановленные стили для состояний :hover, :active.

Тег <button> не имеет какого-либо функционала по умолчанию, т.е. изначально в html документе это кнопка, которая ничего не делает.

                

                <button>Привет, нажми меня скорее!</button>

Разработчики добавляют возможности кнопкам при помощи JavaScript. Кнопки могут открывать\закрывать модальные окна, запускать анимации, загружать списки товаров и т.д. В кнопку можно добавлять содержимое, и довольно часто это не только текст, а также иконки (как на сайте школы) и даже иногда целые div`ы с анимациями.

В урок по формам кнопки попали не случайно. Дело в том, что в HTML, помимо <input>, описанных в предыдущем уроке, есть ещё другие type, такие как button, submit, reset, image. Разумеется, они предназначались для использования внутри форм, однако в настоящее время не рекомендуются к использованию, поскольку <button> полностью заменяет все эти типы.

<input type="button" value="Привет, нажми меня скорее!" > — создаёт кнопку, полностью идентичную простому тегу <button>. Текст кнопки в таком случае указывается в атрибуте value. Значение данного элемента не передаётся вместе с данными формы. Этот тип не следует использовать в качестве кнопки, потому что он, как и любой другой инпут не может иметь содержимого. Это значит, что вы сможете создать при помощи него кнопку с текстом, но не сможете создать кнопку с иконкой. Вместо этого типа используйте <button>.

<input type="submit" value="Отправить форму" > — создаёт также кнопку, которая обладает уже функционалом отправки формы, если помещена в <form> или если связана с ней при помощи атрибута. Данная форма будет отправляться по клику на кнопку-input:

                

                <form action="test.php" target="_blank" method="post" id="main-form">
    <input type="submit" value="Отправить">
</form>

Не используется по той же самой причине — не может иметь содержимого, кроме текста. Заменяется полностью идентичным тегом <button type="submit" >, клик по которой будет отправлять форму:

                

                <form action="test.php" target="_blank" method="post" id="main-form">
    <button type="submit">Отправить</button>
</form>

<input type="reset" value="Очистить форму" > — также предустановленная в браузере кнопка. Она очищает полностью форму, удаляя данные, которые ввёл пользователь. Не используется по той же указанной выше причине. Заменена идентичным тегом <button type="reset" >:

                

                <form action="test.php" target="_blank" method="post" id="main-form">
    <button type="submit">Отправить</button>
    <button type="reset">Очистить форму</button>
</form>

<input type="image" > — создаёт кнопку-изображение, которая обладает функционалом type="submit". Осталась в HTML с тех времён, когда ещё не было тега <button> и когда создать изображение с функционалом отправки формы было очень непросто. Как видите, для подобных целей даже сделали отдельный type. В дополнение к данному тегу использовались атрибуты src, width, height, так что в старом виде submit мог выглядеть следующим образом (клик по кнопке-картинке отправлял форму):

                

                <form action="test.php" target="_blank" method="post" id="main-form">
    <input type="image" src="submit-icon.png" width="120" height="44">
</form>

По понятным причинам данный type не используется, а теперь используется <button type="submit" > с добавлением любой необходимой иконки, текста, анимации и пр.

              

              <form action="test.php" target="_blank" method="post" id="main-form">
                <button type="submit">
                <img src="submit-icon.png" alt="" class="btn-icon">
                Отправить форму
                </button>
                </form>

Повторимся, кнопки с соответствующими типами submit, reset обладают этим функционалом только в пределах тега <form>, либо если связаны с формой через атрибут form (описан в предыдущем уроке, применяется идентично и для <button>).

Помимо всех атрибутов, которые мы уже рассмотрели, есть ещё несколько весьма простых. По множеству упомянутых причин они могут применяться к <button type="submit" >.

formaction
— переопределяет значение атрибута action, указанное в <form>. Форма будет отправлена не на action.php, а на test.php:

              

              <form action="https://babyfrontent.ru/lessons/action.php" target="_blank" method="post" id="main-form">
    <p>
        <label for="username">Имя пользователя:</label>
        <input id="username" required type="text" name="username">
    </p>
    <p>
        <label for="usertel">Телефон пользователя:</label>
        <input id="usertel"  type="tel" name="usertel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="333-333-4444">
    </p>
    <button type="submit" formaction="https://babyfrontent.ru/lessons/test.php/">Отправить</button>
</form>

formenctype, formmethod, formnovalidate, formtarget
— переопределяют значения соответствующих атрибутов <form>. Значения могут быть такие же, как и у соответствующих атрибутов.

              

              <form action="https://babyfrontent.ru/lessons/action.php" target="_self" enctype="multipart/form-data" method="get" id="main-form">
    <p>
        <label for="username">Имя пользователя:</label>
        <input id="username" required type="text" name="username">
    </p>
    <p>
        <label for="usertel">Телефон пользователя:</label>
        <input id="usertel"  type="tel" name="usertel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="333-333-4444">
    </p>
    <button type="submit" formaction="https://babyfrontent.ru/lessons/test.php/" formenctype="application/x-www-form-urlencoded" formmethod="post"  formtarget="_blank" formnovalidate>Отправить</button>
</form>

Данная форма будет отправлена на test.php, будет закодирована по стандартному алгоритму, метод будет post, результат отправки данных отобразится в новом окне, валидации не будет. Все эти опции определены в теге <form> и переопределены в <button type="submit" >.

Кнопки могут обладать ещё третим типом, это type="button". В таком случае кнопка не получает никакого особенного функционала, а ведёт себя также, как и кнопка вообще без указания type, даже если находится внутри <form>. В примере две кнопки будут одинаково ничего не делать, пока разработчик не укажет это при помощи JavaScript:

              

              <button type="button">Привет, я кнопка!</button>
<button>И я тоже!</button>

Для <button type="submit" > можно указывать атрибуты name, value, которые вам уже знакомы и которые работают схожим образом, как и для <input>. Это может быть использовано для того, чтобы создать несколько разных кнопок отправки формы и передавать в них разные значения, а на сервере в зависимости от этого производить различные операции с данными. Если привести другой пример, мы можем создать очень простую и вместе с тем очень эффективную форму-опросник всего из двух кнопок и вообще без каких-либо <input>:

              

              <form action="https://babyfrontent.ru/lessons/test.php" method="post" target="_blank">
    <p>Вам нравится школа BabyFrontent?</p>
    <button type="submit" name="review" value="good">Нравится</button>
    <button type="submit" name="review" value="very good">Очень нравится</button>
</form>

Данные на сервере будут получены или «good», или «very good», в зависимости от того, на какую кнопку-submit нажал пользователь. Разумеется, вы можете создать не две, а три, четыре и более кнопок с разными значениями и так легко и просто собирать отзывы, проводить опросы и пр.

Также вы можете создать всего одну кнопку submit. Если не присваивать ей name, value, а для <form> указать например action="/contacts.html", то в результате мы получаем… обыкновенную ссылку!

              

              <form action="contacts.html" method="post">
    <button type="submit">Контакты</button>
</form>

Всё, что вам требуется — стилизовать кнопку нужным образом, и форма будет работать как обычная ссылка. Удивительно, правда? Хотя подобные формы встречаются не часто и вам не следует использовать такие конструкции вместо обычных ссылок, всё же вы можете увидеть их в различных движках сайтов и интернет магазинов.

<textarea>
— (с англ. text area — область текста) элемент, аналогичный практически во всём <input type="text" >, за исключением в основном того, что это многострочный элемент. Как правило его мы используем для добавления пользователем комментариев, отзывов на товар, обращений в техническую поддержку и подобных случаях, т.е. когда одной строки, предоставляемой <input> нам недостаточно.

Это простой пример…

              

              <form action="https://babyfrontent.ru/lessons/test.php" method="post">
    <label for="message">Введите сообщение:</label><br>
    <textarea name="message" id="message" cols="30" rows="10">Кто-то уже ввёл сообщение до вас...
    </textarea>
    <br>
    <button type="submit">Отправить</button>
</form>

Подобно <input>, тег принимает атрибуты name, id, и аналогично связывается с <label>. Особенные атрибуты это cols и rows, указывающие соответственно количество столбцов (символов в строке) и строк. Эти два атрибута обязательны по стандартам HTML, поэтому вы должны их указывать всегда, исходя из приблизительных размеров текста, который вероятно будет помещаться в это поле. Размер тега регулируется по-прежнему при помощи CSS, и это нормальная практика. Поэтому атрибуты cols, rows нужны скорее про запас и для соответствия стандартам.

Обратите внимание, что у <textarea> не может быть атрибута value. Если в случае с <input> мы указывали изначальное значение при помощи этого атрибута, в случае с <textarea> такое значение указывается непосредственно внутри тега.

Атрибуты autocomplete, autofocus, disabled, form, maxlength, minlength, spellcheck, placeholder, readonly, required доступны для <textarea>, правила для них действуют такие же, как и для <input>.

Вы могли обратить внимание на небольшой треугольник в правом нижнем углу элемента. Тег <textarea> пользователь может «растягивать», зажав этот треугольник мышкой. Эта опция поддерживается многими тегами, однако для <textarea> она предустановлена браузерами по умолчанию и не регулируется атрибутами. Она отключается\включается при помощи CSS правила resize. В некоторых случаях для <textarea> она действительно весьма эффективна. Например, если пользователь желает ввести большое сообщение, он может увеличить поле до удобных размеров.

Данный тег, подобно <input>, можно довольно гибко редактировать при помощи CSS, т.е. изменять его рамку, фон, добавлять тень, отступы и пр.

Несмотря на это, есть одна особенность, которая не позволяет нам изменять полностью всё в этом элементе — это его многострочность. Дело в том, что различные браузеры отображают введённый текст по-разному, некоторые начинают ввод сверху поля, некоторы снизу. Это поведение никак не переопределить, поэтому вам не следует экспериментировать со свойствами CSS, которые отвечают за вертикальную ориентацию текста.

<select>,<option>,<optgroup>
— (с англ. select — выбор, option — вариант, опция, option group — группа опций) — теги, позволяющие создать выпадающий список для формы с предустановленными вариантами. <select> является контейнером и главным тегом, принимающим значение и передающим данные на форму, разумеется при помощи атрибута name. <option> это вспомогательный тег и он не может использоваться отдельно от <select>. Хотя атрибут value мы указываем именно для <option>, получать и передавать это значение будет всё равно <select>. <optgroup> является не имеющим значения заголовком для <option>, которые сгруппированы по каким-либо критериям. Пример рабочей формы представлен ниже. Пожалуйста, рассмотрите его очень подробно:

              

              <form action="https://babyfrontent.ru/lessons/test.php" method="post">
    <label for="time">Выберите время для записи:</label><br>
    <select name="time" id="time">
            <optgroup label="Утро">
               <option value="6-00">Самое раннее</option>
               <option value="9-00" label="Обычное утро"></option>
           </optgroup>
            <optgroup disabled label="День">
               <option value="12-00">Полдень</option>
               <option value="15-00">После обеда</option>
           </optgroup>
            <optgroup label="Вечер">
               <option value="18-00">После работы</option>
               <option value="21-00">После заката</option>
           </optgroup>
         </select>
    <br>
    <button type="submit">Отправить</button>
</form>

Контейнером, как уже было сказано, является <select>. Именно для него мы должны указывать name и id для связывания с <label>. Внутрь него мы помещаем <optgroup>, если нам нужны заголовки (текстом для заголовка служит содержимое атрибута label), а также <option> — варианты, доступные для выбора. У <optgroup> может быть всего два атрибута, это label, определяющий текст группы, а также disabled, отключающий ВСЮ данную группу. Учтите, что <optgroup> является элементом исключительно для визуальной группировки. Он никак не группирует данные и не связывает их для отправки на сервер!

Текст отдельной опции мы уже помещаем в сам тег <option> или в его атрибут label (но не одновременно туда и туда). В то же время значение, которое будет передаваться в форме на сервер, указываем в атрибуте value и, как видите, оно может отличаться от текста-содержимого. Когда пользователь выберет нужные ему <option>, данное значение будет присвоено тегу <select>, а в дальнейшем передано на сервер. При выборе опции соответствующий тег <option> получает булевый атрибут selected (хотя даже в инструментах разработчика вы этого не увидите, это действительно так и проверяется при помощи JavaScript). Также этот атрибут можно указывать изначально в html файле, в таком случае данная опция будет выбрана за пользователя уже при загрузке страницы.

              

              <p>Вы уверены?</p>
<select name="sure">
       <option>Выберите ответ</option>
       <option value="true" selected>Уверен!</option>
       <option value="false">Не совсем...</option>
</select>

В примере выше присутствуют три варианта, первый из которых не имеет значения и нужен для лучшей ориентации пользователя. Так довольно часто делают в <select> — оставляют первую опцию без значения, как подсказку. При этом вторая опция имеет атрибут selected, значит этот вариант ответа будет выбран изначально. Пользователь, разумеется, сможет изменить ответ и отправить на сервер подходящий.

Для <select> доступны атрибуты autocomplete, disabled, form, required, которые были рассмотрены для <input>.

Индивидуальными являются атрибуты multiple и size. Первый из них позволяет выбирать одновременно несколько опций. Size может быть указан только вместе с multiple и определяет, сколько опций будет показано в <select> одновременно. Чтобы множественный пример работал, выбирать опции нужно с зажатым Ctrl для Windows, Command для Mac:

              

              <form action="https://babyfrontent.ru/lessons/test.php" method="get">
    <label for="time">Выберите время для записи:</label><br>
    <select name="time[]" id="time" multiple size="4">
           <option value="6-00">Самое раннее</option>
           <option value="9-00">Обычное утро</option>
           <option value="12-00">Полдень</option>
           <option value="15-00">После обеда</option>
           <option value="18-00">После работы</option>
           <option value="21-00">После заката</option>
     </select>
    <br>
    <button type="submit">Отправить</button>
</form>

Обратите также внимание на то, что в случае с multiple мы должны указать name="time[]", чтобы значения сохранились в массив (объяснения в предыдущем уроке). Если этого не сделать, значение из последнего выбранного <option> перезапишет предыдущее. В итоге только одно значение попадёт на сервер.

Благодаря атрибуту size в теге отображается не одна опция, как прежде, а сразу четыре. Для множественного выбора это определённо удобнее.

Итак, подведём итог по тройке <select>,<option>,<optgroup>:
<select> является контейнером для двух других тегов, именно он определяет name для данных и передаёт выбранное среди <option> значение на сервер. Среди его атрибутов — autocomplete, disabled, form, required, работающие аналогично как и для <input>, а также атрибуты:

multiple — позволяет выбрать несколько опций
size — определяет, сколько опций будет одновременно видно для пользователя.

<option> является отдельным вариантом-опцией, содержащей значение и текст, который будет виден для пользователя на веб странице. При выборе опции значение передаётся в родительский <select>. Атрибуты:

disabled — отключает отдельную опцию
label — определяет текст, видимый для пользователя. Можно указывать текст прямо в теле тега вместо данного атрибута.
selected — указывает, что данная опция будет выбрана по умолчанию
value — содержит значение, которое будет передаваться на сервер, если данная опция выбрана

<optgroup> — не является опцией, служит контейнером и заголовком для нескольких опций. Атрибуты:

disabled — если указан, отключает ВСЮ группу опций.
label — определяет текст-заголовок для группы опций, этот текст будет виден пользователю

Последнее, но весьма важное, что хотелось бы сказать об этих элементах — в различных браузерах они могут отображаться по-разному. Ни один из них не может быть полностью стилизован при помощи CSS. Для собственной стилизации <select> разработчики создали библиотеки, работающие на основе JavaScript. Эти библиотеки анализируют указанный <select>, количество его <option> и создают соответствующие им копии из обыкновенных <div>, которые полностью стилизуются. Созданные элементы связываются при помощи JavaScript с нужным <select> и передают ему выбранное значение, которое затем благополучно отправляется на сервер.

Что касается мобильных устройств, здесь библиотеки для <select> могут вообще не использоваться, потому что мобильные браузеры при выборе опций активируют собственное меню. По замыслу разработчиков браузеров эти меню достаточно большие и контрастные, чтобы сделать выбор опции максимально удобным для пользователя:

Конечно, последнее слово за менеджером проекта\заказчиком, однако я считаю, что разработчики мобильных браузеров в данном вопросе правы. Usability и доступность важнее, чем внешний вид.

<datalist>
— (с англ. datalist — список данных) элемент, содержащий список предопределённых опций-подсказок для ввода данных в <input>.

              

              <form action="https://babyfrontent.ru/lessons/test.php" method="post">
    <label for="name">Ваше имя:</label><br>
    <input list="names" type="text" id="name" name="username">
    <datalist id="names">
        <option value="Борис">Борис</option>
        <option value="Мария">Мария</option>
        <option value="Шарик">Шарик</option>
    </datalist>
    <br>
    <button type="submit">Отправить</button>
</form>

В отличие от <select>, где мы предоставляем список возможных вариантов, список <datalist> не является обязательным для выбора, а является предложением. В нём при помощи PHP можно указывать наиболее часто используемые варианты заполнения данного поля, тем самым повышая usability. Например, это могут быть самые популярные места для встречи на сервисе знакомств, или 4-5 самых рейтинговых мест вашего города на туристическом портале, и т.д.

Тег <datalist> использует уже знакомые нам опции, и они работают аналогично, как и для <select>, за исключением того, что нельзя использовать disabled опции, а также нельзя использовать <optgroup>. Такие опции и группы не будут отображены:

              

              <input list="names" type="text" id="name" name="username">
<datalist id="names">
    <option disabled>ИМЕНА</option>
    <option value="Борис">Борис</option>
    <option value="Мария">Мария</option>
    <option value="Шарик">Шарик</option>
</datalist>

              

              <input list="names" type="text" id="name" name="username">
<datalist id="names">
<optgroup label="ИМЕНА">
    <option value="Борис">Борис</option>
    <option value="Мария">Мария</option>
    <option value="Шарик">Шарик</option>
</optgroup>
</datalist>

Однако вы можете поступить иначе, и это сработает:

              

              <input list="names" type="text" id="name" name="username">
<datalist id="names">
    <option>ИМЕНА</option>
    <option value="Борис">Борис</option>
    <option value="Мария">Мария</option>
    <option value="Шарик">Шарик</option>
</datalist>

Хотя в некотором смысле первая опция «ИМЕНА» будет выглядеть как заголовок для находящихся ниже опций, я бы не рекомендовал пользоваться таким способом. Пользователь может выбрать в качестве данных первую опцию, которую вы добавили как заголовок, и тогда на сервер отправится значение «ИМЕНА». Уверен, это не то, чего вы ожидаете.

<datalist>, в общем-то, и не должен содержать много опций-вариантов. Большое количество предложенных имён может наоборот запутать пользователя и в результате не улучшить, а ухудшить usability. Используйте 3-5 подсказок, их можно разместить в списке и без всяких заголовков.

Как вы можете догадаться, сам по себе <datalist> скрыт на странице. Браузеры отображают его только при фокусе на поле ввода, связанном со списком при помощи атрибутов list и id. Обратите внимание на эти атрибуты в примерах выше. Для необходимого <input> мы указываем атрибут list, а в значении указываем идентификатор id того списка, с которым хотим связать этот <input>.

Данный тег также не может быть стилизован при помощи CSS и имеет различное отображение в разных браузерах. Для создания уникального стиля для него используйте специальные библиотеки, собственные <div> и JavaScript.

<output>
— (с англ. output — выход, выходные данные) является семантическим контейнером для данных, которые вебсайт получает от сервера или рассчитывает самостоятельно.

              

              <p>
    Пользователей онлайн: <output id="users-online"></output>
</p>

Помимо глобальных, может иметь собственные атрибуты:

for
— разделённый пробелами список идентификаторов id элементов, данные которых берутся для вычисления. В случае, если мы не отправляем данные на сервер, а всё рассчитываем тут же на странице при помощи JavaScript, для подсказки, откуда берутся значения, можно указать этот атрибут:

              

              Ширина:
<input type="number" id="width"><br>
Длина:
<input type="number" id="length"><br>
Результат:
<output id="square" for="width length"></output>

Логика взятия значений и вычисления описывается на JavaScript. Атрибут for не имеет к данным вычислениям никакого отношения, т.е. он является всего лишь подсказкой для нас и для других разработчиков, не более того. Вы можете проигнорировать его, а комментарии указать в том месте, где производятся вычисления JavaScript.

form, name
— работают аналогично, как и для <input>, т.е. form указывает на форму, которой принадлежит данный тег, а name определяет имя для тега. Поскольку данные из тега <output> не отправляются на сервер, даже если он находится внутри формы и обладает name и содержимым, использовать два этих атрибута не имеет смысла.

Используйте данный тег только для вывода данных, полученных с сервера или в результате вычислений JavaScript. Подробнее на странице тега в справочнике.

<fieldset>,<legend>
— (с англ. fieldset — группа полей, legend — легенда карты, надпись) теги, служащие для визуального разделения полей ввода в пределах формы и для создания заголовков.

              

              <form action="https://babyfrontent.ru/lessons/test.php" method="post" target="_blank">
  <fieldset>
    <legend>Ваш любимый цвет</legend>
    <input type="radio" id="black" name="color" value="black">
    <label for="black">Черный</label><br/>
    <input type="radio" id="red" name="color" value="red">
    <label for="red">Красный</label><br/>
    <input type="radio" id="green" name="color" value="green">
    <label for="green">Зелёный</label>
    <br>
    <button type="submit">Отправить</button>
  </fieldset>
</form>

<fieldset> обладает предопределёнными стилями, и обычно это чёрная граница шириной в 2 пикселя, небольшие внутренние отступы по сторонам. <legend> располагается на линии верхней границы и по умолчанию больше никак не стилизуется. Он может быть как однострочным, так и многострочным, если ширина формы не позволяет поместиться тексту в одну строку.

<fieldset> может иметь следующие атрибуты:

disabled
— отключает все элементы в пределах данной группы.

              

              <form action="https://babyfrontent.ru/lessons/test.php" method="post" target="_blank">
  <fieldset disabled>
    <legend>Ваш любимый цвет</legend>
    <input type="radio" id="black" name="color" value="black">
    <label for="black">Черный</label><br/>
    <input type="radio" id="red" name="color" value="red">
    <label for="red">Красный</label><br/>
    <input type="radio" id="green" name="color" value="green">
    <label for="green">Зелёный</label>
    <br>
    <button type="submit">Отправить</button>
  </fieldset>
</form>

form
— подобно случаю с <input> позволяет находящийся вне формы <fieldset> связать с любой из форм на веб странице, указав её идентификатор id в качестве значения

name
— определяет имя группы полей. Не отправляется на сервер вместе с данными формы, однако может использоваться в работе CSS, JavaScript.

Данные теги могут быть стилизованы различным образом, однако в случае, если вы захотите вынести <legend> с верхней границы <fieldset> в другое место, лучше воспользуйтесь другими тегами, например <p>,<span> и стилизуйте их нужным образом. Теги <fieldset> и <legend> являются всего лишь визуальными разделителем и заголовком, они не обладают дополнительным функционалом, не индексируются поисковыми роботами и пр. По этим причинам они легко могут заменяться для создания особенного внешнего вида формы привычными нам <div>, <span> и пр.

Домашнее задание к уроку

Домашнее задание необходимо для проверки усвоенного материала. Скачайте оба файла.
В первом находится задание для решения, а во втором готовый код для самопроверки

Задание (pdf)Решение (zip)