Css форма: Forms формы CSS уроки для начинающих академия

Leave a Comment / Css / By /

Содержание

Формы | Основы верстки контента

Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Формы — важный интерактивный элемент веб-страницы. Как и ссылки, формы обеспечивают взаимодействие пользователя и страницы, позволяя отправлять данные. Для этого в HTML существуют специальные конструкции, которые говорят браузеру, какие поля может использовать пользователь и как их обрабатывать.

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

Создание формы

Для отделения формы от остальных участков верстки используется специальный тег <form>. Если его не использовать, то браузер не поймет, какие именно данные нужно отправить. Ведь на странице может быть не одна, а сразу несколько различных форм.

<form>
  <!-- Элементы формы и кнопка отправки -->
</form>

Сервер — удаленный компьютер, на котором хранится весь проект. Сейчас вы смотрите на страницу, которая сгенерирована на сервере и отдана вам по определенному адресу. Этот адрес указан сейчас в вашем браузере.

Примером взаимодействия с формой является любой сайт-поисковик. Например, Google или Yandex. Вы вводите поисковый запрос, который отправляется на сервер. Сервер обрабатывает результат и выдает вам подходящие сайты. Это взаимодействие происходит с помощью серверных языков программирования, таких как PHP, Ruby и так далее. В рамках верстки мы не можем влиять на то, как обработается результат. Результат верстки — набор тегов, с помощью которых браузер соберет данные и отправит их на сервер.

Тег <form> может принимать несколько различных атрибутов. Они не являются обязательными, но их использование может серьезно повлиять на работу. Самым главным из них является атрибут action. Этот атрибут позволяет указать директорию или файл на сервере, куда будут отправлены данные. Если этот атрибут не указан, то данные будут отправлены на ту же страницу, где форма и находится.

<form action="/forms/helper.php">
  <!-- Данные из формы будут отправлены в PHP файл helper, который расположен в директории forms на сервере -->
</form>

Смысл этого действия вы лучше поймете, если будете заниматься Backend разработкой. Например, на языке PHP или Python. Если сейчас вам кажется это сложным, то не отчаивайтесь. Разработчики всегда вам подскажут, куда стоит отправлять данные.

Поля формы

Одного тега <form> недостаточно для полноценного создания формы, ведь пользователь должен ввести какие-то данные. Самый простой способ — дать какое-то поле для ввода текста, куда пользователь может ввести информацию. В HTML для этого используется два тега:

  • <input> — одиночный тег, в котором располагается небольшая информация. Это может быть телефон, email, дата рождения, имя и так далее.
  • <textarea> — парный тег, позволяющий пользователю ввести длинное сообщение. Это могут быть комментарии к заказу, отзыв.

textarea

Самый простой тег — <textarea>. Его задача — создать большое поле для ввода текста.

<form>
  <textarea></textarea>
</form>

В примере вы можете увидеть два атрибута тега <textarea>: cols и rows. Они отвечают за количество символов и строк, которые доступны внутри <textarea>. Если контента будет больше, то появится полоса прокрутки.

Попробуйте изменить размер элемента <textarea>. Это можно сделать потянув за правый нижний угол. Так вы можете увеличить не только ширину, но и высоту элемента.

Такое поведение зачастую вредит нашему дизайну. Поэтому разработчики в большинстве случаев запрещают такое поведение. Тут есть несколько вариантов:

  • Можно задать высоту и ширину элемента через CSS. Тогда браузер не даст растягивать элемент.
  • Использовать свойство resize со значением none. Его можно использовать, если не требуется поддержка некоторых мобильных браузеров и Internet Explorer. Полный список поддерживаемых браузеров можно посмотреть на сайте Can I use.

input

Большую группу полей можно создать, используя тег <input>, главным атрибутом которого является type. Он указывает на то, как именно браузер должен обработать элемент. Рассматривать каждое значение бессмысленно, так как такое количество информации быстро забудется, если ее не использовать.

В этом уроке рассмотрим одни из самых популярных значений атрибута type.

type=»text»

Самый простой вид <input>, который позволяет ввести любую пользовательскую информацию. Никаких проверок полей не происходит. Единственное исключение — удаление переносов строк перед отправкой на сервер. Если нужны данные с переносом текста, то используйте тег <textarea>.

<form>
  <input type="text">
</form>

Заметьте, что сейчас поле никак не подписано и из-за этого абсолютно непонятно что надо ввести пользователю.

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

Скринридер (Screen Reader) — устройство для чтения текста с экрана. Используется слепыми или слабовидящими людьми.

Для связи поля и его названия используется тег <label>, внутри которого вставляется текст. Чтобы связать <label> и <input> используется один из двух вариантов. Они равнозначны, поэтому можете использовать тот, который удобен в конкретной ситуации.

  • Связь по идентификатору. Для этого тегу <input> устанавливается уникальный id. Для тега <label> устанавливается атрибут for, значением которого является идентификатор ввода.
<form>
  <label for="name">Ваше имя</label>
  <input type="text">
</form>
  • Вложение <input> внутрь <label>. Такой способ помогает избавиться от указания идентификаторов, но может немного усложнить процесс стилизации.
<form>
  <label>
    Ваше имя
    <input type="text">
  </label>
</form>

Важно: все элементы, которые доступны пользователю для заполнения должны иметь тег <label>. Это элементы <input> и <textarea>

. Это справедливо даже в случае визуального отсутствия подписи к полю.

Для скрытия элемента можно воспользоваться следующим CSS-кодом. В процессе вашего роста как разработчика, вы поймете все правила, описанные в данном коде. Обычно класс для скрытия элемента называют .sr-only. Такой элемент будет невидимым для пользователя, но его сможет «прочитать» скринридер. Название класса является сокращением от screen reader only.

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
}

<form>
  <label for="name">Ваше имя</label>
  <input type="text">
  <!-- Теперь label не виден для пользователя, но может быть прочтен скринридером -->
</form>

type=»radio»

Радиокнопки используются для выбора одного варианта из множества доступных. Почему такой тип называется radio? Есть мнение, что такое название тип получил от первых автомобильных радиоприемников. В них было доступно несколько радиостанций, но выбрать можно было только одну. Здесь смысл очень похож на принцип таких приемников.

Помимо атрибутов, которые использовались в прошлых примерах, для радиокнопок есть еще один важный атрибут — name. Он является уникальным для группы радиокнопок.

<form>
  <h3>Выберите радиостанцию</h3>
  <div>
    <label>
      <input type="radio" name="radio-fm" value="87. 1 FM">
      87.1 FM
    </label>
    <br>
    <label>
      <input type="radio" name="radio-fm" value="95.5 FM">
      95.5 FM
    </label>
    <br>
    <label>
      <input type="radio" name="radio-fm" value="101.4 FM">
      101.4 FM
    </label>
    <br>
    <label>
      <input type="radio" name="radio-fm" value="103.2 FM">
      103.2 FM
    </label>
  </div>
</form>

Помимо атрибута name у радиокнопок используется атрибут value. Внутри него находится то значение, которое отправится на сервер.

type=»checkbox»

Чекбоксы немного похожи на радиокнопки, но имеют существенное отличие — возможность выбора сразу нескольких значений. Представьте, что пользователь выбирает любимые блюда. Скорее всего это не одно блюдо, а сразу несколько. Можно дать возможность просто их написать с помощью <textarea>, но грамотнее будет использовать чекбоксы.

<form>
  <h3>Ваши любимые блюда</h3>
  <div>
    <label>
      <input type="checkbox" name="dishes" value="pizza">
      Пицца
    </label>
    <br>
    <label>
      <input type="checkbox" name="dishes" value="burger">
      Бургеры
    </label>
    <br>
    <label>
      <input type="checkbox" name="dishes" value="pasta">
      Паста
    </label>
  </div>
</form>

Списки

Отдельным элементом формы являются списки. Представьте себе фильтр на сайте по продаже техники. Одновременно вы можете отфильтровать товары только в одной категории. Для этого можно использовать радиокнопки или даже чекбоксы в случае множественного выбора. Но есть еще один способ — использование списка.

Создание списка очень похоже на создание списка текста. В формах для этого используется тег <select>, пункты которого лежат внутри тегов <option>.

<form>
  <h3>Категория</h3>
  <select name="category">
    <option value="computer">Компьютеры</option>
    <option value="phone" selected>Телефоны</option>
    <option value="appliances">Бытовая техника</option>
  </select>
</form>

В примере появился новый атрибут — selected. Он отвечает за то, какой элемент выбран по умолчанию. Если он не указан, то будет выбран первый элемент списка.

Для элементов радиокнопок и чекбоксов для выбора по умолчанию используется атрибут checked

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

<form>
  <h3>Категория</h3>
  <select name="category" multiple>
    <option value="computer">Компьютеры</option>
    <option value="phone" selected>Телефоны</option>
    <option value="appliances" selected>Бытовая техника</option>
  </select>
</form>

Отправка формы

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

Отправка формы может быть осуществлена одним из двух способов:

  • Создание <input> с типом submit. В этом случае создастся элемент в виде кнопки с именем, указанным в качестве значения атрибута value.
  • Использование парного тега <button>. Такой способ больше развязывает руки, так как внутри такой кнопки может содержаться любой HTML код, при клике на который будет отправлена форма. Такой способ очень удобен для создания кнопки в виде иконки. Сейчас такой способ наиболее актуальный.

Разделение участков формы

Cтрашный сон пользователя — длинная форма без разделения на секции. К центру такой формы уже непонятно, для чего именно заполняются те или иные поля. Можно отделять секции с помощью заголовков или визуально. Но браузеры предоставляют специальный механизм для разделения участков формы на логические секции — fieldset. Их можно рассматривать как альтернативу тегу <section>, но только для форм. В качестве заголовка выступает тег <legend>.

<form>
  <fieldset>
    <legend>Данные о пользователе</legend>
    <label>
      Имя
      <input type="text" name="name">
    </label>
    <br>
    <label>
      Фамилия
      <input type="text" name="surname">
    </label>
  </fieldset>
  <fieldset>
    <legend>Способ доставки</legend>
    <label>
      Курьер
      <input type="radio" name="delivery" value="courier">
    </label>
    <br>
    <label>
      Самовывоз
      <input type="radio" name="delivery" value="pickup">
    </label>
  </fieldset>
  <button>Заказать</button>
</form>

Текст внутри текстового поля

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

За вывод такого текста отвечает атрибут placeholder, значением которого является текст, выводимый до ввода символов в поле

<form>
  <fieldset>
    <legend>Данные о пользователе</legend>
    <label>
      Имя
      <input type="text" name="name" placeholder="Введите ваше имя">
    </label>
    <br>
    <label>
      Фамилия
      <input type="text" name="surname" placeholder="Введите вашу фамилию">
    </label>
  </fieldset>
  <button>Отправить</button>
</form>

⚡️ HTML и CSS с примерами кода

Тег <form> (от англ. form — форма) устанавливает форму на веб-странице.

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

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

Для отправки формы на сервер используется кнопка Submit, того же можно добиться, если нажать клавишу Enter в пределах формы. Если кнопка Submit отсутствует в форме, клавиша Enter имитирует её использование.

Когда форма отправляется на сервер, управление данными передаётся программе, заданной атрибутом action элемента <form>. Предварительно браузер подготавливает информацию в виде пары «имя=значение», где имя определяется атрибутом name элемента <input>, а значение введено пользователем или установлено в поле формы по умолчанию. Если для отправки данных используется метод GET, то адресная строка может принимать следующий вид.

http://www.htmlbook.ru/handler.php?nick=%C2%E0%ED%FF+%D8%E0%EF%EE%F7%EA%E8%ED&page=5

Параметры перечисляются после вопросительного знака, указанного после адреса серверной программы и разделяются между собой символом амперсанда (&). Русские буквы преобразуются в шестнадцатеричное представление (в форме %HH, где HH — шестнадцатеричный код для значения ASCII-символа), пробел заменяется на плюс (+).

Допускается внутрь контейнера <form> помещать другие элементы, при этом сама форма никак не отображается на веб-странице, видны только элементы внутри неё.

Формы
  • button
  • datalist
  • fieldset
  • form
  • input
  • label
  • legend
  • meter
  • optgroup
  • option
  • output
  • progress
  • select
  • textarea

Синтаксис

<form>...</form>

Закрывающий тег обязателен.

Атрибуты

accept-charset
Устанавливает кодировку, в которой сервер может принимать и обрабатывать данные.
action
Адрес программы или документа, который обрабатывает данные формы.
autocomplete
Включает автозаполнение полей формы.
enctype
Способ кодирования данных формы.
method
Метод протокола HTTP.
name
Имя формы.
novalidate
Отменяет встроенную проверку данных формы на корректность ввода.
target
Имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.

Также для этого элемента доступны универсальные атрибуты.

accept-charset

Устанавливает кодировку, в которой сервер может принимать и обрабатывать данные формы.

Синтаксис

<form accept-charset="<кодировка>">...</form>

Значения

Название кодировки, например Windows-1251, UTF-8 и др.

Значение по умолчанию

Кодировка, установленная для страницы.

action

Указывает обработчик, к которому обращаются данные формы при их отправке на сервер. В качестве обработчика может выступать серверная программа или HTML-документ, который включает в себя серверные сценарии (например, Parser). После выполнения обработчиком действий по работе с данными формы он возвращает новый HTML-документ.

Если атрибут action отсутствует, текущая страница перезагружается, возвращая все элементы формы к их значениям по умолчанию.

Синтаксис

<form action="<адрес>">...</form>

Значения

В качестве значения принимается полный или относительный путь к серверному файлу.

Значение по умолчанию

Нет.

autocomplete

Управляет автозаполнением полей форм. Значение может быть перекрыто атрибутом autocomplete у конкретных элементов формы.

Автозаполнение производит браузер, который запоминает написанные при первом вводе значения, а затем подставляет их при повторном наборе в поля формы. При этом автозаполнение может быть отключено в настройках браузера и не может быть в таком случае изменено при помощи атрибута autocomplete.

При вводе первых букв текста отображается список сохранённых ранее значений, из которого можно выбрать необходимое.

Синтаксис

<form autocomplete="on | off">...</form>

Значения

on
Включает автозаполнение формы.
off
Отключает автозаполнение. Это значение обычно используется для отмены сохранения в браузере важных данных (паролей, номеров банковских карт), а также редко вводимых или уникальных данных (капча).

Значение по умолчанию

on

enctype

Определяет способ кодирования данных формы при их отправке на сервер. Обычно устанавливать значение атрибута enctype не требуется, данные вполне правильно понимаются на стороне сервера. Однако если используется поле для отправки файла (input type="file"), следует определить атрибут enctype как multipart/form-data.

Синтаксис

<form
  enctype="application/x-www-form-urlencoded | multipart/form-data | text/plain"
>
  ...
</form>

Значения

application/x-www-form-urlencoded
Вместо пробелов ставится +, символы вроде русских букв кодируются их шестнадцатеричными значениями (например, %D0%90%D0%BD%D1%8F вместо Аня).
multipart/form-data
Данные не кодируются. Это значение применяется при отправке файлов.
text/plain
Пробелы заменяются знаком +, буквы и другие символы не кодируются.

Значение по умолчанию

application/x-www-form-urlencoded

method

Атрибут method сообщает серверу о методе запроса.

Синтаксис

<form method="get | post">...</form>

Значения

Значение атрибута method не зависит от регистра. Различают два метода — get и post.

get
Этот метод является одним из самых распространённых и предназначен для получения требуемой информации и передачи данных в адресной строке. Пары «имя=значение» присоединяются в этом случае к адресу после вопросительного знака и разделяются между собой амперсандом (символ &). Удобство использования метода get заключается в том, что адрес со всеми параметрами можно использовать неоднократно, сохранив его, например, в закладки браузера, а также менять значения параметров прямо в адресной строке.
post
Метод post посылает на сервер данные в запросе браузера. Это позволяет отправлять большее количество данных, чем доступно методу get, поскольку у post не установлено ограничение в 4 Кб. Большие объёмы данных используются в форумах, почтовых службах, заполнении базы данных, при пересылке файлов и др.

Значение по умолчанию

get

name

Определяет уникальное имя формы. Как правило, имя формы используется для доступа к её элементам через скрипты.

Синтаксис

<form name="<имя>">...</form>

Значения

В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к форме по имени через скрипты соблюдайте то же написание, что и в атрибуте name.

Значение по умолчанию

Нет.

novalidate

Отменяет встроенную проверку данных введённых пользователем в форме на корректность. Такая проверка осуществляется браузером автоматически при отправке формы на сервер и происходит для полей <input type="email">, <input type="url">, а также при наличии атрибута pattern или required.

Синтаксис

<form novalidate>. ..</form>

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

target

После того, как обработчик формы получает данные, он возвращает результат в виде HTML-документа. Вы можете определить фрейм, в который будет загружаться итоговая веб-страница. Для этого используется атрибут target, в качестве его значения указывается имя фрейма. Если target не установлен, возвращаемый результат показывается в текущей вкладке.

Синтаксис

<form target="<значение>">...</form>

Значения

В качестве значения используется имя фрейма, заданное атрибутом name элемента <iframe>. Если установлено несуществующее имя, то будет открыта новая вкладка. В качестве зарезервированных имён можно указывать следующие.

_blank
Загружает страницу в новую вкладку браузера.
_self
Загружает страницу в текущую вкладку.
_parent
Загружает страницу во фрейм-родитель; если фреймов нет, то это значение работает как _self.
_top
Отменяет все фреймы и загружает страницу в окне браузера; если фреймов нет, то это значение работает как _self.

Значение по умолчанию

_self

Спецификации

  • HTML 5
  • HTML 4.01 Specification

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>FORM</title>
  </head>
  <body>
    <form action="handler.php">
      <p>
        <b
          >Как по вашему мнению расшифровывается
          аббревиатура "ОС"?</b
        >
      </p>
      <p>
        <input
          type="radio"
          name="answer"
          value="a1"
        />Офицерский состав<br />
        <input
          type="radio"
          name="answer"
          value="a2"
        />Операционная система<br />
        <input
          type="radio"
          name="answer"
          value="a3"
        />Большой полосатый мух
      </p>
      <p><input type="submit" /></p>
    </form>
  </body>
</html>

Ссылки

  • Тег <form> MDN (рус. )

Счетчики CSS

❮ Предыдущий Следующий ❯

Пицца

Гамбургер

Hotdogs

Счетчики CSS — это «переменные», поддерживаемые CSS, значения которых могут увеличиваться по правилам CSS (чтобы отслеживать, сколько раз они используются). Счетчики позволяют настроить внешний вид содержимого в зависимости от его размещения в документе.

Автоматическая нумерация со счетчиками

Счетчики CSS похожи на «переменные». Значения переменных могут быть увеличены с помощью правил CSS. (который будет отслеживать, сколько раз они используются).

Для работы со счетчиками CSS мы будем использовать следующие свойства:

  • counter-reset — Создает или сбрасывает счетчик
  • counter-increment — Увеличивает значение счетчика
  • контент — Сгенерированные вставки содержание
  • counter() или counters() функция — Добавляет значение счетчика элементу

Чтобы использовать счетчик CSS, его необходимо сначала создать с помощью counter-reset .

В следующем примере создается счетчик для страницы (в селекторе основной части), затем увеличивает значение счетчика для каждого элемента

и добавляет «Раздел

< значение счетчика >:» в начало каждого элемента

:

Пример

тело {
  сброс счетчика: раздел;
}

h3::before {
  counter-increment: section;
  content: «Раздел » counter(section) «: «;
}

Попробуйте сами »

Счетчики вложения

В следующем примере создается один счетчик для страницы (раздела) и один счетчик для каждого элемента

(подраздела). Счетчик «раздел» будет подсчитывается для каждого элемента

со значением «Section < » счетчик разделов >.», а счетчик «подразделов» будет учитываться для каждого элемента

с «

< значение счетчика раздела >.< значение счетчика счетчик подразделов >»:

Пример

тело {
  сброс счетчика: раздел;
}

ч2 {
сброс счетчика: подраздел;
}

h2::before {
  счетчик приращения: раздел;
  content: «Раздел » counter(section) «. «;
}

h3::before {
счетчик-инкремент: подраздел;
  содержание: счетчик(раздел) «.» счетчик(подраздел) » «;
}

Попробуйте сами »

Счетчик также может быть полезен для составления структурированных списков, поскольку новый экземпляр счетчика автоматически создается в дочерних элементах. Здесь мы используем counters() функция для вставки строки между разными уровнями вложенности счетчики:

Пример

ol {
  counter-reset: section;
тип стиля списка: нет;
}

li::before {
  counter-increment: section;
содержимое: counters(section,.») » «;
}

Попробуйте сами »

Свойства счетчика CSS

Свойство Описание
содержание Используется с псевдоэлементами ::before и ::after для вставки сгенерированного содержимого
встречное приращение Увеличивает одно или несколько значений счетчика
сброс счетчика Создает или сбрасывает один или несколько счетчиков
счетчик() Возвращает текущее значение именованного счетчика

❮ Предыдущий Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

3 900 Ссылки 9053

3 900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
|

О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Forms — Pure

Форма по умолчанию

Чтобы создать встроенную форму по умолчанию, добавьте имя класса в чистой форме к любому элементу

.

Компактная встроенная форма Запомнить меня

 <форма>
    <набор полей>
        Компактная встроенная форма

Составная форма

Чтобы создать составную форму с элементами ввода под метками, добавьте имя класса pure-form-stacked к элементу вместе с pure-form .

Сложенная форма Электронная почта Данное поле является обязательным к заполнению. Пароль Состояние АЛЬКАИЛ Запомнить меня

 <форма>
    <набор полей>
        Форма с накоплением
        
        
        Это обязательное поле.
        
        
        
        <выбрать>

Выровненная форма

Чтобы создать выровненную форму, добавьте имя класса с выравниванием по чистой форме к элементу рядом с чистой формой . В выровненной форме метки выравниваются по правому краю относительно элементов управления вводом формы, но на небольших экранах возвращаются к форме с накоплением.

Имя пользователя Данное поле является обязательным к заполнению.

Пароль

Адрес электронной почты

Суперкалифрагилистическая этикетка

Я ознакомился с условиями

 <форма>
    <набор полей>
        <дел>
            
            
            Это обязательное поле.

<дел>
<дел>
<дел> .." />