Красивые формы html: Коллекция из 15+ красивых форм регистрации и авторизации

25.07.2023 alexxlab

Содержание

Шаблон 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>

Из чего состоит форма

<form> и <fieldset>

<form> — контейнер формы, в нём содержатся все поля и кнопка для отправки данных. Тегу добавляется два атрибута: action и post. В первом указывается URL-адрес, на который будет отправлена форма, а второй задаёт метод отправки:

post — посылает данные в теле HTTP-запроса. Его используют, когда нужно отправить много данных и ссылка на результат их обработки не нужна. Например, при редактировании личного профиля.
get — метод по умолчанию. Он посылает данные формы в строке запроса, то есть они видны в адресной строке браузера. Метод применяется, например, в поисковых формах.

Тег <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

Основные атрибуты textarea:

name — имя поля;
id — связывает поле с <label>;
maxlength

и minlength — задают максимальную или минимальную длину текста;
required — указывает, что поле обязательно для заполнения;
placeholder — выводит короткую подсказку для пользователей — что нужно вводить;
disabled — блокирует поле ввода;
readonly — делает поле доступным только для чтения, ввод запрещён.

<input>

Создаёт интерактивные элементы для получения данных от пользователя. С его помощью можно добавить поля для ввода имени, номера телефона, почты, логина и пароля. Даже чекбоксы и радиокнопки реализуются с помощью этого тега.

<label for="email">E-mail:*</label>
<input type="email" name="mail" placeholder="ivanov@gmail.  com" required>

Чтобы пользователи вводили данные в правильном формате, тегу <input> нужно задавать атрибут type с подходящим значением:

text — можно вводить только текст;
number — ввод только цифр;
tel — для телефонных номеров;
email — ввод электронной почты;
submit — инпут превращается в кнопку для отправки данных на сервер;

password — поле для ввода паролей;
date — для ввода даты;
checkbox — инпут превращается в чекбокс;
radio — создаёт радиокнопки.

У атрибута более 20 значений, полный список — на сайте MDN.

Все атрибуты тега input

Основные атрибуты тега <input>:

id — связывает input с <label>;
name — имя поля;
maxlength или minlength — максимальная или минимальная длина текста;
max или min — максимальное или минимальное значение числа и даты;

required — поле обязательно для заполнения;
placeholder — в поле ввода отображается подсказка — что нужно вводить;
disabled — блокирует input;
autocomplete — автозаполнение;
checked — для чекбоксов и радиокнопок, делает поле выбранным;
pattern — задаёт паттерн для ввода данных, часто используется в типах tel и email;
value — значение элемента;
enctype — указывает, в каком виде пересылать данные на сервер.

<button>

Создаёт кнопку для отправки формы:

<button type="submit">Отправить</button>

В старых проектах всё ещё встречаются кнопки, сделанные с помощью <input type="button">. Но у такого способа есть ограничения — например, в <button> можно добавить изображение или псевдоэлемент, а в <input> нет.

Что выбрать

<textarea> — если нужно поле для ввода сообщения.

<select> — для раскрывающихся списков.

<input> — когда нужны чекбоксы, радиокнопки, поля для загрузки файлов и ввода данных.

<button> — для кнопки отправки формы.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Самые красивые формы игроков на The International 2022, фото джерси участников TI11

Блогер 5-й позиции

Блог

Никого из Европы.

Уже близится развязка Инта, и совсем скоро мы узнаем обладателя Аегиса. Предлагаю устроить еще одно состязание и выявить обладателя условного титула «самая красивая игровая форма TI11». А сначала ознакомиться с моим списком – топ-4 (на самом деле топ-5) джерси команд Инта.

Хочешь аркану, деньги на стим или Dragonclaw Hook? Делай предикты в нашем боте и выигрывай!

Evil Geniuses

Самая противоречивая форма турнира. С одной стороны, у футболок вырвиглазный оттенок, хотя мятный цвет сам по себе приятный. С другой – это отход от серого или серо-белого канонов EG, что несомненно круто и добавляет форме свежести. Мне здесь нравится решение с «сотами», включая черные на спине под номера и никнеймы – это выглядит оригинально.

BOOM

Единственные лонгсливы в этом списке принадлежат BOOM. Белые узорчатые джерси с длинным рукавом выглядят наиболее удобными и уютными из всех.

Дарим арканы и фрибеты настоящим фанатам Доты в нашем Квиз-боте!

Team Aster

В отличие от тех же EG, у Aster палитра цветов очень приятна глазу. Мне нравятся красные узоры-искорки на груди и ярко-синие рукава. Как по мне: единственный существенный недостаток их формы – обилие спонсоров, выделенных белым на всех видных местах.

Стань крипом и снеси вражеский трон в нашей игре!

Beastcoast (светлая)

Безоговорочно красивейшая форма на этом TI. Сильно отличается от привычных нам зеленых оттенков клуба. Красные пятна на белом фоне – в цвет флага Перу – напоминают брызги крови. В моих глазах это отсылка к «зверскому» стилю игры Beastcoast.

Beastcoast (темная)

Главное преимущество футболок Beastcoast над джерси всех соперников по этому списку: у их формы есть еще и темный вариант, который выглядит даже лучше светлого! Смотрится просто сногсшибательно, и это буквально то самое «красное на черном», о котором р-р-р-ревел Константин Кинчев лет за 10 до моего рождения.

* * *

А какие джерси больше всего понравились вам?

Резоль и Заяц слабее, чем вы думали. Тотальный разбор лейнинга фаворитов Инта

Путь Матумбы на Инте в текстах «Гражданской обороны»

Пост написан пользователем cyber.sports.ru

Создайте свой блог на Трибуне, выскажитесь и станьте суперзвездой cyber.sports.ru

Свежие записи в блоге

Valve, почему на мейджоре опять проблемы? Ну сколько можно?
9 июля, 13:43
«Да, вы играете без Пьюра». Менеджеры BetBooм о злополучном дне на Bali Major
9 июля, 10:15
Как же Tundra повезло с тренером! Идеальная замена в лице двукратного чемпиона TI
9 июля, 08:16
Сетка плей-офф и итоговые таблицы группового этапа The Bali Major 2023
9 июля, 06:02
Фэнтези-лига The Bali Major 2023 по Dota 2. Команда на 9 июля
8 июля, 19:15
«Это похороны». Серия 9Pandas – Liquid решилась на драфте
8 июля, 09:51
«Зачем вам Месси в защите?» 9Pandas важно было пикать свое. И они сами это знали!
8 июля, 08:14
Рамзесу нужно быть аккуратнее с Морфом! От первой карты с Beastcoast тревожно
7 июля, 14:06

26 Bootstrap Forms

Коллекция бесплатных примеров кода шаблона Bootstrap form : отзывчивый, платежный, контактный, с проверкой, с маской ввода и т.д. Обновление коллекции за март 2020. 7 новых предметов.

CSS-формы
Формы jQuery
Формы попутного ветра