Шаблоны форм для ввода html

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Free HTML Form Templates and Coded Examples

License

FormBold/html-form-examples-templates

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Free HTML Form Templates and Coded Examples

Fully working free HTML Form Templates and code examples, that you can copy-paste and start using immediately with static websites. Each and every template is coded using vanilla HTML/CSS and comes with refreshing and clean design without any dependencies. These forms are crafted to serve different purposes and come with all necessary web forms and form elements you need such as HTML contact form, reservation form, appointment form, file upload form, chat bubble, and much more.

If you would like to make these forms fully working and dynamically handled, you can use FormBold and replace the demo end-point URL https://formbold.com/s/FORM_ID with your own FormBold form API end-point, that you can create after login to FormBold account.

For detailed guidelines and getting started guide, you can check out our documentation

All these form templates are free and open-source. You can use, edit and use with personal/commercial projects without any attributions. You can give this repo a star as appreciation which will help us to create and share more similar resources.

About

Free HTML Form Templates and Coded Examples

Источник

Шаблон HTML-формы

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

Шаблон HTML-формы

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

и

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

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

Тег группирует поля формы. Он часто используется с — тегом, который задаёт подписи для каждой группы. Мы использовали этот тег, чтобы разделить поля формы на три части: «Персональная информация», «Контакты» и «Обратная связь».

Заголовок или подпись для полей ввода. Он связывается с элементами двумя способами.

При помощи атрибута for со значением, аналогичным id элемента:

Элемент заключается между открывающим и закрывающим тегами :

 Соглашаюсь на обработку персональных данных 

Создаёт раскрывающийся список:

Уровень образования Среднее общее Среднее профессиональное Высшее Неоконченное высшее  

Для добавления элементов списка используется тег .

Атрибуты тега :

• autocomplete — включено ли автозаполнение поля;
• disabled — в списке нельзя ничего выбрать;
• form — связывает с формой, если он не вложен в тег ;
• multiple — создаёт «мультиселект», то есть список, в котором можно выбрать несколько значений;
• name — имя элемента, используется для отправки формы;
• required — один из пунктов обязательно должен быть выбран;
• size — размер элемента.

Добавляет поле для ввода сообщения — пользователь может оставить в нём вопрос, комментарий для техподдержки или что-то ещё.

У есть особенность: пользователи могут прямо в браузере растягивать текстовое поле по ширине и высоте, ломая вёрстку и нарушая замыслы дизайнера. Чтобы заблокировать такое поведение, используйте CSS-свойство resize: none .

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

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

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

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

• text — можно вводить только текст;
• number — ввод только цифр;
• tel — для телефонных номеров;
• email — ввод электронной почты;
• submit — инпут превращается в кнопку для отправки данных на сервер;
• password — поле для ввода паролей;
• date — для ввода даты;
• checkbox — инпут превращается в чекбокс;
• radio — создаёт радиокнопки.

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

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

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

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

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

Что выбрать

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

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

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

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

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

Источник