Как сделать форму внутри формы html

Обновлено: 08.07.2024

С приходом HTML5 формы сталее более универсальными. Элемент input теперь может содержать электронные адреса, даты и много другое, их можно отмечать как обязательные не прибегая к javascript – и это всего лишь некоторые из наиболее ценных возможностей. Также теперь для одной формы можно задействовать несколько submit кнопок, а также теперь есть возможность вынести кнопку submit за пределы формы.

Несколько submit внутри одной формы

До недавнего времени в форму можно было вставить только одну кнопку submit, в противном случае форма обрабатывала только последнюю кнопку. Добавляя method="post" и url к элементу формы "form" мы получали рабочую форму.

Теперь ситуация изменилась – в HTML добавили новые свойства "formmethod" и "formaction". Они позволяют добавить метод post и url непосредственно в кнопку "submit", таким образом к form ничего дописывать не нужно. Имея эти параметры, прикрепленные к кнопке "submit", а не к form – все это добавляет больше гибкости форме. Теперь можно сделать столько кнопок, сколько будет необходимо для формы.

Теперь каждая кнопка "submit" относится к разным url и все это избавляет от того, что при верстке необходимо писать javascript код. Все это отлично работает и теперь по нажатии на какую-нибудь кнопку форма получит formmethod и formaction, которые перезапишут стандартные параметры method и action. Если в форме будет присутствовать обычная кнопка "submit" без новых параметров, то он вернет форме значения, установленные для элемента form.

Свойства formmethod и formaction поддерживаются всеми популярными браузерами

Элементы формы (input, select, textarea) за пределами формы

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

На сегодняшний день аттрибут form поддерживается всеми популярными браузерами, за исключением Internet Explorer (вплоть до 10й версии).


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

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

Рассмотрим построчно теги из примера.

- этот тег формы. Внутри него могут находиться различные элементы: текстовые поля, поля для ввода пароля и т.п. Во время отправки формы все поля внутри формы передадут свои значения на страницу, адрес которой указан в атрибуте action=". ". Способ передачи данных указывается в атрибуте method=". ". Подробнее о передаче данных из формы на сайт можно прочитать в разделе по программированию, к примеру, на языке PHP. В этой статье рассмотрим только виды полей для вода информации.

- этот тег может отображать различные элемены в зависимости от значения атрибута type=". ". На третьей строке он используется как поле для ввода текста type="text". А на четвёртой стройке он используется для ввода пароляtype="password". Отличие типов "text" от "password" в том, что в поле для ввода пароля все символы скрываются, заменяясь на звёздочки или точки.

В атрибуте value=". " задаётся значение, которое принимает элемент формы. К примеру, если в поле с атрибутом type="text" задать value="Это текст в форме", то после загрузки html страницы в этом текстовом поле будет стоять текст "Это текст в форме". В случае с полем type="submit" значение в атрибуте value=". " устанавливает надпись на кнопку отправки формы.

В примере все текстовые поля имеют атрибут value="" (value равно пустоте, между двойными кавычками "" ничего нет). Поэтому на заднем фоне поля для ввода отображается текст-заглушка, которая сразу прячется, как только начинается ввод в поле. Текст этой заглушки можно задать через атрибут placeholder=". ".

Далее разберём подробнее какие ещё типы полей могут быть в формах. Рассмотрим самые востребованные.

input type="radio"


Поле для ввода с атрибутом type="radio" помогает сделать переключатель вариантов. К примеру, если пользователь должен выбрать только один вариант из списка, то код формы будет таким: На экране негобраузера форма будет выглядеть так: Обратите внимание, что все поля имеют атрибут name="cheese" с одинаковым значением. Это необходимо, потому что на одной странице могут находится несколько форм с радиокнопками. Но переключатель будет работать только внутри группы радиокнопок с одинаковым значением атрибута name. А значение value=". " должно быть разным. именно value у выбранного пункта будет передано во время отправки формы.

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

input type="checkbox"


Если есть необходимость выбрать несколько пунктов из предложенных, то необходимо использовать type="checkbox": Браузер отрисует такие элементы как поля, в которых можно поставить галочку. Как и в случае с type="radio" можно задать checked для тех пунктов, которые должны быть отмечены по умолчанию после загрузки страницы.

input type="file"


Одним из самых востребованных типов вода полей является поле для выбора файла type="file". HTML формы с кнопкой загрузки файла выглядит так:
В браузере форма из этого примера будет выглядеть так: При клике на кнопку выбора файла откроется окно, где пользователь сможет указать файл для загрузки. Кнопка "Загрузить" (она же ) начинает процесс отправки формы вместе с выбранным файлом.

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

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

Базовая структура

Начните с элемента form. Здесь ничего особенного. Покрытие только основной структуры.


Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Если вы отправляете данные формы естественным образом (то есть без JavaScript), вам необходимо включить атрибут action, в котором значением является URL-адрес, на который вы будете отправлять данные формы. Method должен быть GET или POST — в зависимости от того, чего вы пытаетесь достичь (не отправляйте конфиденциальные данные через GET).

Кроме того, существует также менее используемый атрибут enctype, который определяет тип кодировки отправляемых данных. Кроме того, атрибут target, хотя он не обязательно является уникальным атрибутом форм, может использоваться для отображения вывода на новой вкладке.

Формы на основе JavaScript не обязательно нуждаются в этих атрибутах.

form method = "POST" action = "/subscribe" enctype = "application/x-www-form-urlencoded" target = "_blank" >

Формы состоят из полей ввода.

Включение меток для удобства использования и доступности

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

Смежные метки

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

Однако данный метод может потребоваться в определенных обстоятельствах, поэтому вот как это будет выглядеть:

Подпишись на наш телеграм-канал TechRocks WEB-разработка?


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

Раньше на сайтах были простые, скучные HTML-формы без всякой стилизации. Но с появлением CSS все изменилось. Благодаря новейшим свойствам CSS мы сейчас можем создавать куда более интересные и красивые формы.

И это не мое личное мнение. На иллюстрации ниже вы видите, как выглядит обычная HTML-форма без CSS.


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


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

Наше руководство по стилизации форм при помощи CSS будет состоять из шести пунктов.

  1. Определение размеров формы (box-sizing).
  2. Селекторы CSS для элементов ввода (input).
  3. Базовые методы стилизации для текстовых полей ввода.
  4. Стилизация прочих полей ввода.
  5. Псевдоклассы UI.
  6. Элементы ввода, недоступные для кастомизации.

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

1. Устанавливаем box-sizing

Я обычно устанавливаю * не только для форм, но и для веб-страниц. Благодаря этому ширина (width) всех элементов будет содержать внутренние отступы (padding).

Ширина .some-class без box-sizing:border-box будет больше 200px, что может стать проблемой. Поэтому большинство разработчиков используют border-box для всех элементов.

Ниже приведена улучшенная версия нашего первоначального кода. В нее также добавлены псевдоэлементы :before и :after.

Совет: универсальный селектор * выбирает все элементы в документе.

2. Селекторы CSS для элементов ввода

Самый простой способ выбрать элементы ввода — использовать селекторы атрибутов.

Эти селекторы будут выбирать все элементы ввода в документе. Если вам нужно выбрать какие-то специфические селекторы, следует добавить классы:

3. Базовые методы стилизации для однострочных текстовых полей ввода

Чаще всего поля ввода в формах бывают однострочными. Обычно такое поле представляет собой простой блок с границей (его вид зависит от браузера).

Вот HTML-разметка для однострочного текстового поля с плейсхолдером.

Выглядеть это будет так:


Чтобы сделать это текстовое поле более привлекательным, можно использовать следующие свойства CSS:

  • Padding (внутренние отступы)
  • Margin (внешние отступы)
  • Border (граница)
  • Box shadow (тень блока)
  • Border radius (для скругления границ)
  • Width (ширина)
  • Font (шрифт)

Давайте пройдемся по каждому из этих свойств.

Padding

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


Margin

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


Border

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

Совет: если убираете границу, обязательно добавьте цвет фона или тень. В противном случае пользователь просто не увидит ваше поле.

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

Box shadow

Свойство CSS box-shadow позволяет добавить тень элемента. Меняя 5 значений этого свойства, вы сможете добиться самых разнообразных эффектов.


Border radius

Свойство border-radius может очень сильно изменить вид ваших форм. Поля для ввода текста, имеющие скругление углов, выглядят совсем иначе.


Комбинируя box-shadow и border-radius, вы можете существенно изменить вид полей.


Width

Используйте свойство width, чтобы установить ширину поля ввода.

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

4. Стилизация прочих типов полей ввода

Вы также можете прописывать стили и для других полей — области текста, радиокнопок, чек-боксов и пр.

Давайте рассмотрим подробнее каждое из них.

Текстовые области (text areas)

Также для текстовых областей применимо и очень полезно свойство resize. В большинстве браузеров текстовые области по умолчанию могут растягиваться как по оси x, так и по оси y (значение: both). Но вы можете установить для этого свойства также значение horizontal или vertical.

Посмотрите на пример:

Здесь я использовал resize:vertical, чтобы разрешить изменение размера исключительно по вертикали. Такая практика применяется в большинстве форм, поскольку позволяет избежать появления горизонтальной полосы прокрутки.

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

Чекбоксы и радиокнопки

Дефолтные чекбоксы и радиокнопки очень сложно стилизовать, для этого требуется более сложный CSS-код (и HTML — тоже).

Для стилизации чекбокса используйте следующий HTML-код.

Несколько вещей, на которые нужно обратить внимание:

Вот пользовательский чекбокс (комментарии в CSS-коде поясняют происходящее более подробно):

See the Pen yLNKQBo by Supun Kavinda (@SupunKavinda) on CodePen.

Вот пользовательская радиокнопка:

See the Pen eYNMQNM by Supun Kavinda (@SupunKavinda) on CodePen.

В обоих примерах мы использовали одну и ту же концепцию (input:checked).

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

Раскрывающийся список

Раскрывающийся список позволяет пользователю выбрать элемент из нескольких предложенных вариантов.

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


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

Кнопки

Как и у большинства элементов, у кнопок есть стили, установленные по умолчанию.

Давайте немного украсим нашу кнопку.

5. Псевдоклассы UI

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

Эти псевдоклассы могут использоваться для показа уведомлений в зависимости от атрибутов элемента:

  • :required
  • :valid и :invalid
  • :checked (этим мы уже пользовались)

Эти могут использоваться для создания эффектов для каждого состояния:


Примечание: не может содержать другие элементы. А значит, и псевдоэлементы :after или :before. Поэтому нам нужно использовать другой элемент — .

Мы можем сделать то же самое с псевдоклассами :valid и :invalid.

:hover и :focus

:hover выбирает элемент, когда на него наводится курсор мыши. :focus выбирает элемент, когда тот в фокусе.

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

Вот несколько эффектов наведения для элементов формы (попробуйте навести курсор на разные поля):

See the Pen yLNKZqg by Supun Kavinda (@SupunKavinda) on CodePen.

Когда пользователь видит небольшие изменения в элементе, происходящие при наведении мыши, он понимает, что с элементом можно что-то делать. Это важно для дизайна элементов форм.

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

Следующий код удаляет внешнюю границу для всех элементов:

Добавляем внешнюю границу для элементов в фокусе:

6. Элементы ввода, недоступные для кастомизации

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

Эти элементы предоставляются браузером и стилизуются в зависимости от вашей ОС. Единственный способ изменить их стиль — использовать кастомные контролы (Custom Controls), созданные при помощи div, span и прочих HTML-элементов, поддающихся стилизации.

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

Кастомные контролы для элементов форм уже разработаны для основных JavaScript-библиотек. Найти их можно на GitHub.

Заключение

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

В качестве совета напоследок: не забывайте делать все ваши формы отзывчивыми.

Читайте также: