100 FREE HTML5 CSS3 Sign-in Registration Forms

<label>

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

<textarea>

Ещё одним элементом, используемым для сбора текстовых данных, является элемент <textarea>. Он отличается от элемента <input> тем, что может принимать большие отрывки текста в несколько строк.

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

3d login form concept

See the Pen 3D login form concept by Jenning (@jenning) on CodePen.

This simple looking 3D form will surprise you with rotation as you fill the fields with your login and password.

A collection of free html/css sign-in/sign-up registration forms

Now that you know what to look for in a form, let’s look at this wonderful selection of login tools that you can get for free.

Amazing css3 login form

See the Pen Amazing CSS3 Login Form by design8383 (@design8383) on CodePen.

I like this lightweight and a little old-school design. The form works fine and leaves a sweet cartoon-like impression.

Angular login form validating with mock data

See the Pen Angular Login form validating with mock data by Jatinder (@jatinderbimra) on CodePen.

Here we have a minimalistic login form with validation against mock data.

Angularjs login form

See the Pen Angularjs Login Form by Yavuz Selim Kurnaz (@yavuzselim) on CodePen.

Here’s another great solution for a business site. Here we have a nicely designed form with dynamic fields and a side panel.

Animated login form

See the Pen Animated Login Form by Che (@code_dependant) on CodePen.

This colorful form opens up when you hover over it. The author promises us more invisible sign-in registration forms soon, so let’s stay updated.

Apple login form

А какая форма понравилась вам?

Basic login form

See the Pen Basic Login Form by Robert Douglas (@redouglas) on CodePen.

This one features a nice coffee cup icon and some snazzy CSS animation. Check it out!

Basic login form using bootstrap

See the Pen Basic Login Form using Bootstrap by Zachary Shupp (@zacharyshupp) on CodePen.

This is a perfect tool to be used with Bootstrap templates. It will adapt to them without any issues.

Batman login form

See the Pen Batman login form by Hugo Giraudel (@HugoGiraudel) on CodePen.

A very stylish black sign-in form with a shiny visual effect! It will brighten up any strict corporate site.

Beautiful login form

See the Pen Beautiful Login Form by Rosh Jutherford (@the_ruther4d) on CodePen.

A minimalistic and pretty login form for paper style layouts.

Best horizontal android login form

See the Pen Best Horizontal Android login form by Rachid Taryaoui (@taryaoui) on CodePen.

Here’s a nice sign-in form for simple WordPress projects. Check out the neon color gradient effects on the sign-in button.

Boxy-login

See the Pen boxy-login by Chris Simari (@chrissimari) on CodePen.

Brutalist inspired login form with html5 pattern validation

See the Pen Brutalist Inspired Login Form with HTML5 Pattern Validation by Nikki Pantony (@nikkipantony) on CodePen.

This old-school style sign-in form was inspired with Brutalist. It looks impressive! It features flat visual effects and data validation.

Bubble animated login form

See the Pen Bubble animated Login Form by Akhil Sai Ram (@akhil_001) on CodePen.

Want to bubble up your site? This form offers pretty animation and dynamic transitions for your new site.

Concept material login form

See the Pen Concept Material Login Form by İbrahim ÖZTÜRK (@ibrahimozturkme) on CodePen.

A beautiful monocolor sign-in form. The fields are dynamic, and there is some animation when you click on the Login button.

Css 3 cheat sheets

By clicking the button you agree to the Privacy Policy and Terms and Conditions.

Css animated login form

See the Pen CSS Animated Login Form by Jordan Parker (@jordyparker) on CodePen.

A bright login form enhanced with CSS. The design doesn’t have many extra details but will work perfectly fine for simpler projects.

Css login form

See the Pen CSS login form by Hugo Giraudel (@HugoGiraudel) on CodePen.

This sign-in form is far from generic. It is a perfect solution for flat site designs.

Css3 animation cloud and login form

See the Pen CSS3 Animation Cloud and login form by Ravinthranath (@ravinthranath) on CodePen.

How about this dynamic and colorful form for sites and games? The clouds move at different speeds, so it resembles the Parallax effect. Check out the details!

Dailyui #001 – sign up

See the Pen DailyUI #001 – Sign Up by Maycon Luiz (@mycnlz) on CodePen.

If you like sliders, check out this form. The panel with additional login options slides into view when clicked upon.

Diagonally-cut search and login form

See the Pen Diagonally-cut Search and Login Form by Aleks (@achudars) on CodePen.

Here’s a smart two-in-one design concept. You get a sign-in button and a search field all in one tool. The fields are transparent while the background is very impressive.

Disabled

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

Применение атрибута disabled к элементу <fieldset> отключит все элементы управления формы внутри группы.

Elastic login form

See the Pen Elastic Login Form by Andrej Mlinarević (@andrejmlinarevic) on CodePen.

Elegant login form

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

Nothing extra in this one, just a stylish sign-in page design.

Fancy parallax login form

See the Pen Fancy Parallax Login Form by Derek Hill (@MrHill) on CodePen.

A very dynamic design that features changing neon backgrounds and a rotating Parallax panel.

Flat html5/css3 login form

See the Pen Flat HTML5/CSS3 Login Form by Aigars Silkalns (@colorlib) on CodePen.

Flat login form

See the Pen Flat Login Form by Andy Tran (@andytran) on CodePen.

This is a simple flat design form that features CSS3 animation. It is flexible and fit for less demanding web design projects.

Flat ui login form

See the Pen Flat UI Login Form by Brad Bodine (@bbodine1) on CodePen.

One more example of a CSS3 form made with flat design. It has several working tabs and a nice clickable button.

Flat ui login form – blue

See the Pen Flat UI Login Form – Blue by Benjamin Gagne (@benngagne) on CodePen.

This nice and simply coded form allows speedy registration in just a few seconds. It features a 3D button and dynamic fields.

Flickering login

See the Pen Flickering Login by Jeff Thomas (@aecend) on CodePen.

A glass-like design with glimmering animation to toggle when valid and invalid data is entered. This design will work best with a high-tech or corporate website.

Flipping login form

See the Pen Flipping login form by HollowMan (@HollowMan) on CodePen.

Here is another black minimalistic login form with a nice texture.

Form with social logins

See the Pen Form with social logins by Joe (@dope) on CodePen.

Check out this bright and tasty-looking form with social media options available on the additional panel that emerges when you press the “Oh, social?” link.

Hide/show password login form

See the Pen Hide/Show Password Login Form by Geoffrey Rose (@geoffreyrose) on CodePen.

This one is a hide and show sign-in form with a striking design.

Iron man login form

See the Pen Iron Man Login Form by Hugo DarbyBrown (@hugo) on CodePen.

A masterpiece! Here’s a dynamic animated form for WordPress. Get it and imagine yourself as Tony Stark launching a blog!

Log in form

See the Pen Log in form by Kamen Nedev (@nedev) on CodePen.

A unique dark transparent design with bright red elements. There are also sign-in, register, and password renewal panels.

Log in form css 2022

See the Pen Log In Form CSS 2022 by Omar Dsoky (@linux) on CodePen.

A very vanilla-looking design with simple animation.

Login form

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

Login form – jquery animate

See the Pen Login form – JQuery animate by MBheiry (@MBheiry) on CodePen.

A fresh-looking sign-in form that has all it takes: dynamic fields, toggles, social media options. This one is made using JQuery animation.

Login form – modal

See the Pen Login Form – Modal by Andy Tran (@andytran) on CodePen.

The invisible registration panel will appear when clicked on. Select the blue tab on the right and enter your registration details.

Login form & email client

See the Pen Login form & Email client by Hugo DarbyBrown (@hugo) on CodePen.

A very sleek and youthful login form with SVG elements and blurred background. Note the awesome typography!

Login form ( only css )

See the Pen Login Form ( Only CSS ) by sean_codes (@sean_codes) on CodePen.

This CSS-only sign-in form features sign-in and register option panels rendered in gradients with nice animation.

Login form 1

See the Pen Login Form 1 by Felix De Montis (@dervondenbergen) on CodePen.

I like this one for the color combination and bold types. This is an improved version from the PSD made by TemplateMonster! Check it out here.

Login form bootstrap

See the Pen Login form bootstrap by Aniuska Maita Aparicio (@aniusk18) on CodePen.

Login form build where eyes follow cursor

See the Pen Login form build where eyes follow cursor by Jesper Lauridsen (@justjspr) on CodePen.

In this form, the eyes of the character follow the cursor and her smile changes. The design features field highlighting and other interactive effects. Overall, it looks very cheerful. Check it out!

Login form css only validation

See the Pen Login Form CSS only validation by James Nowland (@jnowland) on CodePen.

A nice form with CSS3 validation, checkboxes, viewable password, and siblings selectors.

Login form ui design

See the Pen Login form UI Design by Chouaib Blgn (@elmanifico45) on CodePen.

The form features HTML, SASS, and Jquery elements. Check out the bright shapes and nice clickable buttons.

Login form using html5 and css3

See the Pen Login form using HTML5 and CSS3 by Brad Bodine (@bbodine1) on CodePen.

A great form with multiple page effects. There are pseudo-elements rotated with CSS3. With this theme, it’s easy to submit and validate data.

Login form: weather animation #april-weather

See the Pen Login Form: weather animation #april-weather by Claudia (@eyesight) on CodePen.

A simple design with changing colors, a cute button, and impressive dynamic transition to the “Forgot your password?” panel.

Login password mask

See the Pen Login Password Mask by Tyler Kelley (@TylerK) on CodePen.

Here you can choose to mask your password and see the new password field emerge.

Login template powered with boostrap

See the Pen Login Template powered with Boostrap by Robin Savemark (@robinsavemark) on CodePen.

This awesome dynamic form built on Bootstrap has a pop-up login panel and a rich background.

Login to everdwell

See the Pen Login to Everdwell by Kaushalya R. Mandaliya (@kman) on CodePen.

A massive and bright social media and email sign-in form will help you create an attractive and functional site.

Make sure it has labels indicating the point of each field

Without a label, no one will know what they are expected to do with a certain field and what kind of data they are supposed to enter. The fields look similar, and you don’t want your site visitors to be busy guessing where to do what. Add labels.

Market – login form

See the Pen Market – Login Form by Andy Tran (@andytran) on CodePen.

Material design login form

See the Pen Material Design Login Form by Josh Adamous (@joshadamous) on CodePen.

This neutral form will be a perfect fit for any web project. It has an awesome material design solution that comes absolutely free.

Material design login/signup form

See the Pen Material Design login/signup form by Davide Vico (@masterdave) on CodePen.

Material login

See the Pen Material Login by Vineeth.TR (@vineethtr) on CodePen.

A color-rich and beautiful example of material design used in login registration forms. The fields are nicely animated, and the panel features social media login options.

Material login form

See the Pen Material Login Form by Andy Tran (@andytran) on CodePen.

Morphing login form

See the Pen Morphing Login Form by The Legend (@the_leg3nd) on CodePen.

An uncomplicated form with simple animation. Still very nice!

Panda login

See the Pen Panda Login by Vineeth.TR (@vineethtr) on CodePen.

This big panda will watch your cursor as you move it on the page. The form is very interactive and makes you want to stay on the website and play with it for some time. It features pretty CSS transitions and very nice UI elements. Check them out!

Placeholder

Атрибут placeholder в HTML5 предлагает подсказку или совет внутри элемента <input> или <textarea>, которая исчезает при щелчке по элементу управления или при получении фокуса.

Pop up login form

See the Pen Pop Up Login Form by Afdallah Wahyu Arafat (@codot) on CodePen.

This one was created with Bootstrap Modal. A beautiful panel rendered in color gradients appears when you press the sign-in button.

Popup login & signup with jquery

See the Pen Popup Login & Signup with jQuery by Bijay Pakhrin (@monkeytempal) on CodePen.

Check out this beautiful pop-up form for social media or email login. Sign-up fields appear after you click on the right button.

Popup login form materialize css

See the Pen Popup login form materialize css by Web Zone (@skcals) on CodePen.

Press the Login button and see the panel materialize with CSS effects. A simple and nice design.

Pure css3 login form

See the Pen Pure CSS3 Login Form by Daniel Zawadzki (@danzawadzki) on CodePen.

This is a nice form with an icon and bright visuals. We are expecting a switch to the sign-up panel for this form soon.

Random login form

See the Pen Random Login Form by Lennart Hase (@motorlatitude) on CodePen.

This one was created when experimenting with sign-in registration forms. It works alright though, and is a unique choice. Check out the details!

React login form

See the Pen React Login form by Lakston (@Lakston) on CodePen.

A beautiful and simple login form rendered in deep blue hues.

Read also

30 Original Solutions for Your Site’s Contact Us Page

How To Create A Catchy Search Field With CSS?

Free Pricing Table Snippets in HTML & CSS

Free HTML & CSS Material Design Code Snippets

Ninjas of Web Development: 30 CSS Puns That’ll Crack You Up

Rectangular prism login form

See the Pen Rectangular Prism Login Form by Jon Kantner (@jkantner) on CodePen.

Required

Логический атрибут required в HTML5 утверждает, что элемент формы должен содержать значение при отправке на сервер. Если у элемента формы нет значения, будет отображаться сообщение об ошибке с просьбой пользователю заполнить обязательное поле.

В настоящее время стили сообщения об ошибке контролируются браузером и не могут быть оформлены в CSS. Некорректные элементы формы, с другой стороны, могут быть стилизованы с помощью псевдоклассов :optional и :required.

Проверка также специфична для конкретного типа элемента управления. Например, элемент <input> со значением email у атрибута type потребует не только чтобы значение в поле существовало, но также чтобы это был корректный адрес электронной почты.

Responsive login form

See the Pen Responsive Login Form by Omar Dsoky (@linux) on CodePen.

Look at this bright design inspired by the jungle. The form has two vertically placed panels with multiple sign-in options.

Responsive signup/login form

See the Pen Responsive Signup/Login form by Mohamed Hasan (@Mhmdhasan) on CodePen.

This is a big sign-in form with additional panels. It is responsive, so you will enjoy its UI on any screen.

Revised login form

See the Pen revised login form by Daljeet Dhaliwal (@daljeet) on CodePen.

One more Tony Stark masterpiece for your cartoon universe! It is very dynamic and impressive.

Sign up and login form

See the Pen Sign up and login form by Charlie Yang (@mrtial) on CodePen.

Check out this awesome form that features a slider. You can choose either sign-in or sign-up options and see the panels move to the side.

Sign-in and sign-up panels should be kept separate

Have you ever typed your email into a form only to find out that you are using the wrong one? It’s annoying. Make sure it’s crystal clear where the registration form is and where you can sign in with an existing account. It’s better not to show two registration forms at the same time to avoid confusion.

Sign-up/login form

See the Pen Sign-Up/Login Form by Eric (@ehermanson) on CodePen.

The author used tabs and moving form labels in this modern and minimalistic form. It is neutral, so the design will be a perfect fit for any kind of website.

Simple login form animated

See the Pen Simple Login Form Animated by Himanshu Chaudhary (@himanshu) on CodePen.

You can’t miss this rather simple form because of its awesome animated element. The fields are transparent, and you won’t be able to stop looking at the background abstract shape.

Simple login form template

See the Pen Simple Login Form Template by Brock Nunn (@banunn) on CodePen.

Nothing too special about this one; just a good, usable form for your new site.

Simple login form w/ social logins

See the Pen Simple Login Form w/ Social Logins by Chris M (@Lymelight) on CodePen.

A very adaptable form with multiple sign-in options.

Simple login widget

See the Pen Simple Login Widget by Alexander Eckhart (@lexeckhart) on CodePen.

A mobile-friendly login widget placed vertically enhanced with CSS3 effects and JQuery validation.

Sleek login form

See the Pen Sleek Login Form by emma (@boltaway) on CodePen.

What a beauty! This is a minimalistic yet very nice form with subtle lines on a stylish background.

Slide reveal login form

See the Pen Slide Reveal Login Form by Hugo DarbyBrown (@hugo) on CodePen.

This form will surprise you with an original slider – the sign-in fields appear under the front panel that opens up when hovered upon.

Slide to reveal password

See the Pen Slide to reveal password by Nicolas Slatiner (@slatiner) on CodePen.

An original sign-in concept where you can slide the toggle to reveal the password.

Snake highlight

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

This cutting-edge design features bright snake field highlights. This effect looks like neon lights. Check it out for yourself!

Split screen login form

See the Pen Split Screen Login Form by thelaazyguy (@thelaazyguy) on CodePen.

A nice split-screen design where a big sliding panel appears from the side of the front one. The form offers social media sign-in options.

Unfolding login form

See the Pen Unfolding Login Form by Hans Engebretsen (@hans) on CodePen.

Here’s a very original design with 3D elements when showing the password.

Wavy login form

See the Pen Wavy login form by Danijel Vincijanovic (@davinci) on CodePen.

This one offers beautiful vertical wave animation. Make sure you check it out!

What to look for in a good login form?

How can you tell that you’ve done a good job creating a login form?

Атрибуты формы и полей

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

Выпадающие списки

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

Для создания выпадающего списка мы будем применять элементы <select> и <option>. Элемент <select> оборачивает все пункты меню, а каждый пункт меню размечен с помощью элемента <option>.

Атрибут name располагается в элементе <select>, а атрибут value располагается в элементах <option>, вложенных в элемент <select>.

Каждый элемент <option> оборачивает текст (который виден пользователям) отдельного пункта в списке.

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

Делай два.

Едем дальше. Создадим стиль для кнопочки(Войти) поменяем цвет , шрифт и поправим заголовок(Вход)

.form_title { 
         text-align: center; # Текст по центру
         margin: 0 0 32px 0; # Внешний отступ на всех четырех сторонах элемента. 
         font-weight: normal;# Насыщенность шрифта, убираем жирность.
 }

Кнопочка :

.form_button {
         padding: 10px 20px;
         border: none; # Без границы блока.
         border-radius: 5px; # Радиус закругления
         font-family: sans-serif;
         letter-spacing: 1px;
         font-size: 16xp;
         color :#fff ; # Цвет текста
         background-color: #0071f0; # Цвет фона
         outline: none; #  Внешней границы элемента 
         cursor: pointer; # Тип курсора при наведение
         transition: 0.3s; #  transition позволяет делать плавные переходы между двумя значениями какого-либо CSS свойства
 }

Добавляем стили в HTML :

Демонстрация label

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

Демонстрация поля для файла

К сожалению, стилизация с помощью CSS элемента <input>, у которого значение атрибута type задано как file, является трудной задачей. Каждый браузер содержит свой собственный стиль поля по умолчанию и ни один не даёт много свободы, чтобы переопределить этот стиль. JavaScript и другие решения могут быть использованы для этого, но они несколько сложны для построения.

Демонстрация текстового поля

Элемент <input> является самостоятельным, то есть он задействует только один тег и не оборачивает какой-либо контент. Значение элемента обеспечивается его атрибутами и их соответствующими значениями.

Первоначально было только два текстовых значения атрибута type — text и password (для ввода паролей), однако HTML5 привёз с собой несколько новых значений атрибута type.

Эти значения были добавлены, чтобы обеспечить чёткое смысловое значение для полей ввода, а также предоставить лучшее управление пользователям. Если браузер не понимает одно из этих HTML5-значений атрибута type, он автоматически вернётся к значению text. Ниже приведён список новых типов HTML5.

  • color
  • date
  • datetime
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Следующие элементы <input> показывают некоторые из этих значений атрибута type из HTML5 в использовании, а на рисунках показано, как эти уникальные значения могут выглядеть в iOS. Обратите внимание, что различные значения обеспечивают разные элементы управления, все они делают сбор информации от пользователей проще.

Рис. 10.01. Элемент <input> со значением date у атрибута type для iOS7

Рис. 10.02. Элемент <input> со значением time у атрибута type для iOS7

Рис. 10.03. Элемент <input> со значением email у атрибута type для iOS7

Рис. 10.04. Элемент <input> со значением url у атрибута type для iOS7

Рис. 10.05. Элемент <input> со значением number у атрибута type для iOS7

Рис. 10.06. Элемент <input> со значением tel у атрибута type для iOS7

Добавление шрифтовых иконок

Добавим иконки в виде шрифтов, переходим на сервис
fontawesome.io и скачиваем их к себе на компьютер. Распакуем архив, копируем папку fonts, в которой находятся шрифты, и копируем файл стилей в директории css. Затем подключаем стили к страничке.

Дополнительные атрибуты

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

  • accept
  • autocomplete
  • autofocus
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • max
  • maxlength
  • min
  • pattern
  • readonly
  • selectionDirection
  • step

Другие поля

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

Инициализация формы

Чтобы добавить форму на страницу мы будем использовать элемент <form>. Данный элемент определяет, где на странице появятся элементы управления. Кроме того, элемент <form> обёртывает все элементы включенные в форму, подобно элементу <div>.

Каркас формы в html


Первым создаем каркас формы. Открываем заготовку html и пропишем следующий код между тегами.

Кнопка для отправки

Кнопка для отправки в виде элемента <input> является самодостаточной и не может оборачивать любой другой контент. Если хочется иметь больше контроля над структурой и дизайном поля, наряду с возможностью обернуть другие элементы — тогда может быть использован элемент <button>.

Элемент <button> выполняет то же самое, что и элемент <input> со значением submit у атрибута type. Однако, он включает в себя открывающий и закрывающий теги, которые могут обернуть другие элементы.

По умолчанию, элемент <button> действует, как если у атрибута type задано значение submit, поэтому атрибут type и его значение можно по желанию опустить.

Вместо использования атрибута value для управления текстом в кнопке для отправки, будет показан текст, который пишется между открывающим и закрывающим тегами элемента <button>.

Кнопки в форме

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

Множественный выбор

Логический атрибут multiple при добавлении к элементу <select> для стандартного выпадающего списка позволяет пользователю выбрать более одного варианта из списка одновременно. Кроме того, с помощью логического атрибута selected, добавленного к более чем одному элементу <option>, в меню можно заранее выбрать несколько вариантов.

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

На практике

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

Перепрыгнем к нашему файлу register.html и начнём, следуя тому же макету что мы использовали для страниц Спикеры и Место проведения. Он включает в себя добавление элемента <section> с классом row чуть ниже вступления и вложенный элемент <div> с классом grid непосредственно внутри элемента <section>.

Наш код чуть ниже вступления для страницы Регистрация должен выглядеть следующим образом:

Немного анимации, завершаем.

Начнем с кнопки , если она в фокусе или на нее нажимают меняем цвет бэкграунд:

.form_button:focus,
.form_button:hover{
         background-color: rgba(0, 113, 240, 0.7); RGBA Цвет фона и значение прозрачности. 
 }

Когда поле ввода в фокусе , поменяем цвет нижней границы:

Описываем в css элементы формы

Затем оформим данные элементы формы. Создадим дополнительную директорию CSS в которой будем размещать файлы стилей. В ней создаем файл style.css и подключаем его к нашей страничке.

Организация элементов формы

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

С помощью <label>, <fieldset> и <legend> мы можем лучше организовать формы и направлять пользователей правильно их завершать.

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

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

Чтобы создать переключатель, используется элемент <input> со значением radio у атрибута type. Каждый переключатель должен иметь одинаковое значение атрибута name, чтобы все они в группе были связаны друг с другом.

С текстовыми полями их значение определяется тем, что пользователь в них набирает; с переключателями пользователь делает множественный выбор. Таким образом, мы должны определить входное значение. Используя атрибут value мы можем установить конкретное значение для каждого элемента <input>.

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

Поле для отправки

Когда пользователь щёлкает по кнопке, данные формы обрабатываются после её заполнения. Кнопка для отправки создаётся с помощью элемента <input> со значением submit у атрибута type. Атрибут value применяется для указания текста, который отображается внутри кнопки.

Поле для файла

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

Поля ввода, подсказки.

Дальше на очереди поля в вода. Если вы обратили внимание каждое поле находиться в своем блоке <div> . Задаем стиль для блоков :

Поля множественного выбора и меню

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

Пример формы для входа

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

HTML

Резюме

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

Напомним быстро, что мы обсудили в этом уроке:

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

Наше понимание HTML и CSS продвигается достаточно хорошо и у нас остался только один компонент для изучения: таблицы. В следующей главе мы рассмотрим как организовать и представить данные в таблицах.

Скрытое поле

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

Чтобы создать скрытое поле используйте значение hidden атрибута type. Дополнительно включает в себя соответствующие значения атрибутов name и value.

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

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

Наряду с установкой атрибута type, хорошей практикой будет также дать элементу <input> атрибут name. Значение атрибута name применяется в качестве имени элемента управления и отправляется вместе с входными данными на сервер.

Текстовые поля и текстовые области

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

Флажки

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

<legend>

Элемент <legend> предоставляет подпись или заголовок для элемента <fieldset>. Элемент <legend> оборачивает текст, описывающий элементы управления формы, которые находятся внутри <fieldset>.

Разметка должна включать в себя элемент <legend> сразу после открывающего тега <fieldset>. На странице подпись появится в левом верхнем углу рамки <fieldset>.

Похожее:  Mastering Session Authentication. A complete walkthrough on how to build… | by Christian Cashiola | ITNEXT

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

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

➤