Первая форма
Формы нужны для того, чтобы отправлять данные с
веб-страницы на веб-сервер, который сможет эти данные обработать:
зарегистрировать пользователя, создать сообщение на форуме, отправить письмо и
так далее. В общем, формы в вебе просто необходимы.
Чтобы создать форму, нужно использовать парный тег <form>, внутри которого размещаются
поля формы. У тега <form> есть
два важных атрибута:
• action задаёт адрес, URL, отправки формы;
• method задаёт метод отправки формы.
Пример:
<form
action="https://echo.htmlacademy.ru" method="get">
поля
формы
</form>
Для отправки формы обычно используют методы get или post. Если не указать атрибут method,
то будет использован get.
Метод get
посылает данные формы в строке запроса, то есть они видны в адресной строке
браузера и следуют после знака вопроса. Например:
(https://www.google.com/search?q=htmlacademy)
Метод get лучше
использовать в поисковых формах, потому что он позволяет получить ссылку на
результаты поиска и передать её кому-то.
Метод post
посылает данные в теле HTTP-запроса и используется, когда нужно отправить много данных и ссылка на результат обработки этих
данных не нужна. Например, при редактировании личного профиля.
Текстовое поле ввода
Большинство полей форм создаётся с помощью
одиночного тега input. У этого тега
два обязательных атрибута:
• type задаёт тип поля;
• name задаёт имя поля.
Тип поля влияет на то, как оно будет отображаться и
вести себя. Самый распространённый тип — это text, который обозначает текстовое поле. Он же используется по
умолчанию. Пример:
<form
action="https://echo.htmlacademy.ru" method="get">
<input type="text" name="search">
</form>
Имя поля нужно, чтобы правильно обработать данные на
сервере. Обычно, имя поля должно быть уникальным в пределах формы, хотя есть
исключения. Для задания имени поля используют латинские буквы и цифры.
Идентификатор и значение по умолчанию
Атрибут id
поля ввода обозначает идентификатор. Он должен быть уникальным не только в
пределах формы, но и на всей странице.
Обычно идентификаторы используют для повышения
удобства работы с формой, например, создают подписи, связанные с мелкими
полями. При щелчке по таким подписям активируется связанное поле. И это удобно,
так как по большой подписи попасть легче, чем по маленькому полю. Также
идентификаторы используют в JavaScript для работы с полями.
Идентификатор в отличие от имени поля не передаётся
на сервер. Лучше использовать идентификаторы, отличающиеся от имени поля,
особенно актуально это для полей множественного выбора, которые мы разберём
далее в курсе.
Атрибут value
задаёт значение поля ввода по умолчанию. Это тоже повышает удобство.
Согласитесь, приятно зайти в огромную анкету на
каких-нибудь госуслугах, а там ваши паспортные данные уже подставлены в нужные
поля и заполнять их не надо. И всё благодаря тому, что программист добавил к
полям атрибут value с нужными
данными.
Подпись для поля ввода
Можно подумать, что сделать подпись к полю очень
просто. Пишем текст рядом с полем и всё готово:
Подпись
<input type="text" name="username">
На самом деле этого недостаточно — мы получили
просто кусок текста и поле, которые расположены рядом друг с другом, но
логически никак не связаны.
Есть специальный тег, который позволяет смело
сказать: «Этот кусок текста действительно подпись к этому полю!». Это парный
тег <label>.
Он связывает текст и поле ввода логически. А ещё
если щёлкнуть по тексту в такой подписи, то курсор переместится в
соответствующее поле.
Создавать подписи к полям с помощью <label> — хороший приём.
Используйте его.
Первый способ создать подпись — просто обернуть
текст подписи и тег поля в тег <label>,
вот так:
<label>
Подпись <input type="text"
name="username">
</label>
Надо отметить, что при оборачивании текста в тег
<label> он визуально никак не меняется, ведь главная задача подписи —
создать логическую связь.
Вот пример:
<form
action="https://echo.htmlacademy.ru" method="post">
<label>
Ваш логин <input type="text"
name="login">
</label>
<br><br>Другие поля
</form>
Связываем подпись и поле по id
Иногда обернуть поле и текст подписи в тег <label> нельзя. Например, когда
они размещены в разных ячейках таблицы.
В этом случае можно связать подпись с полем с
помощью атрибута id. Алгоритм такой:
1. Добавляем к полю ввода идентификатор с
помощью атрибута id.
2. Оборачиваем текст подписи в тег
<label>.
3. Добавляем тегу <label> атрибут for.
4. В атрибут for записываем такое же значение,
что и в атрибуте id у поля.
Например:
<label
for="user-field-id">Имя пользователя</label>
...
много-много
других тегов
...
<input id="user-field-id"
type="text" name="username">
Пример:
<form action="https://echo.htmlacademy.ru"
method="post">
<table>
<tr>
<td>
<label for="login-field">
Ваш логин
</label>
</td>
<td>
<input type="text" name="login"
id="login-field">
</td>
</tr>
<tr>
<td>Подпись</td>
Добавим ещё одно поле
Пришло время добавить в форму ещё одно поле.
Сделайте это по всем правилам хорошего тона: помимо
имени задайте полю идентификатор, добавьте подпись к полю и свяжите их.
Мы могли бы связать поле и подпись, просто обернув
их в тег <label>. Но в этом задании
мы тренируем более сложный вариант — с использованием id и for.
Вот пример:
<h1>Форма
входа</h1>
<form
action="https://echo.htmlacademy.ru" method="post">
<label for="login-field">Ваш логин</label>
<input type="text" name="login"
id="login-field">
<br><br>
<label for="password-field">Ваш пароль</label>
<input type="text" name="password"
id="password-field">
<!--
добавьте поле сюда -->
</form>
Поле для ввода пароля
Мы создаём простую форму входа. Уже есть два поля и
связанные с ними подписи. Одно из полей предназначено для ввода пароля, но
сейчас оно является простым текстовым полем.
Чтобы сделать его настоящим полем для ввода пароля,
в котором текст будет отображаться «звёздочками», нужно просто изменить
значение атрибута type на password.
Пример:
<form
action="https://echo.htmlacademy.ru" method="post">
<label for="login-field">Ваш логин</label>
<input type="text" name="login"
id="login-field">
<br><br>
<label for="password-field">Ваш пароль</label>
<input type="password" name="password"
id="password-field" value="Где же звёздочки?">
</form>
Кнопка отправки формы
Форма практически готова. Осталось добавить кнопку
для отправки формы. Такая кнопка создаётся с помощью тега <input> c типом submit.
Надпись на кнопке можно задать с помощью атрибута value. Для кнопки отправки формы
задавать имя необязательно. Но если имя задано, то на сервер будут отправляться
имя и значение кнопки.
Обычно имя для кнопки отправки задают, когда в форме
несколько кнопок, отвечающих за разные действия. Браузер отправляет на сервер
имя и значение только той из них, на которую нажал пользователь. Таким образом,
сервер может понять, какую кнопку нажали и что нужно сделать.
Пример:
<form
action="https://echo.htmlacademy.ru" method="post">
<label for="login-field">Ваш логин</label>
<input type="text" name="login"
id="login-field">
<br><br>
<label for="password-field">Ваш пароль</label>
<input type="password" name="password"
id="password-field">
<br><br>
<input type="submit" value="Войти">
</form>
Многострочное поле ввода
Мы научились создавать простейшие формы с текстовыми
полями и кнопками. А теперь познакомимся с более сложными элементами формы.
Многострочное текстовое поле создаётся с помощью
парного тега <textarea>. У
него есть атрибуты name и id, которые аналогичны атрибутам
текстового поля.
Атрибут rows
принимает целочисленное значение и задаёт высоту многострочного поля в строках.
Атрибут cols задаёт ширину поля в
символах. В качестве ширины символа берётся некоторая «усреднённая ширина».
Атрибут value
у многострочного поля отсутствует, а значение по умолчанию задаётся по-другому.
Текст, расположенный между открывающим и закрывающим тегом <textarea> и является значением по умолчанию. Вот так:
<textarea>Значение
по умолчанию</textarea>
Пример:
<form
action="https://echo.htmlacademy.ru" method="post">
<p>Список
комментариев</p>
<p>Введите ваш
комментарий:</p>
<textarea rows="10"
name="comment" id="comment-field">Текст комментария</textarea>
<input type="submit" value="Отправить">
</form>
Чекбокс или «галочка»
Поле-галочка — это тег <input> с типом checkbox.
Галочка работает по принципу «либо да, либо нет».
Если галочка стоит, то браузер посылает переменную с именем поля на сервер,
если галочки нет, то не посылается ничего. Таким образом, атрибут value не является обязательным.
Чтобы галочка стояла по умолчанию, нужно добавить к
тегу атрибут checked. Вот так:
<input
type="checkbox" checked>
Чекбокс не подразумевает выбор одного элемента из
нескольких. Поэтому если в одной форме есть несколько чекбоксов, то имена у них
должны быть разными.
Пример:
<form
action="https://echo.htmlacademy.ru" method="post">
<p>Множество
полей</p>
<p>И как всегда в конце формы
регистрации вопрос:</p>
<input type="checkbox" checked
name="subscribe" id="subscribe-field">
<label
for="subscribe-field">Подписать вас на рассылку?</label>
<input type="submit" value="Отправить">
</form>
Переключатель или «радиобаттон»
Поле-переключатель — это тег <input> с типом radio.
Обычно переключатели размещают группами по несколько
штук. Причём у переключателей из одной группы должно быть одинаковое имя и
разные значения, которые задаются c помощью value.
Таким образом, атрибут value является для
переключателей обязательным. Браузер отправляет на сервер значение value выбранного переключателя.
Простой пример:
<form
action="https://echo.htmlacademy.ru" method="post">
<p>В
тестах часто встречаются задания типа «выберите один из предложенных
вариантов».</p>
<p><i>Какой тег
обозначает «абзац»?</i></p>
<label>
<input type="radio" name="question-one"
value="p">
Тег <p>
</label>
<input type="submit" value="Отправить">
</form>
Группа переключателей
Теперь добавим ещё один вариант ответа в наш
переключатель. Для этого нужно добавить ещё один <input> с таким же
именем, но другим значением value.
Подобным образом можно создавать группы
переключателей с любым количеством вариантов.
Чтобы сделать какой-либо вариант в переключателе
выбранным по умолчанию, нужно добавить к соответствующему тегу <input> атрибут checked, как у поля-галочки.
Кстати, имя поля у переключателей одной группы
должно быть одинаковым, но идентификаторы всегда должны быть уникальными.
Образец:
<p><i>Какой тег обозначает
«абзац»?</i></p>
<label>
<input type="radio" name="question-one"
value="p">
Тег <p>
</label>
<br>
<label>
<input type="radio" name="question-one"
value="b" checked>
Тег <b>
</label>
<input type="submit"
value="Отправить">
</form>
Раскрывающийся список или «селект»
Раскрывающийся список так же, как и переключатель,
позволяет выбрать один вариант ответа из нескольких.
Раскрывающийся список создаётся с помощью парного
тега <select>, у которого есть
знакомые атрибуты name и id.
Варианты ответов задаются с помощью парных тегов <option>, которые должны
располагаться внутри тега <select>.
Например:
<select name="theme">
<option
value="light">Светлая тема</option>
<option
value="dark">Тёмная тема</option>
...
</select>
В атрибуте value
тега <option> задаётся
значение варианта ответа, а внутри этого тега располагается подпись варианта
ответа.
Если при отправке формы у выбранного варианта задан value, то на сервер отправится значение этого атрибута. В противном
случае будет отправлен текст
подписи.
Пример:
<form
action="https://echo.htmlacademy.ru" method="post">
<p>Часто выпадающие списки
используют для выбора даты.</p>
<p><i>Ваш год
рождения</i></p>
<select name="year">
<option value="2000">2000 год</option>
<option value="2001">2001 год</option>
</select>
<input type="submit" value="Отправить">
</form>
«Мультиселект»
Раскрывающийся список можно превратить в так
называемый «мультиселект», то есть список, в котором можно выбрать не один, а
несколько вариантов.
Чтобы сделать это, нужно добавить к тегу <select> атрибут multiple.
Выбрать несколько вариантов можно, щёлкая по ним с
зажатой клавишей Ctrl на Windows или Command на OS X.
Высоту мультиселекта можно изменять с помощью
атрибута size тега <select>.
Чтобы отметить как выбранные по умолчанию одно или
несколько значений, нужно к соответствующим тегам <option> добавить атрибут selected.
Пример:
<form
action="https://echo.htmlacademy.ru" method="post">
<p>В
мультиселекте можно выбрать несколько вариантов, щёлкая по ним с зажатой
клавишей Ctrl на Windows или Command на OS X.</p>
<p><i>Любимые дни
недели:</i></p>
<select multiple
name="days"size="7">
<option>Понедельник</option>
<option>Вторник</option>
<option>Среда</option>
<option>Четверг</option>
<option>Пятница</option>
<option>Суббота</option>
<option selected>Воскресенье</option>
</select>
<input type="submit" value="Отправить">
</form>
Поле для загрузки файлов
Поле для загрузки файлов — это тег <input> с типом file. Для этого поля обязательным
атрибутом является имя.
Чтобы поле заработало и браузер смог передать
выбранный файл на сервер, необходимо добавить форме атрибут enctype со значением multipart/form-data.
Не полю, а форме!!!
Не полю, а форме!!!
Кстати, внешний вид таких полей очень сильно
отличается в зависимости от операционной системы и очень плохо изменяется с
помощью стилей.
Пример:
<form action="https://echo.htmlacademy.ru" method="post"enctype="multipart/form-data">
<p>Выберите
изображение для своего аватара:</p>
<input type="file" name="avatar">
<input type="submit" value="Загрузить">
</form>
Скрытое поле
И ещё одно невидимое и очень полезное поле. Это
скрытое поле. Его используют, когда в форме нужно отправить какие-то
дополнительные служебные данные, которые не вводятся пользователем.
Например, это могут быть реквизиты заказа или номер
пользователя в форме оплаты.
Скрытое поле — это тег <input> с типом hidden.
Посмотреть больше примеров и потренироваться можно в
посте «Примеры форм»
Создать собственную форму для связи с вми непосредственно из блоге вы можете в моем посте
Более подробно узнать о всех тонкостях написания
кода и потренировать свои навыки онлайн вы сможете на сайте
