Шаблон HTML-формы — журнал «Доктайп»
Не бывает единого шаблона формы — под каждую задачу нужно составлять что-то своё.
Например, форма для отправки сообщений будет отличаться от формы для ввода данных банковской карточки. А ещё важен макет — где-то дизайнер задумал добавить одно текстовое поле с кнопкой, а где-то десяток переключателей. Поэтому мы сначала покажем общий шаблон формы, а затем разберём, из каких тегов он состоит — так вы сможете изменить наш пример под свои цели.
Шаблон HTML-формы
<form action="#" method="post" target="_blank">
<h3>Шаблон формы</h3>
<fieldset>
<legend>Персональные данные</legend>
<ul>
<li>
<label for="name">Имя:*</label>
<input type="text" name="name" placeholder="Иван Иванов" required>
</li>
<li>
<label for="age">Возраст:</label>
<input type="number" name="age" placeholder="27" min="0" max="125">
</li>
</ul>
</fieldset>
<fieldset>
<legend>Контакты</legend>
<ul>
<li>
<label for="email">E-mail:*</label>
<input type="email" name="mail" placeholder="ivanov@gmail.
com" required>
</li>
<li>
<label for="number">Телефон:*</label>
<input type="tel" name="phone" placeholder="+7 000 000-00-00" maxlength="21" required>
</li>
</ul>
</fieldset>
<div>
<label for="message">Увлечения</label>
<textarea name="comment" placeholder="Расскажите обо всём, что для вас важно"></textarea>
</div>
<fieldset>
<legend>Учёба</legend>
<ul>
<li>
<input type="checkbox" name="intensive-courses" checked>
<label for="courses">Прохожу курсы</label>
</li>
<li>
<input type="checkbox" name="books">
<label for="books">Читаю книги</label>
</li>
<li>
<input type="checkbox" name="video">
<label for="video">Смотрю видео</label>
</li>
</ul>
</fieldset>
<fieldset>
<legend>Предпочтения</legend>
<ul>
<li>
<input type="radio" name="preference" value="frontend" checked>
<label for="front">Фронтенд-разработка</label>
</li>
<li>
<input type="radio" name="preference" value="backend">
<label for="back">Бэкенд-разработка</label>
</li>
</ul>
</fieldset>
<div>
<button type="submit">Отправить</button>
<p>* — Обязательные поля</p>
</div>
</form>
com" required>
</li>
<li>
<label for="number">Телефон:*</label>
<input type="tel" name="phone" placeholder="+7 000 000-00-00" maxlength="21" required>
</li>
</ul>
</fieldset>
<div>
<label for="message">Увлечения</label>
<textarea name="comment" placeholder="Расскажите обо всём, что для вас важно"></textarea>
</div>
<fieldset>
<legend>Учёба</legend>
<ul>
<li>
<input type="checkbox" name="intensive-courses" checked>
<label for="courses">Прохожу курсы</label>
</li>
<li>
<input type="checkbox" name="books">
<label for="books">Читаю книги</label>
</li>
<li>
<input type="checkbox" name="video">
<label for="video">Смотрю видео</label>
</li>
</ul>
</fieldset>
<fieldset>
<legend>Предпочтения</legend>
<ul>
<li>
<input type="radio" name="preference" value="frontend" checked>
<label for="front">Фронтенд-разработка</label>
</li>
<li>
<input type="radio" name="preference" value="backend">
<label for="back">Бэкенд-разработка</label>
</li>
</ul>
</fieldset>
<div>
<button type="submit">Отправить</button>
<p>* — Обязательные поля</p>
</div>
</form>И вот что получается из такого кода:
Из чего состоит форма
<form> и <fieldset><form> — контейнер формы, в нём содержатся все поля и кнопка для отправки данных.
Тегу добавляется два атрибута: action и method. В первом указывается URL-адрес, на который будет отправлена форма, а второй задаёт метод отправки:
post— посылает данные в теле HTTP-запроса. Его используют, когда нужно отправить много данных и ссылка на результат их обработки не нужна. Например, при редактировании личного профиля.get— метод по умолчанию. Он посылает данные формы в строке запроса, то есть они видны в адресной строке браузера. Метод применяется, например, в поисковых формах.
Чем отличаются HTTP-методы GET и POST
Тег <fieldset> группирует поля формы. Он часто используется с <legend> — тегом, который задаёт подписи для каждой группы. Мы использовали этот тег, чтобы разделить поля формы на четыре части: «Персональные данные», «Контакты», «Учёба» и «Предпочтения».
<label>Заголовок или подпись для полей ввода. Он связывается с элементами двумя способами.
При помощи атрибута for со значением, аналогичным id элемента:
<label for="name">Имя:*</label> <input type="text" name="name" placeholder="Иван Иванов" required>
Элемент заключается между открывающим и закрывающим тегами <label>:
<label> <input type="checkbox" checked>Соглашаюсь на обработку персональных данных </label>
<select>Создаёт раскрывающийся список:
<label for="education">Уровень образования</label> <select> <option value="secondary">Среднее общее</option> <option value="secondary vocational">Среднее профессиональное</option> <option value="higher" selected>Высшее</option> <option value="incomplete higher" selected>Неоконченное высшее</option> </select>Уровень образованияСреднее общееСреднее профессиональноеВысшееНеоконченное высшее Для добавления элементов списка используется тег
<option>.
Атрибуты тега <select>:
autocomplete— включено ли автозаполнение поля;disabled— в списке нельзя ничего выбрать;form— связывает<select>с формой, если он не вложен в тег<form>;multiple— создаёт «мультиселект», то есть список, в котором можно выбрать несколько значений;name— имя элемента, используется для отправки формы;required— один из пунктов обязательно должен быть выбран;size— размер элемента.
<textarea>Добавляет поле для ввода сообщения — пользователь может оставить в нём вопрос, комментарий для техподдержки или что-то ещё.
<label for="message">Увлечения</label> <textarea name="comment" placeholder="Расскажите обо всём, что для вас важно"></textarea>Увлечения
У <textarea> есть особенность: пользователи могут прямо в браузере растягивать текстовое поле по ширине и высоте, ломая вёрстку и нарушая замыслы дизайнера.
Чтобы заблокировать такое поведение, используйте CSS-свойство resize: none.
Основные атрибуты textarea:
name— имя поля;id— связывает поле с<label>;maxlengthиminlength— задают максимальную или минимальную длину текста;required— указывает, что поле обязательно для заполнения;placeholder— выводит короткую подсказку для пользователей — что нужно вводить;disabled— блокирует поле ввода;readonly— делает поле доступным только для чтения, ввод запрещён.
Все атрибуты textarea
<input>Создаёт интерактивные элементы для получения данных от пользователя. С его помощью можно добавить поля для ввода имени, номера телефона, почты, логина и пароля. Даже чекбоксы и радиокнопки реализуются с помощью этого тега.
<label for="email">E-mail:*</label> <input type="email" name="mail" placeholder="ivanov@gmail.E-mail:*
com" required>Чтобы пользователи вводили данные в правильном формате, тегу <input> нужно задавать атрибут type с подходящим значением:
text— можно вводить только текст;number— ввод только цифр;tel— для телефонных номеров;email— ввод электронной почты;submit— инпут превращается в кнопку для отправки данных на сервер;password— поле для ввода паролей;date— для ввода даты;checkbox— инпут превращается в чекбокс;radio— создаёт радиокнопки.
У атрибута более 20 значений, полный список — на сайте MDN.
Основные атрибуты тега <input>:
id— связываетinputс<label>;name— имя поля;maxlengthилиminlength— максимальная или минимальная длина текста;maxилиmin— максимальное или минимальное значение числа и даты;required— поле обязательно для заполнения;placeholder— в поле ввода отображается подсказка — что нужно вводить;disabled— блокируетinput;autocomplete— автозаполнение;checked— для чекбоксов и радиокнопок, делает поле выбранным;pattern— задаёт паттерн для ввода данных, часто используется в типахtelиemail;value— значение элемента;enctype— указывает, в каком виде пересылать данные на сервер.
Все атрибуты тега input
<button>Создаёт кнопку для отправки формы:
<button type="submit">Отправить</button>
В старых проектах всё ещё встречаются кнопки, сделанные с помощью <input type="button">. Но у такого способа есть ограничения — например, в <button> можно добавить изображение или псевдоэлемент, а в <input> нет.
Что выбрать
<textarea> — если нужно поле для ввода сообщения.
<select> — для раскрывающихся списков.
<input> — когда нужны чекбоксы, радиокнопки, поля для загрузки файлов и ввода данных.
<button> — для кнопки отправки формы.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
ТелеграмПодкастБесплатные учебники
Один шаблон формы для всего проекта / Хабр
Часто в одном проекте встречаются различные по структуре формы, где-то label элемента и сам элемент формы находятся на одной строке, где-то друг под другом, в одном случае нужна форма занимающая всю предоставленную ей ширину (например написание/редактирование статьи), в другом лишь определенную, заданную ширину (например форма регистрации/авторизации), да и внешнее оформление бывает разным.
Из за этого многие верстальщики начинают верстать каждую форму по отдельности, давая им и их элементам различные стили, тем самым усложняя работу себе и тем людям, кто будет собирать эти макеты.
Далее, я расскажу о том, как это делаю я. Метод не претендует ни на уникальность, ни на новизну. Просто в момент когда я дошел до этого (перестал верстать каждую форму отдельно), верстка форм стала занимать намного меньше времени и решил поделиться этим, возможно кому-нибудь поможет.
В большинстве случаев можно определиться с именованием элементов и сверстать всего одну форму, затем видоизменять ее путем добавления классов, непосредственно элементу <form>. В последствии мы сможем перенести перенести в шаблоны (шаблонизатор на выбор;)) элементы формы и в коде, том который будет собирать вам страницы, просто сказать «А нарисуй ка мне форму с таким-то набором элементов и добавь ей класс такой-то».
Сразу оговорюсь, далее будет рассматриваться достаточно примитивный пример, да может быть несколько колонок чекбоксов или еще что то, но это мы рассматривать не будем, но допилить можно 😉
И так, немного подумав у нас получился примерно такой HTML код:
<form action="">
<fieldset>
<label for="default-text">Some input[type=text]</label>
<input type="text" />
</fieldset>
<fieldset>
<fieldset>
<input type="radio" checked="checked" />
<label for="default-radio">Some input[type=radio]</label>
</fieldset>
<fieldset>
<input type="checkbox" checked="checked" />
<label for="default-checkbox">Some input[type=checkbox]</label>
</fieldset>
</fieldset>
<fieldset>
<label for="default-textarea">Some textarea</label>
<textarea rows="10" cols="40"></textarea>
</fieldset>
<fieldset>
<label for="default-select">Some select</label>
<select>
<option>variant 1</option>
<option>variant 2</option>
<option>variant 3</option>
</select>
</fieldset>
<fieldset>
<input type="submit" value="Send" />
<input type="reset" value="Clear" />
</fieldset>
</form>* This source code was highlighted with Source Code Highlighter.
Немного поясню:
- У нашей универсальной формы есть класс
.form, зачем, ведь она универсальная?, да просто мне так удобнее, можно и без него обойтись; - У некоторых
<fieldset>есть класс, а у других нет: с классом.fieldобщий для группы элементов, так же могут быть и вложенные<fieldset>, например в случае с чекбоксами, для которых нужен другой стиль, поэтому задать общий стиль для всех элементов данного типа, не всегда возможно.
Теперь немного стилизуем нашу форму, при помощи css:
.form {
margin: 1em 0;
}
.form .field {
margin: 0 0 .8em;
}
.form label {
display: block;
font-weight: 700
}
.form .text {
width: 100%;
padding: 3px 5px;
}
. form textarea {
height: 150px;
}
.form .choice label {
display: inline;
}
.form .submit {
text-align: center;
}
.form .submit input {
padding: 5px 10px;
}* This source code was highlighted with Source Code Highlighter.
form textarea {И посмотрим что получилось
Это наша основная форма, ее можно использовать например, для написания/редактирования статей
К примеру нам нужна форма с фиксированной шириной, для формы авторизации.
Добавим класс в css:
.form-w-300 {
width: 300px;
margin: 1em auto;
}* This source code was highlighted with Source Code Highlighter.
Теперь применим его к нашей форме.
Если нужна форма в виде сетки (label и элемент находятся на одной строке), еще немного допишем css (сразу для двух вариантов: label слева и справа):
. grid-left-500,
.grid-right-500 {
width: 500px;
margin: 1em auto;
}
.grid-left-500 label,
.grid-right-500 label {
float: left;
width: 180px;
overflow: hidden;
}
.grid-right-500 label {
float: right;
}
.grid-left-500 .text,
.grid-right-500 .text {
float: right;
width: 300px;
}
.grid-right-500 .text {
float: left;
}
.grid-left-500 .choice {
margin-left: 185px;
}
.grid-right-500 .choice {
margin-left: 0;
padding-right: 185px;
}
.grid-left-500 .choice label,
.grid-right-500 .choice label {
float: none;
width: auto;
}
. grid-left-500 .submit {
text-align: left;
padding-left: 185px;
}
.grid-right-500 .submit {
text-align: left;
}
.grid-left-500 select {
margin-left: 5px;
}
.grid-right-500 select {
float: right;
margin-right: 5px;
}* This source code was highlighted with Source Code Highlighter.
grid-left-500,
grid-left-500 .submit {Лейблы слева, лейблы справа
Но у вида сеткой есть свои минусы: работает только при фиксированной ширине формы и ее элементов или если задать размеры в процентах, но это не всегда подходит.
Как это решить средствами css, да еще и кроссбраузерно, я пока не знаю.
В итоге мы получили 1 шаблон формы и 4 (в данном примере) различных по структуре или размерам формы видоизмененные при помощи css.
Доработав пример можно стилизовать каждую форму отдельно, да и сделать формы других структур, но это уже по мере надобности, тут изложена только идея с примитивными примерами.
Надеюсь, кому нибудь пригодится.
Тег HTML
❮ Пред. Следующий ❯
Тег используется внутри элемента