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 — указывает, в каком виде пересылать данные на сервер.

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

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

Что выбрать

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

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

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

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

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

Источник

85 Stylish CSS forms

Here is a collection of some of the most stylish CSS forms made with just HTML and CSS.

You may also like

• CSS Contact Forms
• 75 CSS Text Animations You Can Use
• 15 Amazing CSS Animated Background for you to try
• 57 Beautiful CSS Cards examples to improve your UI
• 19 Cool CSS Loading Animation to inspire you
• 17 Fancy CSS Search Boxes
• 21 Modern CSS menu examples
• 23 Fantastic CSS Hover Effects
• 19 CSS Border Animations you can implement
• 15 Stylised CSS Tables
• 13 Pure CSS Dropdown Menus
• 15 Creative CSS Filter Examples
• 35 Unique CSS Text Effects
• 15 CSS Sliders you can use
• 21 New Bootstrap Login Forms for you
• 19 Bootstrap Profiles you can use for yourself
• 13 Material Design Login Forms
• 35 Cool CSS Select Boxes
• 15 CSS Range Sliders you can use today
• 35 Creative use of CSS clip-path examples
• 29 Unique CSS Toggle Switches
• 41 Beautiful CSS Animation Examples

Animated Login Form

Dev: Alvaro Montoro

Animated Login Form

Dev: Alex Cornejo

Simple Login Form Animated

Dev: Himanshu C

Animated-Login-Form

See the Pen Animated-Login-Form by Swarup Kumar Kuila (@uiswarup) on CodePen.

Dev: Swarup Kumar Kuila

Animated Login Form

Dev: Stack Findover

Animated Login Form

Dev: Torben Colding

Neumorphic form

Dev: Pratham

Neumorphic form

Dev: Philip Lahner

Simple Sign In Form

Dev: John Bowie

Minimal Sign-In Form With Bulma.io

Dev: Paul Barker

Login Screen Animation

Dev: Johan Fagerbeg

Placeholders

Dev: Mikael Ainalem

See the Pen Subscribe by Omar Dsooky (@linux) on CodePen.

Dev: Omar Dsooky

Day 001 Login Form

Dev: Mohan Khadka

See the Pen Login Form by Tyler Fry (@frytyler) on CodePen.

Dev: Tyler Fry

Card component with floating labels

Dev: Håvard Brynjulfsen

Login form. Svg animation

Dev: @BrawadaCom

Abstract Sign Up Form – Day 2 – 100 DAYS – 2020

Dev: Ricky Eckhardt

Login Form with floating placeholder and light button

Dev: Soufiane Khalfaoui HaSsani

Log In / Sign Up – Pure CSS

Dev: Ivan Grozdic

See the Pen Login by Marco Biedermann (@marcobiedermann) on CodePen.

Dev: Marco Biedermann

Animated Login Form

Dev: Munsif Mujtaba

Placeholders

See the Pen Placeholders by Mikael Ainalem (@ainalem) on CodePen.

Dev: Mikael Ainalem

Neumorphism Login Form

Dev: Ricardo Oliva Alonso

Dev: Mike Young

Login form using HTML5 and CSS3

Dev: Brad Bodine

Sleek Login Form

Dev: Tony Banik

CSS Newsletter with Animated Floating Input Labels

Dev: Bilal.Rizwaan

Newsletter Form Dribble to HTML

Red Newsletter Form

Dev: Sazzad

See the Pen form by Arefeh hatami (@arefeh_htmi) on CodePen.

Dev: Arefeh hatami

Pupassure Sign Up Form

Dev: Ricky Eckhardt

Less annoying form

See the Pen Less annoying form by Andy Fitzsimon (@andyfitz) on CodePen.

Dev: Andy Fitzsimon

Transparent Material Login Form

Dev: alphardex

POP ART Button

Dev: Ahmad Nasr

Login form UI Design

Dev: Chouaib Belagoun

Sign-Up/Login Form

Multi Step Form with Progress Bar using jQuery and CSS3

Dev: Atakan Goktepe

Credit Card Form

Dev: Muhammed Erdem

Snake highlight

See the Pen Snake highlight by Mikael Ainalem (@ainalem) on CodePen.

Dev: Mikael Ainalem

Material Login Form

Dev: Andy Tran

Login Form – Modal

Dev: Andy Tran

Google Material Design Input Boxes

Dev: Chris Sev

Log in/Sign up screen animation

Dev: Josh Sorosky

Interactive Sign Up Form

See the Pen Interactive Sign Up Form by Riccardo Pasianotto (@rkpasia) on CodePen.

Dev: Riccardo Pasianotto

Double slider Sign in/up Form

Dev: Florin Pop

Credit Card Payment Form

Dev: Adam Quinlan

Slide Sign In/Sign Up form

Dev: Danielkvist

Flat Login Form

Dev: Andy Tran

Material Design Login Form

Dev: Josh Adamous

Form fields with material design and video background, in pure CSS

Dev: Jon Uhlmann

RESPONSIVE MATERIAL DESIGN CONTACT FORM

Dev: Nikhil Krishnan

Material VCard

See the Pen Material VCard by Rian Ariona (@ariona) on CodePen.

Dev: Rian Ariona

Registration Form

Dev: afirulaf

Login/Registration Form Transition

Dev: Nikolay Talanov

Expanding Contact Form

Dev: Joe Harry

Responsive Signup/Login form

Dev: Mohamed Hasan

Interactive Form

See the Pen Interactive Form by Emmanuel Pilande (@epilande) on CodePen.

Dev: Emmanuel Pilande

Log in / Sign up

Dev: @BrawadaCom

Login/signup form animation

Dev: Shayan

Step by step register form

Dev: Jerome Renders

Elegant Login Form

See the Pen Elegant Login Form by Victor Hugo Matias (@reidark) on CodePen.

Dev: Victor Hugo Matias

MINIMALISTIC FORM

Dev: Matheus Marsiglio

Credit Card Checkout

Dev: Fabio Ottaviani

Form Design

See the Pen Form Design by Timurtek Bizel (@Timurtek) on CodePen.

Dev: Timurtek Bizel

One line Signup

Dev: Vineeth.TR

Animated Login Form

Spectre sign up form

Dev: Alex Devero

No Questions Asked Form & Magic Focus

Dev: Michal Niewitala

Obnoxious errors

Dev: Maria cheline

Flexbox Form

See the Pen Flexbox Form by Katherine Kato (@kathykato) on CodePen.

Dev: Katherine Kato

Invision login – dribbble remake

Dev: Mikael Ainalem

Emoji Form Validation

Dev: Marco Biedermann

Sign Up Form

Dev: Johnny Bui

CSS Snackables

Credit Card Payment Form

Dev: Jade Preis

Signup form UI

Dev: Tyler Johnson

Step by Step Form Interaction

Dev: balapa

Step By Step Form

Dev: DevTips

Step By Step Form

See the Pen Step by step form by Jonathan H (@Dunner) on CodePen.

Dev: Jonathan H

Single input 3D form

See the Pen Single input 3D form by Son Tran-Nguyen (@sntran) on CodePen.

Dev: Son Tran-Nguyen

Step by step form [KO]

See the Pen Step by step form [KO] by Thays Dos Santos Neves (@thayssn) on CodePen.

Dev: Thays Dos Santos Neves

Step by step form

See the Pen step by step form by Senhor Sulaiman (@zenu) on CodePen.

Dev: Senhor Sulaiman

Contact Form

See the Pen Contact Form by Aina Requena (she/her) (@ainarela) on CodePen.

Dev: Aina Requena

Источник