Формы в HTML | Учебные курсы | WebReference

<label>

Так как элементы формы сами по себе не очень описательны, им, как правило, предшествует текстовая метка.

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

Хотя вы можете применять короткие абзацы для описания элементов формы, использование <label> является семантически более правильным, потому что они существуют только в формах. <label> также может быть связан с определённым элементом формы с помощью атрибута for, соответствующему значению id у поля.

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

1 → темная форма входа

Простая форма темная входа, со стандартными полями, и креативной кнопкой синего цвета.

10 → форма серого цвета

Серый оттенок, в виде друг на друга наложенных листочков.

11 → крупная форма с дополнительным элементом

Красивая, с крупными полями ввода данных, и дополнительной выпадающей кнопкой при наведении (её можно использовать для любых, задуманных целей).

12 → дизайн в виде блокнота

Дизайн формы в виде блокнота, с простыми полями, но выдержанным стилем.

13 → красочная, прозрачная форма

Красочная, прозрачная и цветная форма, с дополнительными кнопками входа через социальные сети, а также красивым чекбоксом “Запомнить меня”.

14 → apple iphone форма

Форма входа для любителей Apple, с формами ввода, кнопкой “Запомнить” – в общем мне понравилось!

15 → чёткая форма с заголовком

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

16 → тёмная форма

Тёмная форма с красивой и заметной кнопкой отправки данных.

17 → черная форма

Черная форма входа с белыми полями – хорошее сочетание цветов.

18 → горизонтальная форма входа и регистрации

Горизонтальная форма входа и регистрации пользователя, с эффектом 3D переключения между формами.

19 → темная форма с дополнительными элементами

Темная форма с кнопками входа через социальные сети и красивыми полями.

2 → светлая форма входа

Светлая форма входа с прозрачной рамочкой и четкой структурой.

20 → форма входа на сайт регистрация

Регистрация форма входа, с 3D эффектом переключения между формами и социальными кнопками входа.

21 → белая форма с красным заголовком

Светлая форма, с бросающимся в глаза заголовком, и простыми полями ввода текста.

22 → форма входа, регистрации и восстановление пароля

Тройная форма: регистрация, вход на сайт и восстановления пароля. Переключение между формами на Javascript.

3 → эффектная форма с эффектом появления

Элегантная форма, светлого тона, с красивым эффектом появления “изнутри”.

Похожее:  Как сделать систему авторизации и регистрации на PHP -

4 → простая форма с эффектом появления

Простая форма, всего 3 стандартных элемента, но с приятным эффектом появления “снизу” с прозрачностью.

5 → красивая форма с логотипом apple

Продуманная форма на сайт с интересным дизайном и логотипом apple.

6 → маленькая форма в розовом стиле

Маленькая и простая, в розовом стиле, и интересным дизайном.

7 → светлая форма

Светлая, в выдержанном стиле и дизайне, ничего лишнего.

8 → супер форма входа и восстановления пароля

Форма входа обратная сторона – восстановление пароля. Эффект 3D переворота, при переключении между формами.

9 → приятная дизайнерская форма с эффектом

Приятная на вид, красивый эффект появления иконок при активации поля ввода.

Placeholder

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

Если вы начинаете набирать что-то, то увидите как текст «Введите своё имя» исчезнет.

Выпадающие меню

Если количество вариантов для выбора занимает слишком много места, вы можете воспользоваться выпадающими меню <select>.

Они работают подобно переключателям, отличается только компоновка.

Множественный выбор из выпадающего меню

Если добавить атрибут multiple, вы можете предоставить возможность выбрать несколько вариантов.

Выберите несколько вариантов посредством удержания Ctrl (или ⌘) и щелчка. Это может быть хорошей альтернативой применению несколько флажков в строке.

Переключатели

Вы можете предоставить пользователю список вариантов на выбор с помощью переключателей.

Для работы этого элемента формы, ваш HTML-код должен сгруппировать список переключателей вместе. Это достигается с помощью одного и того же значения для атрибута name:

Поскольку все переключатели используют одинаковое значение атрибута name (в данном случае значение status), выбор одного из вариантов отменит все остальные. Переключатели являются взаимоисключающими.

Подписи к полям ввода

Чтобы привязать к полю ввода подпись используется тег <label> с атрибутом for, в котором указывается id инпута. Этот id, разумеется, нужно заранее добавить.

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

Пояснения к статье:

Здравствуйте, в этой статье мы расскажем вам о том, как создать форму авторизации для входа на сайт. Для этого нам понадобятся просто HTML и CSS, JavaScript будем использовать по минимуму.

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

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

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

Похожее:  Обменники электронной валюты онлайн ТОП-40 — лучший и выгодный обмен электронных денег

Разница между переключателями и флажками

Хотя флажок существует сам по себе, переключатели могут появляться только в виде списка (что означает, по меньшей мере два варианта).

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

Тег textarea – многострочное поле ввода:

Для создания многострочного поля используется тег <textarea>. Этот тег является парным, в отличие от <input>. А ещё для управления его шириной и высотой можно управлять с помощью атрибутов cols и rows соответственно.

На примере выглядит вот так:

Результат в браузере:
Формы в HTML | Учебные курсы | WebReference

Текстовые поля

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

Текст<input type=”text”>Допускает любой тип символов
Email<input type=”email”> Может показывать предупреждение, если введён неверный email
Пароль<input type=”password”>Символы показываются как точки
Число<input type=”number”>Могут быть использованы клавиши вверх/вниз
Телефон<input type=”tel”>Может сработать автозаполнение
Многострочный текст<textarea></textarea>Может быть изменён размер поля

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

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

К примеру, поле для пароля показывает точки вместо символов. А поле для чисел позволяет увеличивать/уменьшать значение с помощью клавиш вверх и вниз.

Флажки

Флажки — это элементы формы, которые имеют только два состояния: включено или выключено. Они в основном позволяют пользователю сказать: «Да» или «Нет» для чего-то.

Поскольку может оказаться сложно щёлкнуть по небольшому флажку, рекомендуется поместить флажок и его описание внутрь <label>.

Вы можете щёлкнуть по тексту «Я согласен с условиями» чтобы переключить флажок.

По умолчанию флажок выключен. Вы можете пометить его включенным, просто используя атрибут checked.

Форма авторизации: html разметка.

Начнем с “HTML”, первое что нам нужно сделать, так это подключить все необходимые инструменты — JavaScript и CSS. Для этого создадим 2 тега в блоке head: script(для подключения скриптов, с помощью атрибута “src”) и “link”(для подключения стилей, с помощью атрибута “href”).

Форма авторизации на сайте - самостоятельно

Теперь можно приступать к разметке нашей формы, открываем тег body. Внутри мы создадим небольшую конструкцию:

  1. Внешний блок с классом pinkbox — тег <div>.
  2. Блоки для авторизации и регистрации с классами signup и signin.
  3. Заголовок и форма с различными элементами — теги <form>, <h2>, <input> и т.д. Находятся внутри каждого блока.
Похожее:  Creating a Login Form with OTP Verification through Email in PHP Tutorial | Free Source Code Projects and Tutorials

Форма авторизации на сайте - самостоятельно

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

Здесь уже другая конструкция. Нам также придется использовать изображения(тег <img>).

Форма авторизации на сайте - самостоятельно

После того, как мы создали все блоки, закрываем тег <body> и все готово.

Форма авторизации: стилизация. css

Перед тем, как стилизировать все наши элементы и создавать отличнейший дизайн, нам необходимо прописать общие свойство для главного контейнера.

Из свойств мы применим только центрирование(margin 0 auto), изменим позиционирование, размеры и расположение по координатам.

После этого приступаем к стилизации слайдеров. Здесь будут применены стандартные свойства CSS, такие как фон, изменение ширины и высоты, рамки, тени и т.д.

Форма авторизации на сайте - самостоятельно

После стилизации слайдера, нам необходимо провести изменение небольших деталей, а также поработать над дизайном высшего блока.

Ваш CSS код должен выглядеть примерно так:

Форма авторизации на сайте - самостоятельно

После этого нам нужно задать стилизацию для формы, а также для псевдоклассов активных форм.

Форма авторизации на сайте - самостоятельно

Форма для загрузки файлов

Чтобы создать форму для загрузки файлов, использутеся тег <input> с типом file. При этом самой форме нужно прописать атрибут enctype=”multipart/form-data”:

А вот так будет выглядеть наше получившееся поле:
Поле для загрузки файла

На этом с формами всё. За домашку!

Чекбокс

Чекбокс создается тегом <input> с атрибутом type=”checkbox”. Если чекбокс на форме отмечен, то на бэкенд уйдет переменная с именем инпута, а иначе – нет. Чтобы чекбокс на форме был отмечен по умолчанию, то нужно добавить атрибут checked. Выглядеть это будет вот так:

Элемент <form>

Два атрибута HTML необходимы:

Как правило, информация формы посылается на сервер. Как эти данные затем будут обработаны выходит за рамки данного руководства.

Подумайте о форме как о наборе элементов управления, которые работают вместе, чтобы выполнить одну операцию. Если вы написали форму входа на сайт, у вас могло быть три поля:

Эти три элемента HTML будут заключены внутри одной формы <form action=”/login” method=”POST”>.

Вы можете аналогично добавить форму регистрации на той же HTML-странице, в отдельном элементе <form>.

Заключение

Форма авторизации на сайте - самостоятельно

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

Если хотите более детально разобраться в работе слайдера, а также в его конструкции — смотрите исходники. Желаем удачи в изучении!

Теги:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 4,00 из 5)
Загрузка...

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector