Типограф
При работе с контентом на сайте, а именно с текстами, рекомендуется пользоваться сервисами, которые автоматически обрабатывают текст назначая ему спец символы, которые не видны пользователю сайта, но играют большую роль в отображении контента.
www.artlebedev.ru/typograf/
Этот сайт помогает поставить в текст неразрывные пробелы. В местах этих пробелов при изменении размера сайта не будет осуществляться перенос строки и текст будет восприниматься более целостным и удобным для чтения.
Поэтому всегда прогоняйте тексты вашего сайта через Типограф. Так ваша вёрстка будет правильной и красивой.
Формы для ввода данных
Вы точно встречали такие формы, они есть практически на каждом сайте. Очень часто это формы для отправки заявки где вы пишите Имя, номер телефона, почту, какие-то дополнительные данные и тд.
Для создания формы используется тег
<form> </form>
action
— это основной атрибут тега form, в него мы пишем адрес, куда будет отправлена форма. Подробнее об этом будет в следующих уроках.
method
— это атрибут метода отправки данных.
Значение
get
— это первый метод отправки данных. Он идет по умолчанию и добавляет данные в URL браузера. Это наглядно видно, когда вы выбираете какие-то фильтры на сайте и данные сохраняются в URL адрес.
При выборе материала ПВХ в URL адресе в браузерной строке мы увидим код этого материала, который ему задал разработчик при добавлении на сайт:
post
— такой метод отправки данных позволяет включить данные в саму форму и отправить их на сервер или на почту. Используется для отправки больших объемов данных и выполнения операций, которые изменяют состояние на сервере (например, регистрация, вход, добавление данных). Данные отправляются в теле запроса и не видны в URL, что делает метод более подходящим для передачи конфиденциальной информации.
Код скопирован в буфер обмена
<form action="#" method="post"></form>
Атрибут
enctype
— способ кодирования данных, который используется только при методе отправки
post
.
По умолчанию значение этого атрибута
application/x-www-form-urlencoded
оно означает, что данные будут кодироваться перед отправкой. Поэтому если у вас обычная отправка текста, то писать этот атрибут не нужно.
Если форма содержит поле для загрузки файла, то
<input type="file">
, то используется свойство
multipart/form-data
.
Код скопирован в буфер обмена
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="file">
</form>
Внутри тега
form
могут содержаться любые другие теги. Даже вся страница сайта может быть обёрнута в тег
form
. Например, квиз или страница с анкетированием.
Посмотрим как ведут себя другие теги внутри тега
form
.
Кнопка
<button>
чаще всего используется для отправки данных. В таком случае нужно изменить её тип свойством
type
со значением
submit
.
Код скопирован в буфер обмена
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<button type="submit">Отправить</button>
</form>
<input>
— этот тег предназначен для ввода данных. В такое поле можно вводить данные или выбирать из имеющихся вариантов.
Тип ввода данных определяется атрибутом
type
.
Значение
text[/taag] идет по умолчанию и позволяет писать текст в поле для ввода.
[html]
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<button type="submit">Отправить</button>
<input type="text">
</form>
[/html]
Значение [tag]number
— в поле для ввода можно печатать только цифры.
Так же input-элементу с типом ввода данных
number
можно добавить дополнительные атрибуты, которые ограничат числовую шкалу.
min — минимальное число для ввода в поле;
max — максимлаьное число для ввода в поле.
Например, можно вводить любое число от нуля до десяти:
Код скопирован в буфер обмена
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<button type="submit">Отправить</button>
<input type="text">
<input type="number" min="0" max="10">
</form>
Значение
email
— это так же поле для ввода текста, но предназначенное для ввода адреса электронной почты.
Код скопирован в буфер обмена
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<button type="submit">Отправить</button>
<input type="text">
<input type="number" min="0" max="10">
<input type="email">
</form>
Если адрес почты введён правильно, при нажатии кнопки «Отправить» форма обновится, так как она заполнена корректно. Но если это будет просто текст, то появится уведомление:
то есть в поле ввода со значением
email
стоит проверка на правильность написания. Поле должно содержать текст + спец символ почты @ + текст после. При открытии страницы с телефона и нажатии на поле для ввода email автоматически будет показана клавиатура со спец символами почты.
Значение
tel
— работает по той же логике. Это поле нужно для ввода номера телефона, но в этом поле автоматическая проверка уже не проходит и в него можно вводить как текст, так и числа. При открытии страницы на телефоне и нажатии на поле для ввода телефона, появится клавиатура с цифрами.
Код скопирован в буфер обмена
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<button type="submit">Отправить</button>
<input type="text">
<input type="number" min="0" max="10">
<input type="email">
<input type="tel">
</form>
Значение
password
— в переводе с английского — «пароль», соответственно это значение мы используем у поля для ввода пароля.
Код скопирован в буфер обмена
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<button type="submit">Отправить</button>
<input type="text">
<input type="number" min="0" max="10">
<input type="email">
<input type="tel">
<input type="password">
</form>
По умолчанию это поле зашифровывает данные, то есть при наборе пароля вы видите точки, а не то, что вы вводите.
Так же в поле, на некоторых браузерах, можно автоматически выбрать сохранённые пароли.
Значение
date
— поле для ввода даты.
Код скопирован в буфер обмена
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<button type="submit">Отправить</button>
<input type="text">
<input type="number" min="0" max="10">
<input type="email">
<input type="tel">
<input type="password">
<input type="date">
</form>
Значение
search
— это поле для ввода поиска информации. Это значение не отличается от значения
text
, тут так же можно вводить любые данные. Но если на сайте в этом разделе будет именно поисковая строка, то принято использовать значение
search
.
Код скопирован в буфер обмена
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<button type="submit">Отправить</button>
<input type="text">
<input type="number" min="0" max="10">
<input type="email">
<input type="tel">
<input type="password">
<input type="date">
<input type="search">
</form>
Значение
file
— поле для загрузки файлов.
Для значения
file
есть дополнительный атрибут, который позволяет выбирать только определенные типы файлов —
accept
. В него прописывается значение с типом файла. Если мы напишем
image/*
то для выбора будут доступны только изображения .img, файлы с другим разрешением выбрать будет нельзя.
Код скопирован в буфер обмена
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<button type="submit">Отправить</button>
<input type="text">
<input type="number" min="0" max="10">
<input type="email">
<input type="tel">
<input type="password">
<input type="date">
<input type="search">
<input type="file" accept="image/*">
</form>
Общий атрибут для всех
input
—
required
Этот атрибут без значения. Он нужен для того чтобы поле стало обязательным для заполнения. Вы точно видели такие формы, когда пропуская какую-то из строк при отправке была ошибка, что необходимо заполнить поле.
Код скопирован в буфер обмена
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<button type="submit">Отправить</button>
<input type="text" required>
<input type="number" min="0" max="10">
<input type="email">
<input type="tel">
<input type="password">
<input type="date">
<input type="search">
<input type="file" accept="image/*">
</form>
Я добавила атрибут
required
для первого
input
. Теперь это поле обязательно должно быть заполнено перед отправкой. Если поле не заполнить и нажать кнопку «Отправить», появится ошибка:
Атрибут для ограничения количества символов для ввода —
maxlenght
Работает с input-элементми со значением
text
,
email
,
password
,
search
. То есть для всех форм, где вводятся текстовые данные.
Код скопирован в буфер обмена
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<button type="submit">Отправить</button>
<input type="text" required maxlenght="10">
<input type="number" min="0" max="10">
<input type="email" maxlenght="10">
<input type="tel">
<input type="password" maxlenght="10">
<input type="date">
<input type="search" maxlenght="100">
<input type="file" accept="image/*">
</form>
Подпись-подсказка внутри input
Скорее всего вы часто видели такие формы, где как бы на фоне в поле ввода уже заполнен какой-то текст. Обычно он пишется не ярким серым цветом, чтобы было понятно, что это пример.
Атрибут
placeholder
. В него вводится необходимый текст, который и будет отображаться в форме.
Код скопирован в буфер обмена
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<button type="submit">Отправить</button>
<input type="text" required maxlenght="10" placeholder="Фамилия Имя">
<input type="number" min="0" max="10">
<input type="email" maxlenght="10">
<input type="tel">
<input type="password" maxlenght="10">
<input type="date">
<input type="search" maxlenght="100">
<input type="file" accept="image/*">
</form>
Тег
<textarea></textarea>
позволяет вводить большое количество текста.
Код скопирован в буфер обмена
<form action="#" method="post">
<textarea></textarea>
</form>
Для этого тега есть атрибут
name
, в котором прописывается значение
message
и так же можно добавить
placeholder
для фонового текста.
Код скопирован в буфер обмена
<form action="#" method="post">
<textarea name="message" placeholder="Как прошло ваше лето"></textarea>
</form>
Значение
radio
(радиокнопка) — это значение атрибута
type
, когда можно выбрать только один из предложенных вариантов.
При написании этой строчки кода, у вас появляется один элемент, который можно выделить:
Код скопирован в буфер обмена
<form action="#" method="post">
<input type="radio">
</form>
Не выделенный элемент:
Выделенный элемент:
К элементу можно добавить текст:
Код скопирован в буфер обмена
<form action="#" method="post">
<input type="radio">Мужской пол
</form>
Таким способом можно создать несколько полей на выбор:
Код скопирован в буфер обмена
<form action="#" method="post">
<input type="radio">Мужской пол
<input type="radio">Женский пол
</form>
Для этого типа input так же можно добавить атрибут
checked
— так элемент будет уже выделен.
Код скопирован в буфер обмена
<form action="#" method="post">
<input type="radio">Мужской пол
<input type="radio" checked>Женский пол
</form>
Обратите внимание на то, что сейчас вы можете выбрать оба варианта:
Радиокнопки нам нужны для того чтобы пользователь мог выбрать только один вариант. Каждый такой инпут — это какое-то значение. Это мы знаем по тексту, что значат эти кнопки, а вот компьютер еще не знает. Это нужно ему написать с помощью атрибута
name
. При чем этот атрибут нужно написать для всех элементов, объединенных по смыслу.
Код скопирован в буфер обмена
<form action="#" method="post">
<input type="radio" name="gender">Мужской пол
<input type="radio" checked name="gender">Женский пол
</form>
Теперь вы не можете выбрать оба варианта, а только один из них.
Так же в этом блоке есть важный момент. Мы подписали радиокнопки текстом «Мужской пол» и «Женский пол», но это просто текст. Это контент, который браузер не будет считывать в виде кода и отправлять при нажатии кнопки «Отправить». Данные для отправки нужно прописать отдельно с помощью атрибута
value
.
Код скопирован в буфер обмена
<form action="#" method="post">
<input type="radio" name="gender" value="Мужской пол">Мужской пол
<input type="radio" checked name="gender" value="Женский пол">Женский пол
</form>
Дополнительный тег, для удобства оформления верстки полей ввода. Тег
<label></label>
Этот тег позволяет выбирать нужный вариант не просто нажатием на саму кнопку, а на всю область, которая помещается внутри тега.
Код скопирован в буфер обмена
<form action="#" method="post">
<label>
<input type="radio" name="gender" value="Мужской пол">Мужской пол
</label>
<input type="radio" checked name="gender" value="Женский пол">Женский пол
</form>
Радиокнопка внутри тега
<label>
теперь активна и районе текста «Мужской пол», то есть, если нажать на сам текст, радиокнопка будет выбрана, тогда как в
input
с женским полом, будет работать только сама радиокнопка, без текста.
Выпадающий список, в котором можно выбрать один вариант из предложенных оформляется с помощью тега
<select></select>
.
Напишем код на примере месяцев.
В атрибуте
name
пишем значение объединяющий их по теме —
month
.
Внутри тега вкладывается другой тег
<option></option>
в которое как раз и вписывается значение для выбора.
Для тега
<option>
обязательно прописывает атрибут
value
— это будет то, что пользователь отправит при нажатии на кнопку «Отправить».
Код скопирован в буфер обмена
<form action="#" method="post">
<select name="month">
<option value="Январь">Январь</option>
<option value="Февраль">Февраль</option>
<option value="Март">Март</option>
</select>
</form>
Если какой то из вариантов в выпадающем списке необходимо сделать не активным, этому тегу нужно прописать атрибут
disabled
. Заблокируем Февраль:
Код скопирован в буфер обмена
<form action="#" method="post">
<select name="month">
<option value="Январь">Январь</option>
<option value="Февраль" disabled>Февраль</option>
<option value="Март">Март</option>
</select>
</form>
Теперь его выбрать нельзя
Тег
<fieldset></fieldset>
— объединяет в себе по смыслу группу input или других полей ввода данных. Другими словами — набор полей.
Код скопирован в буфер обмена
<form action="#" method="post">
<fieldset>
<select name="month">
<option value="Январь">Январь</option>
<option value="Февраль" disabled>Февраль</option>
<option value="Март">Март</option>
</select>
</fieldset>
</form>
К этому тегу можно сделать общий заголовок с помощью отдельного тега
<legend></legend>
.
Код скопирован в буфер обмена
<form action="#" method="post">
<fieldset>
<legend>Выберите месяц</legend>
<select name="month">
<option value="Январь">Январь</option>
<option value="Февраль" disabled>Февраль</option>
<option value="Март">Март</option>
</select>
</fieldset>
</form>
Значение типа input-элемента
checkbox
(чекбокс) — позволяет выбрать сразу несколько вариантов из предложенных или можно оставить выбор пустым.
Код скопирован в буфер обмена
<form action="#" method="post">
<input type="checkbox">Тыквенный сок</input>
<input type="checkbox">Лимонный пирог</input>
<input type="checkbox">Имбирный эль</input>
</form>
Довольно большое количество вариантов, как работать с полями ввода. И вы точно будете пользоваться всеми при работе с макетами.
Самостоятельно изучите файл HTML онлайн магазина и добавьте при необходимости нужные теги и атрибуты с корректными значениями.
