Оформление css формы: Стилизуем формы при помощи CSS: руководство для начинающих

Содержание

Стили HTML форм — Изучение веб-разработки

В этой статье Вы узнает, как использовать CSS с HTML-формами, чтобы сделать их (надеюсь) более красивыми. Удивительно, но это может быть немного сложнее. По историческим и техническим причинам виджеты форм плохо сочетаются с CSS. Из-за этих трудностей многие разработчики предпочитают создавать свои собственные HTML-виджеты, чтобы получить контроль над своим внешним видом. Однако в современных браузерах веб-дизайнеры все больше контролируют дизайн элементов формы. Давайте приступим!

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

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

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

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

Не все виджеты созданы равными, когда задействован CSS

В настоящее время некоторые трудности остаются при использовании CSS с формами. Эти проблемы можно разделить на три категории:

Хорошая

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

<form>
<fieldset>
<label>
<output>

Сюда также входят все виджеты текстового поля (как однострочные, так и многострочные) и кнопки.

Плохая

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

Они включают в себя элемент <legend>, но его нельзя правильно расположить на всех платформах. Флажки и переключатели также не могут быть стилизованы напрямую, однако, благодаря CSS3 вы можете обойти это. Контент placeholder не может быть стилизован каким-либо стандартным способом, однако все браузеры, которые его реализуют, также реализуют собственные псевдо-элементы CSS или псевдоклассы, которые позволяют его стилизовать.

Мы опишем, как обрабатывать эти более конкретные случаи, в статье «Расширенные стили для HTML-форм».

The ugly

Some elements simply can’t be styled using CSS. These include: all advanced user interface widgets, such as range, color, or date controls; and all the dropdown widgets, including <select>, <option>, <optgroup> and <datalist> elements. The file picker widget is also known not to be stylable at all. The new <progress> and <meter> elements also fall in this category.

The main issue with all these widgets, comes from the fact that they have a very complex structure, and CSS is not currently expressive enough to style all the subtle parts of those widgets. If you want to customize those widgets, you have to rely on JavaScript to build a DOM tree you’ll be able to style. We explore how to do this in the article How to build custom form widgets.

To style elements that are easy to style with CSS, you shouldn’t face any difficulties, since they mostly behave like any other HTML element. However, the user-agent style sheet of every browser can be a little inconsistent, so there are a few tricks that can help you style them in an easier way.

Search fields

Search boxes are the only kind of text fields that can be a little tricky to style. On WebKit based browsers (Chrome, Safari, etc.), you’ll have to tweak it with the -webkit-appearance proprietary property. We discuss this property further in the article: Advanced styling for HTML forms.

Example

<form>
  <input type="search">
</form>

input[type=search] {
  border: 1px dotted #999;
  border-radius: 0;

  -webkit-appearance: none;
}

As you can see on this screenshot of the search field on Chrome, the two fields have a border set as in our example. The first field is rendered without using the -webkit-appearance property, whereas the second is rendered using -webkit-appearance:none. This difference is noticeable.

Fonts and text

CSS font and text features can be used easily with any widget (and yes, you can use @font-face with form widgets). However, browsers’ behaviors are often inconsistent. By default, some widgets do not inherit font-family and font-size from their parents. Many browsers use the system default appearance instead. To make your forms’ appearance consistent with the rest of your content, you can add the following rules to your stylesheet:

button, input, select, textarea {
  font-family : inherit;
  font-size   : 100%;
}

The screenshot below shows the difference; on the left is the default rendering of the element in Firefox on Mac OS X, with the platform’s default font style in use. On the right are the same elements, with our font harmonization style rules applied.

There’s a lot of debate as to whether forms look better using the system default styles, or customized styles designed to match your content. This decision is yours to make, as the designer of your site, or Web application.

Box model

All text fields have complete support for every property related to the CSS box model (width, height, padding, margin, and border). As before, however, browsers rely on the system default styles when displaying these widgets. It’s up to you to define how you wish to blend them into your content. If you want to keep the native look and feel of the widgets, you’ll face a little difficulty if you want to give them a consistent size.

This is because each widget has their own rules for border, padding and margin. So if you want to give the same size to several different widgets, you have to use the box-sizing property:

input, textarea, select, button {
  width : 150px;
  margin: 0;

  -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
          box-sizing: border-box;
}

In the screenshot above, the left column is built without box-sizing, while the right column uses this property with the value border-box. Notice how this lets us ensure that all of the elements occupy the same amount of space, despite the platform’s default rules for each kind of widget.

Positioning

Positioning of HTML form widgets is generally not a problem; however, there are two elements you should take special note of:

legend

The <legend> element is okay to style, except for positioning. In every browser, the <legend> element is positioned on top of the top border of its <fieldset> parent. There is absolutely no way to change it to be positioned within the HTML flow, away from the top border. You can, however, position it absolutely or relatively, using the position property. But otherwise it is part of the fieldset border.

Because the <legend> element is very important for accessibility reasons, it will be spoken by assistive technologies as part of the label of each form element inside the fieldset, it’s quite often paired with a title, and then hidden in an accessible way. For example:

HTML

<fieldset>
  <legend>Hi!</legend>
  <h2>Hello</h2>
</fieldset>

CSS

legend {
  width: 1px;
  height: 1px;
  overflow: hidden;
}

textarea

By default, all browsers consider the <textarea> (en-US) element to be an inline block, aligned to the text bottom line. This is rarely what we actually want to see. To change from inline-block to block, it’s pretty easy to use the display property. But if you want to use it inline, it’s common to change the vertical alignment:

textarea {
  vertical-align: top;
}

Let’s look at a concrete example of how to style an HTML form. This will help make a lot of these ideas clearer. We will build the following «postcard» contact form:

If you want to follow along with this example, make a local copy of our postcard-start.html file, and follow the below instructions.

The HTML

The HTML is only slightly more involved than the example we used in the first article of this guide; it just has a few extra IDs and a title.

<form>
  <h2>to: Mozilla</h2>

  <div>
    <label for="name">from:</label>
    <input type="text" name="user_name">
  </div>

  <div>
    <label for="mail">reply:</label>
    <input type="email" name="user_email">
  </div>

  <div>
    <label for="msg">Your message:</label>
    <textarea name="user_message"></textarea>
  </div>

  <div>
    <button type="submit">Send your message</button>
  </div>
</form>

Add the above code into the body of your HTML.

Organizing your assets

This is where the fun begins! Before we start coding, we need three additional assets:

The postcard background — download this image and save it in the same directory as your working HTML file.
A typewriter font: The «Secret Typewriter» font from fontsquirrel.com — download the TTF file into the same directory as above.
A handdrawn font: The «Journal» font from fontsquirrel.com — download the TTF file into the same directory as above.

Your fonts need some more processing before you start:

Go to the fontsquirrel Webfont Generator.
Using the form, upload both your font files and generate a webfont kit. Download the kit to your computer.
Unzip the provided zip file.
Inside the unzipped contents you will find two .woff files and two .woff2 files. Copy these four files into a directory called fonts, in the same directory as before. We are using two different files for each font to maximise browser compatibility; see our Web fonts article for a lot more information.

The CSS

Now we can dig into the CSS for the example. Add all the code blocks shown below inside the <style> element, one after another.

First, we prepare the ground by defining our @font-face rules, all the basics on the <body> element, and the <form> element:

@font-face {
    font-family: 'handwriting';
    src: url('fonts/journal-webfont.woff2') format('woff2'),
         url('fonts/journal-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'typewriter';
    src: url('fonts/veteran_typewriter-webfont.woff2') format('woff2'),
         url('fonts/veteran_typewriter-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
  font  : 21px sans-serif;

  padding : 2em;
  margin  : 0;

  background : #222;
}

form {
  position: relative;

  width  : 740px;
  height : 498px;
  margin : 0 auto;

  background: #FFF url(background.jpg);
}

Now we can position our elements, including the title and all the form elements:

h2 {
  position : absolute;
  left : 415px;
  top  : 185px;

  font : 1em "typewriter", sans-serif;
}

#from {
  position: absolute;
  left : 398px;
  top  : 235px;
}

#reply {
  position: absolute;
  left : 390px;
  top  : 285px;
}

#message {
  position: absolute;
  left : 20px;
  top  : 70px;
}

That’s where we start working on the form elements themselves. First, let’s ensure that the <label>s are given the right font:

label {
  font : .8em "typewriter", sans-serif;
}

The text fields require some common rules. Simply put, we remove their borders and backgrounds, and redefine their padding and margin:

input, textarea {
  font    : .9em/1.5em "handwriting", sans-serif;

  border  : none;
  padding : 0 10px;
  margin  : 0;
  width   : 240px;

  background: none;
}

When one of these fields gains focus, we highlight them with a light grey, transparent, background. Note that it’s important to add the outline (en-US) property, in order to remove the default focus highlight added by some browsers:

input:focus, textarea:focus {
  background   : rgba(0,0,0,.1);
  border-radius: 5px;
  outline      : none;
}

Now that our text fields are complete, we need to adjust the display of the single and multiple line text fields to match, since they won’t typically look the same using the defaults.

The single-line text field needs some tweaks to render nicely in Internet Explorer. Internet Explorer does not define the height of the fields based on the natural height of the font (which is the behavior of all other browsers). To fix this, we need to add an explicit height to the field, as follows:

input {
    height: 2.5em; 
    vertical-align: middle; 
}

<textarea> (en-US) elements default to being rendered as a block element. The two important things here are the resize (en-US) and overflow properties. Because our design is a fixed-size design, we will use the resize property to prevent users from resizing our multi-line text field. The overflow property is used to make the field render more consistently across browsers. Some browsers default to the value auto, while some default to the value scroll. In our case, it’s better to be sure every one will use auto:

textarea {
  display : block;

  padding : 10px;
  margin  : 10px 0 0 -10px;
  width   : 340px;
  height  : 360px;

  resize  : none;
  overflow: auto;
}

The <button> element is really convenient with CSS; you can do whatever you want, even using pseudo-elements:

button {
  position     : absolute;
  left         : 440px;
  top          : 360px;

  padding      : 5px;

  font         : bold .6em sans-serif;
  border       : 2px solid #333;
  border-radius: 5px;
  background   : none;

  cursor       : pointer;

-webkit-transform: rotate(-1.5deg);
   -moz-transform: rotate(-1.5deg);
    -ms-transform: rotate(-1.5deg);
     -o-transform: rotate(-1.5deg);
        transform: rotate(-1.5deg);
}

button:after {
  content: " >>>";
}

button:hover,
button:focus {
  outline   : none;
  background: #000;
  color   : #FFF;
}

And voila!

Note: If your example does not work quite like you expected and you want to check it against our version, you can find it on GitHub — see it running live (also see the source code).

As you can see, as long as we want to build forms with just text fields and buttons, it’s easy to style them using CSS. If you want to know more of the little CSS tricks that can make your life easier when working with form widgets, take a look at the form part of the normalize.css project.

In the next article, we will see how to handle form widgets which fall in the «bad» and «ugly» categories.

Обзор форм HTML5 : CSS

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

Продолжение: Разметка форм в HTML5 (первая статья)
Продолжение: Формы HTML5: Java Script и проверка с Constraint Validation API (третья статья)

Отмена стилевого оформления по умолчанию

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

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

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    textarea {
      -webkit-appearance: none;
      -moz-appearance: none;
      -ms-appearance: none;
      appearance: none;
      outline: 0;
      box-shadow: none;
    }

Обратите внимание, что я также отменил значения свойств outline и box-shadow, чтобы убрать неуместную голубую тень вокруг выбранного элемента и неправильное оформление стилей во всех браузерах.

Значения свойства appearance записаны на CSS-Tricks, но они постоянно меняются.

:focus

Псевдокласс :focus поддерживается еще со времени CSS2.1 и устанавливает стилевое оформление выбранного элемента, например:

    input:focus,
    textarea:focus,
    select:focus {
      background-color: #eef;
    }

:checked

Стилевое оформление :checked используется для отмеченных флажков и переключателей, например:

    <input type="checkbox" name="test" />
    <label for="test">check me</label>

    input:checked ~ label {
        font-weight: bold;
    }

Соответствующего псевдокласса ‘unchecked’ нет, но в нем и нет необходимости: просто создайте стилевое оформление по умолчанию, а потом примените изменения, когда будет активирован селектор :checked. Как альтернативный вариант вы можете использовать значение :not ( :checked).

:indeterminate

В техническом отношении псевдокласса :indeterminate еще нет в спецификации, хотя он там и упоминается. В соответствии со спецификацией, он представляет флажки или переключатели, которые «и отмечены, и не отмечены».

Его необычность заключается в том, что он применяет стилевое оформление только тогда, когда вы определяете свойство .indeterminate для флажка через JavaScript, т.е.

    document.getElementById("mycheckbox").indeterminate = true;

Он не работает со свойством .checked, поскольку оно может иметь только значения true или false.

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

:required

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

:optional

Класс :optional устанавливает стили для любого поля ввода, которое не обладает атрибутом required. Не совсем понятно, зачем он добавлен, поскольку при использовании класса :not (:required) можно получить тот же результат.

:valid

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

:invalid

Если провести аналогию, :invalid (или :not (:valid)) устанавливает стили для любого вводимого значения, которое содержит недопустимые данные. Например:

    input:invalid {
        border-color: #900;
    }

In-range (ввод чисел и определение диапазона)

Числа и диапазоны чисел, содержащие действительное значение, входящее в диапазон, установленный атрибутами min и max, и подходящее к значению step, могут быть установлены с помощью класса :in-range. Конечно, вряд ли слайдер будет иметь значение вне диапазона, но все-таки..

:out-of-range (ввод чисел и определение диапазона)

Класс :out-of-range устанавливает недопустимые числовые значения для диапазона вводимых значений.

:disabled

Вводимые значения, имеющие атрибут disabled, могут быть определены с помощью псевдокласса disabled, например:

    input:disabled {
        color: #ccc;
        background-color: #eee;
    }

Помните, что заблокированные поля не могут быть проверены, а их содержимое не может быть отправлено на сервер. Тем не менее, стили для таких псевдоклассов, как :required или :invalid, будут применяться в любом случае.

:enabled

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

:read-only

Вводимые значении с атрибутом read-only могут быть установлены с помощью псевдокласса :read-only. Имейте в виду, что вводимые значения, которые предназначены только для чтения, в любом случае будут проверены и отправлены на сервер, но у пользователя нет полномочий изменить их.

:read-write

Типичные поля, которые можно редактировать, могут быть установлены с помощью псевдокласса :read-write (или :not ( :read-only)). Данный селектор вам также часто не понадобится.

:default (только для кнопок отправки запроса или полей ввода)

И, самый последний – это селектор :default, который изменяет стиль кнопки отправки запроса, установленный по умолчанию.

Стилевое оформление текста, вводимого в поле заполнения

Текст атрибута placeholder может быть стилизован при помощи псевдоэлемента :placeholder с вендорными префиксами (в специальных правилах), например:

    input::-webkit-input-placeholder { color: #ccc; }
    input::-moz-placeholder { color: #ccc; }
    input:-ms-input-placeholder { color: #ccc; }
    input::placeholder { color: #ccc; }

Особенности применения CSS

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

    input:invalid { color: red; }
    input:enabled { color: black; }

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

Лучше применять простые селекторы и минимальные коды. Например, поле :required с пустым значением будет :invalid (недействительным), поэтому практически никогда не приходится задавать стили для первого класса селекторов.

Всплывающее окно проверки правильности

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

Дизайн всплывающего окна будет разным, это зависит как от устройства, так и от браузера. Браузеры Webkit/Blink – единственные, которые позволяют изменять стили не по стандартам CSS:

    ::-webkit-validation-bubble { ... }
    ::-webkit-validation-bubble-arrow { ... }
    ::-webkit-validation-bubble-message { ... }
    ::-webkit-validation-bubble-arrow-clipper { ... }

Я не советую вам даже пытаться. Если вы хотите персонализированное форматирование ошибок, вам практически наверняка придется использовать и собственные сообщения. Это можно сделать только с Java Script.

Поддержка браузерами

Обычно наиболее значимые стили и селекторы доступны во всех современных браузерах с IE10+. Некоторые из наименее полезных селекторов, такие как in-range, пока доступны только в Webkit/Blink. Более ранние браузеры будут поддерживать селектор :focus, но для более сложных задач вам снова придется использовать JavaScript.

Создание удобных форм

Рассмотренные выше применяются сразу же. Например:

    input:invalid {
        border-color: #900;
    }

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

Что касается меня, то я предпочитаю, чтобы ошибки появлялись после отправки запроса или после перехода с поля, которое имеет недействительное значение. Браузеры не позволяют этого сделать стандартными инструментами. Как вы уже скорее всего догадались – здесь снова понадобится JavaScript. К нашей радости, API проверка ограничений валидации в HTML5 предоставляет набор инструментов для:

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

Поля ввода input в стиле Google Material Design на CSS3

Создание полей input в стиле Google Material Design на чистом CSS3

1. HTML-разметка

HTML будет довольно простым. Нам потребуется стандартная форма с двумя input-полями. Вот она:

<form>
   <div>      
      <input type="text" required>
      <span></span>
      <label>Имя</label>
   </div>
   <div>      
      <input type="text" required>
      <span></span>
      <label>Email</label>
   </div>
</form>

Тут у нас три компонента, которые нам нужны.

input Будет служить в качестве входных данных.
bar Проведет два бара, которые составляют подчеркивание.
label Будет выступать в качестве placeholder, пока мы не нажмете на input. После чего он сместится вверх.

С HTML разобрались, переходим к CSS.

2. Анимирование input’ов

Все CSS-стили разделим на три составные части, это: starting stylings(дефолтные стили нашей формы) label/placeholder и underline.
Начнем, конечно с дефолтных стилей:

/* form starting stylings ------------------------------- */
.group {
  position: relative;
  margin-bottom: 30px;
}

input {
  font-size: 16px;
  padding: 10px;
  display: block;
  width: 300px;
  border: none;
  border-bottom: 1px solid #ccc;
}
input:focus {
  outline: none;
}

Здесь мы просто разместили наши поля ввода формы. Также устанавливаем group позиционирование position:relative; для того, чтобы в дальнейшем иметь возможность размещать прочие элементы относительно этого.

Теперь переходим к стилизации прочих элементов нашей формы:

/* LABEL ======================================= */
label {
  color: #999;
  font-size: 18px;
  position: absolute;
  pointer-events: none;
  left: 10px;
  top: 15px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

/* active state */
input:focus ~ label, input:valid ~ label {
  top: -15px;
  font-size: 14px;
  color: #5264AE;
}


/* BOTTOM BARS ================================= */
.bar {
  position: relative;
  display: block;
  width: 320px;
}
.bar:before, .bar:after {
  content: "";
  height: 2px;
  width: 0;
  bottom: 0;
  position: absolute;
  background: #5264AE;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}
.bar:before {
  left: 50%;
}
.bar:after {
  right: 50%;
}

/* active state */
input:focus ~ .bar:before,
input:focus ~ .bar:after {
  width: 50%;
}

На этом все. Работа завершена, и теперь у нас есть поле ввода, похожее на поля ввода Google Material Design.

3. Результат работы

See the Pen Google Material Design (input) by Migo Userlife (@migo_userlife) on CodePen.

Как создать форму оформления заказа

На сайте нет рекламы

Узнать, как создать отзывчивую форму оформления заказа с помощью CSS.

Форма оформления заказа

Редактор кода »

Создать форму оформления заказа

Шаг 1) Добавить HTML

Использовать элемент <form> для обработки входных данных. Вы можете узнать больше об этом в нашем учебнике PHP.

Пример

        <div>
          <div>
            <h4>Платежный адрес</h4>
            <label for=»fname»><i></i>Имя</label>
            <input type=»text» name=»firstname» placeholder=»Щипунов Андрей Леонидович»>
            <label for=»email»><i></i> Email</label>
            <input type=»text» name=»email» placeholder=»[email protected]»>
            <label for=»adr»><i></i>Адрес</label>
            <input type=»text» name=»address» placeholder=»Томская 44-39″>
            <label for=»city»><i></i>Город</label>
            <input type=»text» name=»city» placeholder=»Пермь»>

            <div>
              <div>
                <label for=»state»>Государство</label>
                <input type=»text» name=»state» placeholder=»Россия»>
              </div>
              <div>
                <label for=»zip»>Zip</label>
                <input type=»text» name=»zip» placeholder=»10001″>
              </div>
            </div>
          </div>

          <div>
            <h4>Платеж</h4>
            <label for=»fname»>Допустимые карты</label>
            <div>
              <i></i>
              <i></i>
              <i></i>
              <i></i>
            </div>
            <label for=»cname»>Имя на карте</label>
            <input type=»text» name=»cardname» placeholder=»Щипунов Андрей Леонидович»>
            <label for=»ccnum»>Номер кредитной карты</label>
            <input type=»text» name=»cardnumber» placeholder=»1111-2222-3333-4444″>
            <label for=»expmonth»>Годен месяц</label>
            <input type=»text» name=»expmonth» placeholder=»Сентябрь»>

            <div>
              <div>
                <label for=»expyear»>Годен год</label>
                <input type=»text» name=»expyear» placeholder=»2021″>
              </div>
              <div>
                <label for=»cvv»>CVV</label>
                <input type=»text» name=»cvv» placeholder=»352″>
              </div>
            </div>
          </div>

        </div>
        <label>
          <input type=»checkbox» checked=»checked» name=»sameadr»> Адрес дставки совпадает с платежным адресом
        </label>
        <input type=»submit» value=»Продолжить оформление заказа»>
      </form>
    </div>
</div>

<div>
    <div>
      <h5>Корзина
        <span>
          <i></i>
          <b>4</b>
        </span>
      </h5>
      <p><a href=»#»>Элемент 1</a> <span>$15</span></p>
      <p><a href=»#»>Элемент 2</a> <span>$5</span></p>
      <p><a href=»#»>Элемент 3</a> <span>$8</span></p>
      <p><a href=»#»>Элемент 4</a> <span>$2</span></p>
      <hr>
      <p>Всего <span><b>$30</b></span></p>
    </div>
</div>
</div>

Шаг 2) Добавить CSS:

Используйте CSS Флексбокс для создания адаптивного макета:

Пример

.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
margin: 0 -16px;
}

.col-25 {
-ms-flex: 25%; /* IE10 */
flex: 25%;
}

.col-50 {
-ms-flex: 50%; /* IE10 */
flex: 50%;
}

.col-75 {
-ms-flex: 75%; /* IE10 */
flex: 75%;
}

.col-25,
.col-50,
.col-75 {
padding: 0 16px;
}

.container {
background-color: #f2f2f2;
padding: 5px 20px 15px 20px;
border: 1px solid lightgrey;
border-radius: 3px;
}

input[type=text] {
width: 100%;
margin-bottom: 20px;
padding: 12px;
border: 1px solid #ccc;
border-radius: 3px;
}

label {
margin-bottom: 10px;
display: block;
}

.icon-container {
margin-bottom: 20px;
padding: 7px 0;
font-size: 24px;
}

.btn {
background-color: #4CAF50;
color: white;
padding: 12px;
margin: 10px 0;
border: none;
width: 100%;
border-radius: 3px;
cursor: pointer;
font-size: 17px;
}

.btn:hover {
background-color: #45a049;
}

span.price {
float: right;
color: grey;
}

/* Адаптивный макет — когда экран меньше 800 пикселей в ширину, сделайте два столбца стеком друг на друга, а не рядом друг с другом (и измените направление-сделайте столбец «корзина» сверху) */
@media (max-width: 800px) {
.row {
flex-direction: column-reverse;
}
.col-25 {
margin-bottom: 20px;
}
}

Редактор кода »

Совет: Зайдите на наш учебник HTML Форма, чтобы узнать больше о формах HTML.

Совет: Зайдите на наш учебник CSS Форма, чтобы узнать больше о том, как стилизовать элементы формы.

Совет: Зайдите на наш учебник CSS Флексбокс чтобы узнать больше о гибком модуле компоновки коробки.

Использование CSS стилей для формы оплаты — Возможности PayKeeper

PayKeeper позволяет использовать настраиваемую форму оплаты. Это может понадобиться, если

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

С помощью CSS стилей форме можно придать любое необходимое оформление.

Ниже, представлены несколько примеров форм.

.input_type {
padding:8px;
border:1px solid #ccc;
display:block;
border-bottom:1px solid #ccc;
width:25%
}
.sub_btn {
background-color: #f44336;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
display: inline-block;
font-size: 16px;
}

.input_type {

padding:8px;

border:1px solid #ccc;

display:block;

border-bottom:1px solid #ccc;

width:25%

}

.sub_btn {

background-color: #f44336;

border: none;

color: white;

padding: 15px 32px;

text-align: center;

display: inline-block;

font-size: 16px;

}

Непосредственно сама форма:

<form method=’POST’ action=’https://demo.paykeeper.ru/create’ >
Фамилия Имя: <input type=’text’ name=’clientid’ value=»/> <br />
Введите номер заказа: <input type=’text’ name=’orderid’ placeholder=’Оставьте сообщение здесь’/> <br />
Телефон: <input type=’text’ name=’client_phone’ value=»/> <br />
Электронный адрес: <input type=’text’ name=’client_email’ placeholder=’[email protected]’ value=»/> <br />
Введите сумму оплаты: <input type=’text’ name=’sum’ value=’1’/> <br />
<input type=’submit’ value=’Перейти к оплате’ />
</form>

Фамилия Имя: <input type=’text’ name=’clientid’ value=»/> <br />

Введите номер заказа: <input type=’text’ name=’orderid’ placeholder=’Оставьте сообщение здесь’/> <br />

Телефон: <input type=’text’ name=’client_phone’ value=»/> <br />

Электронный адрес: <input type=’text’ name=’client_email’ placeholder=’[email protected]’ value=»/> <br />

Введите сумму оплаты: <input type=’text’ name=’sum’ value=’1’/> <br />

</form>

Другой пример верстки выполненный с помощью фреймворка Bootstrap.

Подключаем фреймворк через CDN:

integrity=»sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO» crossorigin=»anonymous»>

integrity=»sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh3IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy» crossorigin=»anonymous»></script>

<form method=’POST’ action=’https://demo.paykeeper.ru/create’ >
<div>
Введите номер заказа: <input type=’text’ name=’orderid’ placeholder=’Оставьте сообщение здесь’/> <br />
</div>
<div>
Укажите электронный адрес:
<input type=»email» name=’client_email’ placeholder=’[email protected]’ value=»/> <br />
</div>
<div>
Выберите сумму оплаты:
<select name=’sum’>
<option>100</option>
<option>200</option>
<option>300</option>
</select>
</div><br />
<input type=’submit’ value=’Перейти к оплате’ />

</form>

<div>

Введите номер заказа: <input type=’text’ name=’orderid’ placeholder=’Оставьте сообщение здесь’/> <br />

</div>

<div>

Укажите электронный адрес:

</div>

<div>

Выберите сумму оплаты:

</select>

</div><br />

</form>

Примеры форм авторизации

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

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

Необходимо отметить несколько вещей, прежде чем начать:

В статье пропущены префиксы CSS-кода, но вы, конечно, можете найти их в исходных файлах.

Целью урока является показать потенциал CSS, в частности, CSS3, поэтому внешний вид форм может быть отличаться в браузерах младше IE8-. Если вы планируете поддерживать эти браузеры, не забудьте сделать fallback.

Я не использовал атрибуты для тега формы, такие как action, method, так как я сделал основной акцент на дизайне.

Лично я использую бокс-модель, где [width] = [element-width] + [padding] + [borders]. Я активировал её следующим кодом:

*,
*:after,
*:before {
box-sizing: border-box;
}

Теперь давайте перейдем непосредственно к созданию форм!

Пример 1

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

Разметка

Итак, наш первый пример довольно прост, мы не будем использовать какие-либо лэйблы. Но нам нужно указать нашему пользователю, что они должны написать в этих полях, поэтому мы используем … иконки. Для этого используем тег <i/>.

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

Теперь у нас есть два контейнера, которые содержат текстовое поле и иконку. Кнопка Submit имеет собственный контейнер, мы используем тег <button/> вместо <input/> с иконой внутри.

Мы также будем использовать placeholder, чтобы назначение полей стало еще более ясным для всех кто использует современные браузеры. Более подробную информацию о поддержке браузерами атрибута placeholder можно найти на CanIUse.com.

CSS

Мы начнем с определения некоторых стилей для элемента form. Форма является основной оболочкой для нашего примера, поэтому мы зададим ей ширину и расположим в центре при помощи свойства margin.

.form-1 {
/* Размер и положение */
width: 300px;
margin: 60px auto 30px;
padding: 10px;
position: relative; /* For the submit button positioning */

/* Styles */
box-shadow:
0 0 1px rgba(0, 0, 0, 0.3),
0 3px 7px rgba(0, 0, 0, 0.3),
inset 0 1px rgba(255,255,255,1),
inset 0 -3px 2px rgba(0,0,0,0.25);
border-radius: 5px;
background: linear-gradient(#eeefef, #ffffff 10%);
}

.form-1 .field {
position: relative; /* For the icon positioning */
}

Важно: мы задали для формы position:relative, чтобы иметь возможность разместить кнопку Submit с абсолютным позиционированием. Мы делаем то же самое для контейнеров с классом .field, чтобы также поместить с абсолютным позиционированием иконки.
Теперь зададим стили для значков.

.form-1 .field i {
/* Size and position */
left: 0px;
top: 0px;
position: absolute;
height: 36px;
width: 36px;

/* Line */
border-right: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.7);

/* Styles */
color: #777777;
text-align: center;
line-height: 42px;
transition: all 0.3s ease-out;
pointer-events: none;
}

Мы добавим тонкие линии по правой стороне иконки, установим правую границу и тень.

Теперь нам нужно задать некоторые стили для текстовых полей:

.form-1 input[type=text],
.form-1 input[type=password] {
font-family: ‘Lato’, Calibri, Arial, sans-serif;
font-size: 13px;
font-weight: 400;
text-shadow: 0 1px 0 rgba(255,255,255,0.8);

/* Size and position */
width: 100%;
padding: 10px 18px 10px 45px;

/* Styles */
border: none; /* Remove the default border */
box-shadow:
inset 0 0 5px rgba(0,0,0,0.1),
inset 0 3px 2px rgba(0,0,0,0.1);
border-radius: 3px;
background: #f9f9f9;
color: #777;
transition: color 0.3s ease-out;
}

.form-1 input[type=text] {
margin-bottom: 10px;
}

Прежде чем идти дальше, не забудем определить стили для состояний :hover и :focus.

.form-1 input[type=text]:hover ~ i,
.form-1 input[type=password]:hover ~ i {
color: #52cfeb;
}

.form-1 input[type=text]:focus ~ i,
.form-1 input[type=password]:focus ~ i {
color: #42A2BC;
}

.form-1 input[type=text]:focus,
.form-1 input[type=password]:focus,
.form-1 button[type=submit]:focus {
outline: none;
}

Обратим внимание на следующие вещи: мы используем родственный селектор (~), чтобы изменить цвет иконки при работе с полями: светло-синий при наведении мыши, темно-синий при активном поле. И мы также удаляем контур для Chrome.

Последнее, что мы должны сделать — это кнопку «Отправить».

.form-1 .submit {
/* Size and position */
width: 65px;
height: 65px;
position: absolute;
top: 17px;
right: -25px;
padding: 10px;
z-index: 2;

/* Styles */
background: #ffffff;
border-radius: 50%;
box-shadow:
0 0 2px rgba(0,0,0,0.1),
0 3px 2px rgba(0,0,0,0.1),
inset 0 -3px 2px rgba(0,0,0,0.2);
}

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

.form-1 .submit:after {
/* Size and position */
content: «»;
width: 10px;
height: 10px;
position: absolute;
top: -2px;
left: 30px;

/* Styles */
background: #ffffff;

/* Other masks trick */
box-shadow: 0 62px white, -32px 31px white;
}

Последнее, но не менее важное, наша фактическая кнопка отправки:

.form-1 button {
/* Size and position */
width: 100%;
height: 100%;
margin-top: -1px;

/* Icon styles */
font-size: 1.4em;
line-height: 1.75;
color: white;

/* Styles */
border: none; /* Remove the default border */
border-radius: inherit;
background: linear-gradient(#52cfeb, #42A2BC);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
0 1px 2px rgba(0,0,0,0.35),
inset 0 3px 2px rgba(255,255,255,0.2),
inset 0 -3px 2px rgba(0,0,0,0.1);

cursor: pointer;
}

И, наконец, стили для наведения, фокуса (например, при переходе по клавиши табуляции) и активного (нажатого) состояния кнопки:

.form-1 button:hover,
.form-1 button[type=submit]:focus {
background: #52cfeb;
transition: all 0.3s ease-out;
}

.form-1 button:active {
background: #42A2BC;
box-shadow:
inset 0 0 5px rgba(0,0,0,0.3),
inset 0 3px 4px rgba(0,0,0,0.3);
}

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

Пример 2

Еще одна простая форма, но с некоторыми новые опциями, такими как: «Войти через Twitter» и «Показать пароль». Это потребует некоторого кода JavaScript.

Разметка

<form>
<h2><span>Войти</span> или <span>зарегистрироваться</span></h2>
<p>
<label for=»login»><i></i>Логин</label>
<input type=»text» name=»login» placeholder=»Логин или email»>
</p>
<p>
<label for=»password»><i></i>Пароль</label>
<input type=»password» name=»password» placeholder=»Пароль»>
</p>
<p>
<a href=»#»>Войти через Twitter</a>
<input type=»submit» name=»submit» value=»Войти»>
</p>
</form>

Здесь мы будем использовать заголовок. Я выбрал h2, но вы можете использовать любой тег. Мы также используем теги label, связанные с текстовыми полями при помощи атрибута for.

CSS

Давайте начнем с некоторых общих стилей для формы:

.form-2 {
/* Size and position */
width: 340px;
margin: 60px auto 30px;
padding: 15px;
position: relative;

/* Styles */
background: #fffaf6;
border-radius: 4px;
color: #7e7975;
box-shadow:
0 2px 2px rgba(0,0,0,0.2),
0 1px 5px rgba(0,0,0,0.2),
0 0 0 12px rgba(255,255,255,0.4);
}

Мы создадим полупрозрачные границы и применим тени.

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

.form-2 h2 {
font-size: 15px;
font-weight: bold;
color: #bdb5aa;
padding-bottom: 8px;
border-bottom: 1px solid #EBE6E2;
text-shadow: 0 2px 0 rgba(255,255,255,0.8);
box-shadow: 0 1px 0 rgba(255,255,255,0.8);
}

.form-2 h2 .log-in,
.form-2 h2 .sign-up {
display: inline-block;
text-transform: uppercase;
}

.form-2 h2 .log-in {
color: #6c6763;
padding-right: 2px;
}

.form-2 h2 .sign-up {
color: #ffb347;
padding-left: 2px;
}

Далее, мы используем два параграфа, которые будут размещены рядом друг с другом. Каждый займет 50% от доступного пространства формы, а благодаря “border-box” box-sizing, отступы рассчитываются внутри этих 50%. Вот почему мы можем задать расстояние между ними.

.form-2 .float {
width: 50%;
float: left;
padding-top: 15px;
border-top: 1px solid rgba(255,255,255,1);
}

.form-2 .float:first-of-type {
padding-right: 5px;
}

.form-2 .float:last-of-type {
padding-left: 5px;
}

Теперь стили для внутренних элементов! Там у нас находятся лэйбл и текстовое поле. Иконка будет находится внутри лэйбла в этом примере:

.form-2 label {
display: block;
padding: 0 0 5px 2px;
cursor: pointer;
text-transform: uppercase;
font-weight: 400;
text-shadow: 0 1px 0 rgba(255,255,255,0.8);
font-size: 11px;
}

.form-2 label i {
margin-right: 5px; /* Gap between icon and text */
display: inline-block;
width: 10px;
}

Примечание: использование cursor: pointer для лэйблов помогает пользователям понять, что они могут нажать на них. Это важная деталь.

.form-2 input[type=text],
.form-2 input[type=password] {
font-family: ‘Lato’, Calibri, Arial, sans-serif;
font-size: 13px;
font-weight: 400;
display: block;
width: 100%;
padding: 5px;
margin-bottom: 5px;
border: 3px solid #ebe6e2;
border-radius: 5px;
transition: all 0.3s ease-out;
}

Не забывайте о состояниях hover и focus:

.form-2 input[type=text]:hover,
.form-2 input[type=password]:hover {
border-color: #CCC;
}

.form-2 label:hover ~ input {
border-color: #CCC;
}

.form-2 input[type=text]:focus,
.form-2 input[type=password]:focus {
border-color: #BBB;
outline: none; /* Remove Chrome’s outline */
}

Проверьте, как мы используем родственный селектор (~), чтобы вызвать состояние hover на текстовом поле, когда мы наводим мышь на лэйбл. Разве это не круто?

Теперь кнопка submit.

.clearfix:after {
content: «»;
display: table;
clear: both;
}

.form-2 input[type=submit],
.form-2 .log-twitter {
/* Size and position */
width: 49%;
height: 38px;
float: left;
position: relative;

/* Styles */
box-shadow: inset 0 1px rgba(255,255,255,0.3);
border-radius: 3px;
cursor: pointer;

/* Font styles */
font-family: ‘Lato’, Calibri, Arial, sans-serif;
font-size: 14px;
line-height: 38px; /* Same as height */
text-align: center;
font-weight: bold;
}

.form-2 input[type=submit] {
margin-left: 1%;
background: linear-gradient(#fbd568, #ffb347);
border: 1px solid #f4ab4c;
color: #996319;
text-shadow: 0 1px rgba(255,255,255,0.3);
}

.form-2 .log-twitter {
margin-right: 1%;
background: linear-gradient(#34a5cf, #2a8ac4);
border: 1px solid #2b8bc7;
color: #ffffff;
text-shadow: 0 -1px rgba(0,0,0,0.3);
text-decoration: none;
}

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

.form-2 input[type=submit]:hover,
.form-2 .log-twitter:hover {
box-shadow:
inset 0 1px rgba(255,255,255,0.3),
inset 0 20px 40px rgba(255,255,255,0.15);
}

.form-2 input[type=submit]:active,
.form-2 .log-twitter:active{
top: 1px;
}

Благодаря относительному позиционированию, мы можем применить top: 1px к кнопкам в активном состоянии, чтобы они выглядели так, как будто они вдавливаются при нажатии.

Важно: для браузеров, которые не поддерживают box-shadow (такие все еще существуют, правда?), мы используем вместо этого изменение background-color. Класс no-boxshadow применяется к тегу HTML при помощи Modernizr, в случае если браузер не поддерживает box-shadow. Это хороший пример того, как можно создать простой «fallback» для старых браузеров:

.no-boxshadow .form-2 input[type=submit]:hover {
background: #ffb347;
}

.no-boxshadow .form-2 .log-twitter:hover {
background: #2a8ac4;
}

JavaScript

Эй, вы не забыли про нашу маленькую фичу «показать пароль»? Сейчас мы сделаем это! Во-первых, вы знаете, что мы не можем изменить тип атрибута для поля? Для того, чтобы показать пароль, мы должны удалить фактическое ввода для пароля и создать новое текстовое поле.

Я не очень хорошо знаю jQuery, так что я нашел маленький фрагмент кода от Aaron Saray:

$(function(){
$(«.showpassword»).each(function(index,input) {
var $input = $(input);
$(«<p/>»).append(
$(«<input type=’checkbox’ />»).click(function() {
var change = $(this).is(«:checked») ? «text» : «password»;
var rep = $(«<input placeholder=’Password’ type='» + change + «‘ />»)
.attr(«id», $input.attr(«id»))
.attr(«name», $input.attr(«name»))
.attr(‘class’, $input.attr(‘class’))
.val($input.val())
.insertBefore($input);
$input.remove();
$input = rep;
})
).append($(«<label for=’showPassword’/>»).text(«Показать пароль»)).insertAfter($input.parent());
});
});

Так что же это скрипт делает?

Он находит поле с классом .showpassword.

Создает новый контейнер (.opt).

Внутри этого контейнера, он создает чекбокс с надписью.

Вставляет этот контейнер после поля с классом .showpassword.

Когда чекбокс отмечен, он удаляет поле .showpassword и создает еще одно, с соответствующим атрибутом type.

Не забудем задать некоторые стили для нашего чекбокса:

.form-2 p:last-of-type {
clear: both;
}

.form-2 .opt {
text-align: right;
margin-right: 3px;
}

.form-2 label[for=showPassword] {
display: inline-block;
margin-bottom: 10px;
font-size: 11px;
font-weight: 400;
text-transform: capitalize;
}

.form-2 input[type=checkbox] {
vertical-align: middle;
margin: -1px 5px 0 1px;
}

Последнее, но не менее важное, мы добавим несколько строк jQuery, чтобы изменить значок, когда чекбокс отмечен! Довольно просто, но весьма эффективно!

$(‘#showPassword’).click(function(){
if($(«#showPassword»).is(«:checked»)) {
$(‘.icon-lock’).addClass(‘icon-unlock’);
$(‘.icon-unlock’).removeClass(‘icon-lock’);
} else {
$(‘.icon-unlock’).addClass(‘icon-lock’);
$(‘.icon-lock’).removeClass(‘icon-unlock’);
}
});

Пример 3

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

Разметка

<form>
<p>
<label for=»login»>Логин</label>
<input type=»text» name=»login» placeholder=»Логин»>
</p>
<p>
<label for=»password»>Пароль</label>
<input type=»password» name=»password» placeholder=»Пароль»>
</p>
<p>
<input type=»checkbox» name=»remember»>
<label for=»remember»>Запомнить меня</label>
</p>
<p>
<input type=»submit» name=»submit» value=»Войти»>
</p>
</form>

Обратите внимание, что мы добавили новое поле: «Запомнить меня». Оно используется в формах авторизации, что позволяет приложению запоминать вас.

CSS

.form-3 {
font-family: ‘Ubuntu’, ‘Lato’, sans-serif;
font-weight: 400;
/* Size and position */
width: 300px;
position: relative;
margin: 60px auto 30px;
padding: 10px;
overflow: hidden;

/* Styles */
background: #111;
border-radius: 0.4em;
border: 1px solid #191919;
box-shadow:
inset 0 0 2px 1px rgba(255,255,255,0.08),
0 16px 10px -8px rgba(0, 0, 0, 0.6);
}

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

Давайте добавим стили для лэйблов и текстовых полей:

.form-3 label {
/* Size and position */
width: 50%;
float: left;
padding-top: 9px;

/* Styles */
color: #ddd;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 0 1px 0 #000;
text-indent: 10px;
font-weight: 700;
cursor: pointer;
}

.form-3 input[type=text],
.form-3 input[type=password] {
/* Size and position */
width: 50%;
float: left;
padding: 8px 5px;
margin-bottom: 10px;
font-size: 12px;

/* Styles */
background: linear-gradient(#1f2124, #27292c);
border: 1px solid #000;
box-shadow:
0 1px 0 rgba(255,255,255,0.1);
border-radius: 3px;

/* Font styles */
font-family: ‘Ubuntu’, ‘Lato’, sans-serif;
color: #fff;

}

.form-3 input[type=text]:hover,
.form-3 input[type=password]:hover,
.form-3 label:hover ~ input[type=text],
.form-3 label:hover ~ input[type=password] {
background: #27292c;
}

.form-3 input[type=text]:focus,
.form-3 input[type=password]:focus {
box-shadow: inset 0 0 2px #000;
background: #494d54;
border-color: #51cbee;
outline: none; /* Remove Chrome outline */
}

Теперь у нас есть красивые поля и мы должны создать наш маленький флажок «Запомнить меня», и кнопку отправки. Эти две вещи размещенны рядом друг с другом:

.form-3 p:nth-child(3),
.form-3 p:nth-child(4) {
float: left;
width: 50%;
}

Давайте начнем с чекбокса и его лэйбла:

.form-3 label[for=remember] {
width: auto;
float: none;
display: inline-block;
text-transform: capitalize;
font-size: 11px;
font-weight: 400;
letter-spacing: 0px;
text-indent: 2px;
}

.form-3 input[type=checkbox] {
margin-left: 10px;
vertical-align: middle;
}

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

Последнее, наша кнопка отправки:

.form-3 input[type=submit] {
/* Width and position */
width: 100%;
padding: 8px 5px;

/* Styles */
border: 1px solid #0273dd; /* Fallback */
border: 1px solid rgba(0,0,0,0.4);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 10px 10px rgba(255,255,255,0.1);
border-radius: 3px;
background: #38a6f0;
cursor:pointer;

/* Font styles */
font-family: ‘Ubuntu’, ‘Lato’, sans-serif;
color: white;
font-weight: 700;
font-size: 15px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
}

.form-3 input[type=submit]:hover {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

.form-3 input[type=submit]:active {
background: #287db5;
box-shadow: inset 0 0 3px rgba(0,0,0,0.6);
border-color: #000; /* Fallback */
border-color: rgba(0,0,0,0.9);
}

.no-boxshadow .form-3 input[type=submit]:hover {
background: #2a92d8;
}

Но где, черт возьми, наш обещанный световой эффект? Ладно, ребята, давайте займемся им. Чтобы добиться этого, нам нужны три элемента:

Один для линии градиента в верхней части формы

Один для небольшую вспышки на предыдущей строке

Один для большого отражения в правой части формы

Начнем с первых двух элементов, при помощи псевдо-элементов для тега form.

/* Gradient line */
.form-3:after {
/* Size and position */
content: «»;
height: 1px;
width: 33%;
position: absolute;
left: 20%;
top: 0;

/* Styles */
background: linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
}

/* Small flash */
.form-3:before {
/* Size and position */
content: «»;
width: 8px;
height: 5px;
position: absolute;
left: 34%;
top: -7px;

/* Styles */
border-radius: 50%;
box-shadow: 0 0 6px 4px #fff;
}

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

.form-3 p:nth-child(1):before{
/* Size and position */
content: «»;
width: 250px;
height: 100px;
position: absolute;
top: 0;
left: 45px;

/* Styles */
transform: rotate(75deg);
background: linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
pointer-events: none;
}

Важно: вы должны отключить события click при помощи свойства pointer-events. Если вы этого не сделаете, вы не сможете нажать на input, так как там будет слой поверх них. Мы будем вынуждены удалить отражения для браузеров, которые не поддерживают pointer-events (мы добавили соответствующий класс при помощи Modernizr):

.no-pointerevents .form-3 p:nth-child(1):before {
display: none;
}

Пример 4

Особенностью этой формы является отсутствие лэйблов или иконок. Да, я помню, что я говорил ранее, что нам необходимо иметь что-то, чтобы сообщить пользователям, что нужно вводить в то или иное поле. И у нас это есть! Мы будем использовать placeholders. А для браузеров, которые не поддерживают их, мы сделаем видимыми лэйблы!

Разметка

<form>
<h2>Форма входа</h2>
<p>
<label for=»login»>Логин или email</label>
<input type=»text» name=»login» placeholder=»Логин или email» required>
</p>
<p>
<label for=»password»>Пароль</label>
<input type=»password» name=’password’ placeholder=»Пароль» required>
</p>

<p>
<input type=»submit» name=»submit» value=»Продолжить»>
</p>
</form>

Обратите внимание на атрибут required. Этот атрибут позволяет браузеру, если он его поддерживает, проверять пустое поле или нет, и сабмитить форму если поле заполнено.

Важно: вы всегда должны добавлять серверную проверку после отправки формы. При помощи веб-инспектора или firebug-a очень легко удалить этот атрибут и JavaScript также может быть отключен, так что не полагайтесь только на валидацию стороне клиента.

CSS

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

.form-4 {
/* Size and position */
width: 300px;
margin: 60px auto 30px;
padding: 10px;
position: relative;

/* Font styles */
font-family: ‘Raleway’, ‘Lato’, Arial, sans-serif;
color: white;
text-shadow: 0 2px 1px rgba(0,0,0,0.3);
}

.form-4 h2 {
font-size: 22px;
padding-bottom: 20px;
}

Давайте перейдем к полям:

.form-4 input[type=text],
.form-4 input[type=password] {
/* Size and position */
width: 100%;
padding: 8px 4px 8px 10px;
margin-bottom: 15px;

/* Styles */
border: 1px solid #4e3043; /* Fallback */
border: 1px solid rgba(78,48,67, 0.8);
background: rgba(0,0,0,0.15);
border-radius: 2px;
box-shadow:
0 1px 0 rgba(255,255,255,0.2),
inset 0 1px 1px rgba(0,0,0,0.1);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;

/* Font styles */
font-family: ‘Raleway’, ‘Lato’, Arial, sans-serif;
color: #fff;
font-size: 13px;
}

Теперь изменим стили для placeholders (где это возможно):

.form-4 input::-webkit-input-placeholder {
color: rgba(37,21,26,0.5);
text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}

.form-4 input:-moz-placeholder {
color: rgba(37,21,26,0.5);
text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}

.form-4 input:-ms-input-placeholder {
color: rgba(37,21,26,0.5);
text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}

Далее, давайте добавим стили для состояний hover и focus:

.form-4 input[type=text]:hover,
.form-4 input[type=password]:hover {
border-color: #333;
}

.form-4 input[type=text]:focus,
.form-4 input[type=password]:focus,
.form-4 input[type=submit]:focus {
box-shadow:
0 1px 0 rgba(255,255,255,0.2),
inset 0 1px 1px rgba(0,0,0,0.1),
0 0 0 3px rgba(255,255,255,0.15);
outline: none;
}

/* Fallback */
.no-boxshadow .form-4 input[type=text]:focus,
.no-boxshadow .form-4 input[type=password]:focus {
outline: 1px solid white;
}

И кнопки отправки:

.form-4 input[type=submit] {
/* Size and position */
width: 100%;
padding: 8px 5px;

/* Styles */
background: linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));
border-radius: 5px;
border: 1px solid #4e3043;
box-shadow:
inset 0 1px rgba(255,255,255,0.4),
0 2px 1px rgba(0,0,0,0.1);
cursor: pointer;
transition: all 0.3s ease-out;

/* Font styles */
color: white;
text-shadow: 0 1px 0 rgba(0,0,0,0.3);
font-size: 16px;
font-weight: bold;
font-family: ‘Raleway’, ‘Lato’, Arial, sans-serif;
}

.form-4 input[type=submit]:hover {
box-shadow:
inset 0 1px rgba(255,255,255,0.2),
inset 0 20px 30px rgba(99,64,86,0.5);
}

/* Fallback */
.no-boxshadow .form-4 input[type=submit]:hover {
background: #594642;
}

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

.form-4 label {
display: none;
padding: 0 0 5px 2px;
cursor: pointer;
}

.form-4 label:hover ~ input {
border-color: #333;
}

.no-placeholder .form-4 label {
display: block;
}

Это очень просто, если placeholders не поддерживается, то будут видны лэйблы.

Пример 5

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

Разметка

Минималистичная разметка для минималистичного вида. 😉

CSS

.form-5 {
/* Size and position */
width: 300px;
margin: 60px auto 30px;
position: relative;

/* Styles */
border-radius: 5px;
box-shadow: 0 0 5px rgba(0,0,0,0.1), 0 3px 2px rgba(0,0,0,0.1);
}

Стили для параграфов и полей:

.form-5 p {
width: 70%;
float: left;
border-radius: 5px 0 0 5px;
border: 1px solid #fff;
border-right: none;
}

.form-5 input[type=text],
.form-5 input[type=password] {
/* Size and position */
width: 100%;
height: 50px;
padding: 0 10px;

/* Styles */
border: none; /* Remove the default border */
background: white; /* Fallback */
background: rgba(255,255,255,0.2);
box-shadow:
inset 0 0 10px rgba(255,255,255,0.5);

/* Font styles */
font-family: ‘Montserrat’, sans-serif;
text-indent: 10px;
color: #ee4c8d;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
font-size: 20px;
}

.form-5 input[type=text] {
border-bottom: 1px solid #fff; /* Fallback */
border-bottom: 1px solid rgba(255,255,255,0.7);
border-radius: 5px 0 0 0;
}

.form-5 input[type=password] {
border-top: 1px solid #CCC; /* Fallback */
border-top: 1px solid rgba(0,0,0,0.1);
border-radius: 0 0 0 5px;
}

Давайте попробуем применить некоторые стили при наведении мыши и стили для placeholders:

.form-5 input[type=text]:hover,
.form-5 input[type=password]:hover,
.form-5 input[type=text]:focus,
.form-5 input[type=password]:focus {
background: #f7def7; /* Fallback */
background: rgba(255,255,255,0.4);
outline: none;
}

.form-5 input::-webkit-input-placeholder {
color: #fff;
text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
font-family: ‘Handlee’, cursive;
}

.form-5 input:-moz-placeholder {
color: #fff;
text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
font-family: ‘Handlee’, cursive;
}

.form-5 input:-ms-input-placeholder {
color: #fff;
text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
font-family: ‘Handlee’, cursive;
}

А теперь для кнопки отправки. Тег i будет содержать значок стрелки, но мы будем делать его видимым только при наведении курсора мыши. Обратите внимание, что мы используем тег span внутри кнопки, чтобы включить текст без включения кнопки.

.form-5 button {
/* Size and position */
width: 30%;
height: 102px;
float: left;
position: relative;
overflow: hidden;

/* Styles */
background:
url(../images/noise.png),
radial-gradient(ellipse at center, #ee4c8d 0%,#b53467 100%);
border-radius: 0 5px 5px 0;
box-shadow:
inset 0 0 4px rgba(255, 255, 255, 0.7),
inset 0 0 0 1px rgba(0, 0, 0, 0.2);
border: none;
border-left: 1px solid silver;
cursor: pointer;
line-height: 102px; /* Same as height */
}

.form-5 button i {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: -20px;
font-size: 64px;
line-height: 109px;
color: #8d1645;
opacity: 0;
text-shadow: 0 1px 0 rgba(255,255,255,0.4);
transition: all 0.2s ease-out;
}

.form-5 button span {
display: block;

/* Font styles */
color: #8d1645;
font-family: ‘Montserrat’, Arial, sans-serif;
font-size: 20px;
text-shadow: 0 1px 0 rgba(255,255,255,0.4);
transform: rotate(-90deg);
transition: all 0.2s linear;
}

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

Теперь, давайте добавим стили для состояний hover, focus и active:

.form-5 button:focus {
outline: none;
}

.form-5 button:hover span,
.form-5 button:focus span {
opacity: 0;
transform: rotate(-90deg) translateY(-20px);
}

.form-5 button:hover i,
.form-5 button:focus i {
opacity: 0.5;
left: 0;
transition-delay: 0.2s;
}

/* Click on button */

.form-5 button:active span,
.form-5 button:active i {
transition: none;
}

.form-5 button:active span {
opacity: 0;
}

.form-5 button:active i {
opacity: 0.5;
left: 0;
color: #fff;
}

JavaScript

Мы используем код JavaScript для добавления поведения HTML5 placeholder для браузеров, которые не поддерживают его. Мы собираемся использовать jQuery плагин от Mathias Bynens. Смотрите на GitHub.

После подключения jQuery и скрипта, мы просто вызовем следующий код:

$(function(){
$(‘input, textarea’).placeholder();
});

И это будет добавить placeholder в старые браузеры.

И это все! Спасибо за чтение этого урока, надеюсь вам понравилось!

Скачать исходные файлы

Перевод статьи с http://tympanus.net/codrops/

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

40 форм HTML и CSS для регистрации аккаунта, оплаты и прочего

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

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

Минималистичная контактная форма

Простая контактная форма с большое разнообразие эффектов такие как плавающие метки или линейная анимация. Элегантный код CSS с небольшим количеством JavaScript. Если вы ищете минималистичная форма для связи это идеально подходит для вас.

Теме статьи:

23 высококачественных библиотеки CSS для веб-дизайна

Минималистичная форма

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

Форма обратной связи Vintage

Форма обратной связи Vintage, очень элегантный дизайн. Отзывчивый для этих веб-сайтов быть замеченным с мобильного, хотя он не включает проверку.

Контактная форма письма

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

Теме статьи:

27 бесплатных карточек HTML и CSS для блогов, электронной коммерции и многого другого

Расширенная контактная форма

это контактная форма развернута Это только интерфейс и проверка с помощью jQuery. Мы нажимаем на плавающую кнопку, и форма появится с яркой анимацией. Выдающийся.

Пользовательский интерфейс контактной формы

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

Расчет платежной карты

Un выписка по платежной карте сделано в HTML, CSS и JavaScript, которые отличается вращающейся анимацией кредитную карту, когда мы нажимаем на поле CVC или контрольного номера.

Плоский дизайн кредитной карты

Чистый CSS для оформить заказ на кредитные карты в плоских цветах. Красочный и очень простой, способный обозначать качество и профессионализм.

Пользовательский интерфейс кредитной карты

Еще одна кредитная карта в HTML, CSS и JavaScript, которая выделяется тем, насколько она хороша. выбрали общий дизайн. Мы забыли об анимации в этом фрагменте кода для вашего сайта. Скачать по этой ссылке.

React Checkout

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

Платежная карта Checkout

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

это форма оплаты кредитной картой запрограммирован на практику с JavaScript для манипуляции с DOM. Вы можете вспомнить в дизайне элегантный код Stripe, цифрового банковского сервиса, который становится все ближе к PayPal.

Кредитная карта

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

Пошаговая форма

Un пошаговая форма для регистрации производится в HTML, CSS и JavaScript. Четыре шага для каждой точки расположен с левой стороны. Хорошо законченные анимации для очень законченной формы. Настоятельно рекомендуется.

Интерактивная форма

Un интерактивная форма многошаговый, сделанный с помощью HTML, CSS и JavaScript. Он выделяется анимацией перехода между каждым из шагов. У него элегантный штрих, который не останется незамеченным.

Пошаговая форма

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

Пошаговая форма готова в HTML, CSS и JavaScript. Для него характерна анимация перехода между каждым из шагов.

Многоступенчатая форма JQuery

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

Форма анимации пользовательского интерфейса

Переходы этого Форма анимации пользовательского интерфейса Estan на основе Domink Marskusic. Обратите внимание на творческий эффект синего поля, когда мы нажимаем на одно из двух полей логина или логина.

Создание учетной записи / форма входа

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

Подсветка змеи

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

Экран входа в систему

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

Дизайн пользовательского интерфейса входа

Разработан с использованием HTML, Sass и jQuery. Дизайн пользовательского интерфейса входа es eзаконный и ясный на тему, в которой есть тонкая анимация, чтобы стать еще одним из фаворитов в списке.

Вход и создание учетной записи UI

Специальный дизайн входа в систему и пользовательский интерфейс для создания учетной записи для цветов и для представления в одна большая карта два раздела. Еще один из самых красивых в исполнении, который нельзя пропустить. Сделано в HTML, CSS и JavaScript.

Вредные ошибки

Вредные ошибки Это отличный вход из-за анимации поля с obnoxious.css. Оригинальный, чтобы быть веселым, беззаботным и совершенно другим логином. Без сомнения, оригинал для нашего сайта.

Войти CSS HTML

Любопытный логин разными иконками которые показывают каждое из полей, чтобы направить посетителя туда, куда мы захотим. Выделяются также оттенки, выбранные в цветах. У него нет анимации. Он сделан на HTML и CSS, чтобы реализовать его на веб-сайте для клиента или для себя.

Модальная форма входа

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

Форма flexbox

Формы поиска начинаем с этого форма на основе flexbox. Он выделяется красным цветом «поиска» и немногим более элегантным полем поиска для вашего веб-сайта.

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

Поле поиска

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

Простое поле поиска нажмите на

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

Эффект ввода текста CSS

Эффект ввода текста CSS включает серию анимация в тексте и панели поиска быть внимательным искателем формы.

Полноэкранный поиск

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

Поиск

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

Нет вопросов

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

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

Пользовательский интерфейс окна подписки

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

Поле подписки CSS

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

Поле подписки

Una простая подписка но очень эффектный по замыслу.

Форма подтверждения EMOJI

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

Не пропустите это список из 23 анимированных стрелок в CSS.

CSS-счетчиков

Счетчики

CSS — это «переменные», поддерживаемые CSS, значения которых могут
увеличиваться с помощью правил CSS (чтобы отслеживать, сколько раз они используются). Счетчики
позволяют настраивать внешний вид содержимого в зависимости от его размещения в документе.

Автоматическая нумерация со счетчиками

Счетчики

CSS похожи на «переменные». Значения переменных могут быть увеличены с помощью правил CSS.
(который будет
отслеживать, сколько раз они используются).

Для работы со счетчиками CSS воспользуемся следующими свойствами:

counter-reset — Создает или сбрасывает счетчик
counter-increment — увеличивает значение счетчика
содержимое — Вставки созданы
содержание
counter () или counters () Функция — добавляет
значение счетчика элемента

Чтобы использовать счетчик CSS, он должен быть сначала создан с помощью counter-reset .

В следующем примере создается счетчик для страницы (в селекторе основного текста),
затем увеличивает значение счетчика для каждого элемента

и добавляет «Секция

< значение счетчика >:»
до начала каждого элемента

:

Пример

корпус {
сброс счетчика: секция;
}

h3 :: before {
counter-increment: section;
содержание: «Раздел» счетчик (раздел) «:»;
}

Попробуй сам »

Счетчики вложенности

В следующем примере создается один счетчик для страницы (раздела) и один
счетчик для каждого элемента

(подраздел).Счетчик «раздела» будет
подсчитывается для каждого элемента

со значением «Section <»
счетчик разделов >. «, и счетчик» подразделов «будет засчитан
для каждого элемента

с «

< значение счетчика раздела >. < значение
подсекция счетчика > «:

Пример

корпус {
сброс счетчика: секция;
}

h2 {
сброс счетчика: подраздел;
}

h2 :: before {
счетчик инкремента:
раздел;
содержание: «Раздел« счетчик (раздел) ».»;
}

h3 :: до {
счетчик-инкремент: подраздел;
содержание:
счетчик (раздел) «.» счетчик (подраздел) «»;
}

Попробуй сам »

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

Пример

ol {
сброс счетчика: секция;
тип-стиль-список: нет;
}

li :: before {
counter-increment: section;
содержание: счетчики (раздел, «.»)» «;
}

Попробуй сам »

Свойства счетчика CSS

Имущество	Описание
содержание	Используется с псевдоэлементами :: before и :: after для вставки сгенерированного содержимого
счетчик приращения	Увеличивает одно или несколько значений счетчика
сброс счетчика	Создает или сбрасывает один или несколько счетчиков
счетчик ()	Возвращает текущее значение названного счетчика

Расширенный стиль форм — Изучите веб-разработку

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

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

Подводя итог сказанному в предыдущей статье, мы имеем:

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

Уродливое : Некоторые элементы нельзя полностью стилизовать с помощью CSS.К ним относятся:

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

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

Внешний вид Свойство было создано как способ контролировать, какой стиль на уровне ОС или системы применяется к элементам управления веб-формы.К сожалению, поведение исходных реализаций этого свойства сильно различается в разных браузерах, что делает его не очень удобным. Новые реализации более последовательны в поведении; Интересно, что оба браузера на основе Chromium (Chrome, Opera, Edge), Safari и Firefox поддерживают версию с префиксом -webkit- ( -webkit-appearance ). Firefox остановился на этом, потому что веб-разработчики в основном использовали версию с префиксом -webkit- , так что это было лучше для совместимости.

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

Например, возьмем следующие элементы управления:

  <форма>
  
     поиск: 
    
  
  
     текст: 
    
  
  
     дата: 
    
  
  
     радио: 
    
  
  
     флажок:

Применение к ним следующего CSS удаляет стили на системном уровне.

  вход {
  -webkit-appearance: нет;
  внешний вид: нет;
}

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

В следующем живом примере показано, как они выглядят в вашей системе — по умолчанию слева и с приведенным выше CSS, примененным справа (также можно найти здесь, если вы хотите протестировать его в других системах).

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

Укрощение окон поиска

— это, по сути, просто ввод текста, так почему же вид : none; здесь пригодится? Ответ заключается в том, что в браузерах на основе Chromium в macOS окна поиска имеют некоторые ограничения стиля — например, вы не можете свободно регулировать их высоту или размер шрифта .Это связано с тем, что браузеры Chrome, отличные от macOS, больше не используют механизм рендеринга WebKit, который по умолчанию включал внешний вид Aqua для определенных элементов управления формы. При включенной Aqua некоторые элементы управления формы не масштабируются.

Это можно исправить с помощью нашего друга. Внешний вид: нет; , который отключает внешний вид Aqua по умолчанию:

  input [type = "search"] {
    -webkit-appearance: нет;
    внешний вид: нет;
}

В приведенном ниже примере вы можете увидеть два окна поиска с одинаковым стилем.Правый имеет вид : нет; применяется, а левый — нет. Если вы посмотрите на него в macOS Chrome, вы увидите, что левый не имеет правильного размера.

Интересно, что установка границы / фона в поле поиска также решает эту проблему, поскольку также отключает или «нарушает» внешний вид Aqua. Следующий поисковый запрос со стилями не имеет вид : none; , но он не страдает той же проблемой в macOS Chrome, что и в предыдущем примере.

Примечание : Вы могли заметить, что в поле поиска значок удаления «x» исчезает, когда ввод теряет фокус в Edge и Chrome, но остается в Safari.Чтобы удалить через CSS, вы можете использовать input [type = "search"] :: - webkit-search-cancel-button {display: none; } . Однако это, похоже, избавляет от значка с фокусом , без видимого способа вернуть его.

Стилизация флажков и переключателей

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

Например, рассмотрим этот простой тестовый пример:

  пролет {
    дисплей: встроенный блок;
    фон: красный;
}

input [type = "checkbox"] {
    ширина: 100 пикселей;
    высота: 100 пикселей;
}

Различные браузеры справляются с этим по-разному, часто некрасиво:

Использование внешнего вида: нет на радио / флажках

Как мы показали ранее, вы можете полностью удалить внешний вид флажка или переключателя по умолчанию с внешним видом : none; Давайте возьмем этот пример HTML:

  <форма>
  
     Фруктовые предпочтения 

    
      <метка>
        
        Я люблю вишню
      
    
    
      <метка>
        
        Я не люблю банан
      
    
    
      <метка>
        
        Я люблю клубнику

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

  input [type = "checkbox"] {
  -webkit-appearance: нет;
  внешний вид: нет;
}

Мы можем использовать псевдоклассы : checked и : disabled , чтобы изменить внешний вид нашего настраиваемого флажка при изменении его состояния:

  input [type = "checkbox"] {
  положение: относительное;
  ширина: 1em;
  высота: 1em;
  граница: 1 пиксель сплошного серого цвета;
  
  вертикальное выравнивание: -2 пикселя;
  
  цвет: зеленый;
}

input [type = "checkbox"] :: before {
  содержание: «✔»;
  позиция: абсолютная;
  размер шрифта: 1.2em;
  вправо: -1px;
  верх: -0,3em;
  видимость: скрыта;
}

input [type = "checkbox"]: checked :: before {
  
  видимость: видимая;
}

input [type = "checkbox"]: disabled {
  цвет границы: черный;
  фон: #ddd;
  цвет: серый;
}

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

: отмечено — флажок (или переключатель) находится в отмеченном состоянии — пользователь щелкнул / активировал его.
: отключено — флажок (или переключатель) находится в отключенном состоянии — с ним нельзя взаимодействовать.

Вы можете увидеть результат в реальном времени:

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

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

Примечание : Хотя Internet Explorer не поддерживает никакую версию внешнего вида , ввод [type = checkbox] :: - ms-check позволяет устанавливать флажки для флажков только в IE.Этот метод работает и для радиокнопок, несмотря на название -ms- check .

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

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

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

Возьмем следующий пример, который показывает в действии ряд «уродливых» функций формы:

В этом примере к нему применен следующий CSS:

  кузов {
  семейство шрифтов: Josefin Sans, без засечек;
  маржа: 20 пикселей автоматически;
  максимальная ширина: 400 пикселей;
}

form> div {
  нижнее поле: 20 пикселей;
}

Выбрать {
  -webkit-appearance: нет;
  внешний вид: нет;
}

.select-wrapper {
  положение: относительное;
}

.select-wrapper :: after {
  содержание: «▼»;
  размер шрифта: 1 бэр;
  верх: 6 пикселей;
  вправо: 10 пикселей;
  позиция: абсолютная;
}

button, label, input, select, progress, meter {
  дисплей: блок;
  семейство шрифтов: наследовать;
  размер шрифта: 100%;
  маржа: 0;
  размер коробки: рамка-рамка;
  ширина: 100%;
  отступ: 5 пикселей;
  высота: 30 пикселей;
}

input [type = "text"], input [type = "datetime-local"], input [type = "color"], выберите {
  box-shadow: вставка 1px 1px 3px #ccc;
  радиус границы: 5 пикселей;
}

метка {
  нижнее поле: 5 пикселей;
}

кнопка {
  ширина: 60%;
  маржа: 0 авто;
}

Примечание : Если вы хотите протестировать эти примеры в нескольких браузерах одновременно, вы можете найти их в реальном времени здесь (также см. Здесь исходный код).

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

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

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

  кнопка, метка, ввод, выбор, прогресс, счетчик {
  дисплей: блок;
  семейство шрифтов: наследовать;
  размер шрифта: 100%;
  отступ: 0;
  маржа: 0;
  размер коробки: рамка-рамка;
  ширина: 100%;
  отступ: 5 пикселей;
  высота: 30 пикселей;
}

Мы также добавили однородные тени и закругленные углы к элементам управления, что имело смысл:

  input [type = "text"], input [type = "datetime-local"], input [type = "color"], выберите {
  box-shadow: вставка 1px 1px 3px #ccc;
  радиус границы: 5 пикселей;
}

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

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

Выборки и списки данных

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

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

Две вещи немного более проблематичны. Прежде всего, значок «стрелка» при выборе, который указывает, что это раскрывающийся список, отличается в разных браузерах. Он также имеет тенденцию меняться, если вы увеличиваете размер поля выбора или изменяете его некрасивым образом. Чтобы исправить это в нашем примере, мы сначала использовали внешний вид нашего старого друга : none , чтобы полностью избавиться от значка:

  выбрать {
  -webkit-appearance: нет;
  внешний вид: нет;
}

Затем мы создали наш собственный значок, используя сгенерированный контент.Мы помещаем дополнительную оболочку вокруг элемента управления, потому что :: before / :: after не работают с элементами

Затем мы используем сгенерированный контент для создания маленькой стрелки вниз и помещаем его в нужное место, используя позиционирование:

 .select-wrapper {
  положение: относительное;
}

.select-wrapper :: after {
  содержание: «▼»;
  размер шрифта: 1 бэр;
  верх: 6 пикселей;
  вправо: 10 пикселей;
  позиция: абсолютная;
}

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

Конечно, это также может не соответствовать вашему дизайну, но это стоит отметить!

Типы ввода даты

Типы ввода даты и времени ( datetime-local , time , неделя , месяц ) имеют одну и ту же основную проблему. Фактическое содержащее поле так же легко стилизовать, как и любой текстовый ввод, и то, что у нас есть в этой демонстрации, выглядит отлично.

Однако внутренние части контроля (т.е.грамм. всплывающий календарь, который вы используете, выбирает дату, счетчик, который вы можете использовать для увеличения / уменьшения значений) вообще не стилизованы, и вы не можете избавиться от них, используя внешний вид : none; . Если вам действительно нужен полный контроль над стилем, вам придется либо использовать какую-то библиотеку для создания настраиваемого элемента управления, либо создать свой собственный.

Примечание : Здесь также стоит упомянуть — у него также есть счетчик, который вы можете использовать для увеличения / уменьшения значений, поэтому потенциально может иметь ту же проблему.Однако в случае типа number собираемые данные проще, и при желании легко просто использовать вместо него тип ввода text (или tel , если вы хотите, чтобы мобильные браузеры отображали цифровую клавиатуру) .

Типы ввода диапазона

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

  input [type = "range"] {
  внешний вид: нет;
  -webkit-appearance: нет;
  фон: красный;
  высота: 2 пикселя;
  отступ: 0;
  контур: сплошной прозрачный 1px;
}

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

Типы ввода цвета

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

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

  input [type = "color"] {
  граница: 0;
  отступ: 0;
}

Однако индивидуальное решение — единственный способ добиться чего-то существенно другого.

Типы входных файлов

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

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

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

  input [type = "file"] {
  высота: 0;
  отступ: 0;
  непрозрачность: 0;
}

Затем задайте стиль метки, чтобы она действовала как кнопка, при нажатии которой открывается средство выбора файлов, как и ожидалось:

  label [for = "file"] {
  box-shadow: 1px 1px 3px #ccc;
  фон: линейный градиент (вниз, #eee, #ccc);
  граница: 1px сплошной rgb (169, 169, 169);
  радиус границы: 5 пикселей;
  выравнивание текста: центр;
  высота строки: 1.5;
}

label [for = "file"]: hover {
  фон: линейный градиент (вниз, #fff, #ddd);
}

label [for = "file"]: active {
  box-shadow: вставка 1px 1px 3px #ccc;
}

Вы можете увидеть результат приведенного выше стиля CSS в приведенном ниже живом примере (см. Также styled-file-picker.html live и исходный код).

Счетчики и индикаторы выполнения

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

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

Как мы уже несколько раз упоминали выше, если вы хотите получить полный контроль над «уродливыми» типами элементов управления, у вас нет другого выбора, кроме как полагаться на JavaScript.В статье Как создать настраиваемые элементы управления формы вы увидите, как это сделать самостоятельно, но есть несколько очень полезных библиотек, которые могут вам помочь:

Uni-form — это фреймворк, который стандартизирует разметку формы, стилизуя ее с помощью CSS. Он также предлагает несколько дополнительных функций при использовании с jQuery, но это необязательно.
Formalize — это расширение распространенных фреймворков JavaScript (таких как jQuery, Dojo, YUI и т. Д.), Которое помогает нормализовать и настраивать ваши формы.
Niceforms — это автономный метод JavaScript, который обеспечивает полную настройку веб-форм.Вы можете использовать некоторые из встроенных тем или создать свои собственные.

Следующие библиотеки предназначены не только для форм, но и имеют очень интересные функции для работы с формами HTML:

Пользовательский интерфейс jQuery предлагает настраиваемые виджеты, такие как выбор даты (с особым вниманием к доступности).
Twitter Bootstrap может помочь нормализовать ваши формы.
WebShim — это огромный инструмент, который может помочь вам справиться с поддержкой HTML5 браузером. Часть веб-форм может быть действительно полезной.

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

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

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

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

Advanced Topics

29 CSS Input Text

Коллекция бесплатных HTML и CSS текста типа ввода примеров кода: заполнители , метки с плавающей запятой и т. Д. Обновление коллекции за декабрь 2019 г. 5 новинок.

Ввод текста JavaScript
Входной текст jQuery
Текст ввода React
Текст ввода Vue

Автор

Анисса Феррейра
16 сентября 2020

О коде

Редактируемая доска для писем CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

Дэвид А.
9 сентября 2020

О коде

Стиль CSS Vars

CSS-стили для переменных .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

Шеннон Меллер
16 июня 2020

О коде

Поле со списком

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Сделано с

HTML (мопс) / CSS (стилус)

О коде

Аутентификация на чистом CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости:

Автор

Жуан Марсель
17 декабря 2019

О коде

Трехмерное текстовое поле

Поле ввода формы 3D текстового поля.Он использует преобразование : поворот на для сторон и для общего вращения.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

Лукас Оливейра
7 октября 2019

О коде

Ввод текста

Введите текстовый материал с градиентом.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

Аарон Икер
15 августа 2019

О коде

Группа ввода

Группа ввода : фокус в пределах .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

О коде

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

Никлеш Тиване
14 января 2019

О коде

Прыгающий ввод текста

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

О коде

Отображение метки формы после ввода текста

Метка формы отображается после ввода текста только CSS.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

bertdida
15 октября 2018

О коде

Оповестить меня

Проверка формы с использованием HTML требует и атрибутов шаблона вместе с CSS : требуется и : допустимые селекторы .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

Андреас Сторм
20 июля 2018

О коде

Упругая проверка

Совместимые браузеры: Chrome, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

Андреас Сторм
15 июня 2018

О коде

Автор

Ана Тудор
15 января 2017

О коде

Поле ввода с подчеркиванием под каждым символом

Попробуйте удалить и написать что-нибудь еще в поле ввода.Он использует блок ch , ширина которого равна ширине символа 0 . Также предполагается, что шрифт в поле input является моноширинным, так что все символы имеют одинаковую ширину. Таким образом, ширина каждого символа всегда равна 1 канал . Промежуток между символами принят равным .5ch . Это значение, которое мы установили для межбуквенного интервала . Ширина входного — это количество символов, умноженное на сумму между шириной буквы ( 1 канал, ) и шириной промежутка (.5 кан ). Итак, 7 * (1 канал + 0,5 канала) = 7 * 1,5 канала = 10,5 канала . Мы удаляем фактическую границу входного и устанавливаем фальшивую, используя повторяющийся линейный градиент . Черточка (dimgrey) идет от 0 до 1ch , а промежуток ( прозрачный ) начинается сразу после черточки и переходит в 1.5ch . Он прикреплен к левой и нижней части ввода — это компонент background-position ( 0% по горизонтали и 100% по вертикали).Он распространяется по всему входу по горизонтали ( 100% в идеальном случае, ширина ввода минус промежуток для решения проблемы рендеринга в Chrome и Firefox) и имеет высоту 2 пикселя — это компонент размера фона . фона .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

Дин Хидри
28 сентября 2016

О коде

Поле ввода электронной почты

Просто красивое маленькое поле для ввода.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Бен Милдрен
9 марта 2015

О коде

Входной текст Material Design

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

Крис Севилья
9 июля 2014 г.

О коде

Поля ввода Google Material Design

CSS-эксперимент по воссозданию полей ввода Google Material Design Polymer в CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

О коде

Необычный ввод текста

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

Дэнни Кинг
26 апреля 2014 г.

О коде

Адаптивный заполнитель

После активации заполнители ввода становятся метками ввода.

Автор

Майкл Арестад
8 августа 2013

О коде

Ввод текста

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

91 CSS Forms

Коллекция бесплатных HTML и CSS форм кода примеров: интерактивный, пошаговый, простой, проверка и т. Д.Обновление майской коллекции 2020 года. 12 новинок.

Интерактивные (пошаговые) формы

CSS Контактные формы
Формы входа в систему CSS
Формы оформления заказа CSS
CSS Формы подписки
Формы начальной загрузки
Формы входа в Bootstrap
Формы jQuery

Автор

Подводка для стека
2 января 2021 г.

О коде

Анимированная форма входа

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

О коде

Неуморфная форма

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

Shounak Das
10 декабря 2020

О коде

Глассморфный знак по форме

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

Микаэль Айналем
12 ноября 2020

О коде

Заполнители

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

Дики Аль Фаттах
2 октября 2020 г.

О коде

Нарезка дизайна Subscribe Modal

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

Билал.Ризваан
1 октября 2020 г.

О коде

Информационный бюллетень CSS с анимированными плавающими метками ввода

Переместить заполнитель над полем ввода в фокус.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

@ BrawadaCom
1 октября 2020 г.

О коде

Форма входа

Форма входа.SVG-анимация.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

Арефех хатами
30 сентября 2020

О коде

Форма

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css

Автор

Håvard Brynjulfsen
17 июля 2020

О коде

Карточный компонент с плавающими этикетками

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

Иван Гроздич
4 июля 2020

О коде

Вход / Регистрация

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: bootstrap.css, unicons.css

Автор

Батухан Баш
28 июня 2020

О коде

Пограничная форма

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

Soufiane Khalfaoui HaSsani
8 апреля 2020

О коде

Форма входа

Форма входа с плавающим заполнителем и световой кнопкой.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

Рики Экхардт
3 марта 2020

О коде

Форма регистрации Pupassure

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: font-awesome.css

Автор

Рики Экхардт
1 марта 2020 г.

О коде

Реферативная форма регистрации

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

Рики Экхардт
28 февраля 2020

О коде

Цветная контактная форма

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Альваро Монторо
21 декабря 2019

О коде

Анимированная форма входа

Эта анимированная форма входа построена только с помощью HTML и CSS.Ни SVG, ни JavaScript, ни GreenSock. Персонаж улыбается, когда форма входа в систему верна.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

alphardex
23 октября 2019

О коде

Прозрачная форма для входа в систему

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

О коде

Адаптивная контактная форма

Только SCSS / CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: font-awesome.css

Автор

Мерт Цукурен
30 июня 2019

О коде

Страница входа в систему

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

Ахмед Наср
16 декабря 2018

О коде

Форма подписки

Форма подписки с анимированной кнопкой в HTML и CSS.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

Автор

Chouaib Blgn
20 сентября 2017

Сделано с

HTML
CSS / SCSS
JavaScript (jquery.js)

О коде

Экран входа в систему

Модный пользовательский интерфейс экрана входа в систему.

Автор

Chouaib Blgn
28 сентября 2017

Сделано с

HTML
CSS / SCSS
JavaScript (jquery.js)

О коде

Дизайн пользовательского интерфейса формы входа

Дизайн пользовательского интерфейса формы входа с использованием HTML, Sass и jQuery.

Автор

Кэтрин Като
19 августа 2017

О коде

Форма Flexbox

Форма, созданная с помощью flexbox .

Автор

Микаэль Айналем
19 августа 2017

О коде

Вход в Invision

Войти через форму UI.

Автор

Chouaib Blg
31 июля 2017 г.

Сделано с

HTML
CSS
JavaScript (jquery.js)

О коде

Анимированное окно поиска

Анимированное окно поиска с использованием HTML, CSS и jQuery.

Сделано с

HTML
CSS / SCSS
JavaScript (jquery.js)

О коде

Пользовательский интерфейс формы входа и регистрации

Микровзаимодействие для формы регистрации / входа.

Автор

Мария Челин
12 июля 2017

Сделано с

HTML
CSS / SCSS
JavaScript (jquery.js)

О коде

Вредные ошибки

Ошибка формы с анимацией obnoxious.css.

Демонстрационное изображение: Поле поиска

Поле поиска

Поле поиска HTML и CSS.
Сделано Бахаа Аддином Балашони
9 июля 2017 г.

Демонстрационное изображение: Касса с платежной картой

Касса с платежной картой

Расчет платежной карты в HTML, CSS и JavaScript.
Сделано Симоной Бернабе
8 июля 2017 г.

Автор

Михал Невитала
21 июня 2017 г.

Сделано с

HTML / Haml
CSS / Sass
JavaScript / CoffeeScript (jquery.js, jquery.customSelect.js)

О коде

Нет вопросов Form & Magic Focus

Демонстрационный GIF: проверка формы эмодзи

Проверка формы эмодзи

Проверка формы Emoji на чистом CSS.
Сделано Марко Бидерманн
6 июня 2017 г.

Демонстрационное изображение: Плоский дизайн кредитной карты

Плоский дизайн кредитной карты

Плоский дизайн кредитной карты на чистом CSS.
Сделано Жаном Оливейрой
18 мая 2017 г.

Автор

Брэндон Фаллджеймс
1 мая 2017 г.

О коде

Форма без названия

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Демонстрационное изображение: Форма входа в Material Design

Форма входа в систему Material Design

Форма входа в систему Material design с HTML, CSS и JavaScritp.
Сделано celyes
5 февраля 2017 г.

Демонстрационное изображение: форма входа — модальная форма

— модальная форма

Это модальное окно входа с 2 панелями, вдохновленное материалами. Панель входа в систему и панель регистрации, которая по умолчанию скрыта. Панель регистрации можно запустить, щелкнув видимую вкладку справа. После нажатия панель регистрации выдвинется и перекрывает панель входа в систему.
Сделано Энди Траном
30 января 2017 г.

Демо-изображение: Форма регистрации

Форма регистрации

Форма регистрации с использованием HTML, CSS и JavaScript.
Сделано Джонни Буй
10 января 2017 г.

Демонстрационное изображение: Оверлейная форма регистрации

Оверлейная регистрационная форма

Наложение формы регистрации на HTML, CSS и JavaScript.
Сделано Крисом Диси
21 декабря 2016 г.

Демо-изображение: Зарегистрироваться

Зарегистрироваться

Пользовательский интерфейс формы регистрации с помощью React.js.
Сделано Джеком Оливером
25 октября 2016 г.

Демонстрационное изображение: UI Credit Card

UI Credit Card

Кредитная карта

UI с HTML, CSS и JavaScript.
Сделано Гилом
22 октября 2016 г.

Демонстрационное изображение: полноэкранный поиск

Полноэкранный поиск

Этот поисковый ввод должен работать с любым типом позиции / макета, включая обычные страницы с прокруткой. Только не переопределяйте .s — клонированные стили для .search, и все будет хорошо. Требуются определенные стили для контейнеров (проверьте стили html + body и .scroll-cont) и элемент .search-overlay, который должен быть помещен в корень.
Сделал Николай Таланов
5 октября 2016 г.

Демонстрационное изображение: Анимация панели поиска

Анимация панели поиска

Поисковый ввод с эффектом морфинга.
Сделано Миланом Милошевым
23 сентября 2016 г.

Демонстрационное изображение: Панель поиска

Панель поиска

Панель поиска с HTML, CSS и JavaScript.
Сделано Адамом Куном
21 сентября 2016 г.

Демонстрационное изображение: Checkout Card

Checkout Card

Форма кассы с React.js.
Сделано Джеком Оливером
20 августа 2016 г.

Демонстрационное изображение: Search

Search

Простой поиск, играющий с анимацией и позициями.
Сделано Аароном Тейлором
15 августа 2016 г.

Демо-изображение: Форма регистрации

Форма регистрации

Зарегистрируйтесь с помощью HTML, CSS и JavaScript.
Сделано Томмазо Полетти
4 августа 2016 г.

Демонстрационное изображение: Расчет по кредитной карте

Расчет по кредитной карте

Чистая и простая форма проверки оплаты по кредитной карте, с css3, html5 и немного jQuery, чтобы немного улучшить UX.
Сделано Момчило Поповым
18 июля 2016 г.

Демонстрационное изображение: Простой ввод для мобильного поиска

Простой ввод для мобильного поиска

Это пример ввода для поиска, который можно поместить в мобильный шаблон для электронной коммерции или для чего-то еще 🙂
Сделано Томмазо Полетти
13 июля 2016 г.

Демонстрационное изображение: поиск SVG…

Поиск SVG …

Значок поиска SVG, переходящий в подчеркивание при фокусировке.
Сделано Марком Томсом
28 июня 2016 г.

Демонстрационное изображение: Форма оплаты кредитной картой

Форма оплаты кредитной картой

Форма оплаты кредитной картой с HTML, CSS и JavaScript.
Сделано Джейд Прейс
21 июня 2016 г.

Демонстрационное изображение: Форма регистрации UI

Форма регистрации UI

Форма входа в Daily UI Challenge # 001.
Сделано Maycon Luiz
20 июня 2016 г.

Демонстрационное изображение: Оплата кредитной картой

Оплата кредитной картой

Оплата кредитными картами с нефункциональным интерфейсом пользователя.Кодируется для отработки необработанного JS для манипуляций с DOM.
Сделано Шехабом Эльтавелем
5 мая 2016 г.

Демонстрационное изображение: Анимация контекста ввода поиска

Анимация контекста ввода поиска

CSS-иконок, контекстная анимация, эффект загрузки поиска в стиле приложения Telegram.
Сделано Риккардо Занутта
19 апреля 2016 г.

Демо-изображение: Пользовательский интерфейс регистрации формы

Пользовательский интерфейс регистрации формы

Форма регистрации UI с HTML, CSS и JavaScript.
Сделано Эдди Солар
9 апреля 2016 г.

Демо-изображение: Концепция формы входа и регистрации

Концепция формы входа и регистрации

Концепция формы входа и регистрации, нажмите «Войти» и зарегистрируйтесь, чтобы изменить и просмотреть эффект.
Сделано Дэни Сантосом
19 марта 2016 г.

Демонстрационное изображение: Расчет по кредитной карте

Расчет по кредитной карте

Расчет по кредитной карте с помощью HTML, CSS и JavaScript.
Сделано Фабио Оттавиани
18 марта 2016 г.

Демонстрационное изображение: Search UI

Search UI

Концепция поиска с опциями.
Сделано Фабио Оттавиани
10 марта 2016 г.

Демонстрационное изображение: Анимация поиска

Анимация поиска

Поисковая анимация с помощью HTML, CSS и JavaScript.
Сделал Дмитрий
26 февраля 2016 г.

Демонстрационное изображение: Расчет по кредитной карте

Расчет по кредитной карте

Расчет по кредитной карте с помощью HTML, CSS и JavaScript.
Сделал Павел Лаптев
25 февраля 2016 г.

Демонстрационное изображение: Концепция выдвижной панели поиска

Концепция выдвижной панели поиска

Концепция выдвижной панели поиска HTML и CSS
Сделано Асной Фарид
22 февраля 2016 г.

Демонстрационное изображение: Анимация окна поиска

Анимация окна поиска

Анимируемое окно поиска, созданное с помощью HTML и CSS.
Сделано Ярно ван Рейном
5 февраля 2016 г.

Демонстрационное изображение: Поле поиска CSS

Поле поиска CSS

Ищет вещи, наверное, что-то подобное уже делали раньше.
Сделано Джейми Коултером
12 января 2016 г.

Демо-изображение: Bouncy Search Box

Bouncy Search Box

Динамическое окно поиска HTML, CSS и JavaScript.
Сделано Гийомом Шлипаком
5 декабря 2015 г.

Демонстрационное изображение: Расчет по кредитной карте

Расчет по кредитной карте

Расчет по кредитной карте с помощью HTML, CSS и JavaScript.
Сделано Марко Бидерманн
3 декабря 2015 г.

Демонстрационное изображение: Форма регистрации UI

Форма регистрации UI

Форма регистрации с использованием HTML, CSS и JavaScript.
Сделано Льюисом Нидхэмом
13 ноября 2015 г.

Демонстрационное изображение: Форма регистрации UI

Форма регистрации UI

Ежедневный вызов 001 от dailyui.co.
Сделано Тайлером Джонсоном
30 октября 2015 г.

Демонстрационное изображение: UI кредитной карты

UI кредитной карты

Пользовательский интерфейс кредитной карты с HTML и CSS.
Сделано Star St.Germain
23 октября 2015 г.

Демонстрационное изображение: Преобразование поиска

Преобразование поиска

Интерактивный прототип преобразования формы поиска.
Сделано Лукасом Бурдалле
22 октября 2015 г.

Демонстрационное изображение: Анимация поиска

Анимация поиска

Интерактивная CSS-анимация перехода значка поиска в поле поиска.
Сделано Дэном Рутом
10 октября 2015 г.

Демонстрационное изображение: Войти в форму

Войти в форму

Форма входа в систему с помощью HTML, CSS и JavaScript.
Сделал Камен Недев
2 октября 2015 г.

Демонстрационное изображение: Анимация фокуса ввода поиска

Анимация фокуса ввода поиска

Простая анимация для события фокуса на вводе поиска.
Сделано Никольсом Дж. Энглером
26 июля 2015 г.

Демонстрационное изображение: Форма входа в систему материалов

Форма входа в систему материалов

Интерактивная форма входа в систему материального дизайна.
Сделано Энди Траном
25 июля 2015 г.

Демо-изображение: Плоская форма входа

Плоская форма входа

Плоская форма входа с HTML, CSS и JavaScript.
Сделано Энди Траном
30 июня 2015 г.

Демонстрационное изображение: Форма регистрации UI

Форма регистрации UI

Пользовательский интерфейс формы регистрации с HTML и CSS.
Сделано Петром
5 июня 2016 г.

Демонстрационное изображение: Анимация кнопки поиска

Анимация кнопки поиска

Анимация кнопки поиска с помощью HTML, CSS и JavaScript.
Сделано Кристи Йитон
20 апреля 2015 г.

Демонстрационное изображение: поисковый ввод с анимацией

Поисковый ввод с анимацией

Чистый ввод для поиска CSS с анимацией.
Сделано в Arlina Design
12 апреля 2015 г.

Демонстрационное изображение: Fancy Forms

Fancy Forms

Элементы формы в стиле материального дизайна.
Сделано Адамом
4 февраля 2015 г.

Демонстрационное изображение: 3D-форма с одним входом

3D-форма с одним входом

Трехмерная форма с одним входом с http://thecodeplayer.com.
Сделано Сон Тран-Нгуен
17 ноября 2014 г.

Демонстрационное изображение: Дизайн формы

Дизайн формы

Это отличная экономия места, когда дело доходит до отображения меток ввода в качестве заполнителя, и когда пользователь фокусируется на области ввода, он по-прежнему позволяет пользователю вводить свою информацию, а также заполнитель / метка по-прежнему доступны для просмотра пользователем в любое время .
Сделано Timurtek Bizel
21 октября 2014 г.

Демонстрационное изображение: Анимированная форма входа

Анимированная форма входа

Экспериментируем со скрытыми формами входа с анимированными раскрытиями. Надеюсь, это первый из немногих.
Сделано Che
3 сентября 2014 г.

Демонстрационное изображение: Форма входа в плоский интерфейс

Форма входа в плоский интерфейс

Плоская форма входа в систему с пользовательским интерфейсом HTML, CSS и JavaScript.
Сделано Брэдом Бодином
14 января 2014 г.

Демо-изображение: Форма пошаговой регистрации

Форма пошаговой регистрации

Пошаговая форма регистрации с использованием HTML, CSS и JavaScript.
Сделано Джеромом Рендерсом
6 января 2017 г.

Демонстрационное изображение: Интерактивная форма

Интерактивная форма

Интерактивная многоступенчатая форма с HTML, CSS и JavaScript.
Сделано Rosa
14 декабря 2016 г.

Демо-изображение: Пошаговая форма

Пошаговая форма

Версия codrops с возможностью вернуться и подтвердить все введенные данные.
Сделано Джонатаном H
8 ноября 2016 г.

Демо-изображение: Пошаговая форма

Пошаговая форма

Пошаговая форма HTML, CSS и JavaScript.
Сделано DevTips
22 августа 2016 г.

Демонстрационное изображение: Пользовательский интерфейс регистрации

Пользовательский интерфейс регистрации

Простая концепция регистрации.
Сделано Тобиасом
3 апреля 2016 г.

Демонстрационное изображение: Пользовательский интерфейс регистрации

Пользовательский интерфейс регистрации

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

Демонстрационное изображение: Многоступенчатая форма с индикатором выполнения с использованием jQuery и CSS3

Многоступенчатая форма с индикатором выполнения с использованием jQuery и CSS3

На вашем сайте есть длинные формы? Разбейте их на более мелкие логические разделы и преобразуйте в многоэтапную форму с классным индикатором выполнения.Может работать для длительных процессов, таких как регистрация, оформление заказа, заполнение профиля, вход в систему с двухфакторной аутентификацией и т. Д.
Изготовлено Атаканом Гоктепе
17 марта 2016 г.

Демонстрационное изображение: Интерактивная форма

Интерактивная форма

Интерактивная форма ввода, созданная только с помощью CSS. Злоупотребление состоянием фокуса и метками для обработки переходов и навигации. Перемещайтесь между входами с помощью Tab (Далее) и Shift + Tab (Назад). Чистый CSS. JS не включен.
Сделано Эммануэлем Пиланде
7 марта 2016 г.

Демонстрационное изображение: Пошаговое взаимодействие с формой

Пошаговое взаимодействие с формой

Простая пошаговая форма для обслуживания клиентов.
Сделано Бхакти Аль Акбаром
4 марта 2016 г.

Демонстрационное изображение: Интерактивная форма регистрации

Интерактивная форма регистрации

Концепция интерактивной формы регистрации.
Сделано Риккардо Пазианотто
1 марта 2016 г.

Быстрая стилизация форм с помощью CSS · GitHub

Мгновенно делитесь кодом, заметками и фрагментами.

Быстрая стилизация форм с помощью CSS

	ввод, текстовое поле {
	отступ: 9 пикселей;
	граница: сплошная 1px #;
	наброски: 0;
	шрифт: обычный 13 пикселей / 100% Verdana, Tahoma, без засечек;
	ширина: 100%;
	фон: #FFFFFF;
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; размер коробки: рамка-рамка;
	}

	текстовое поле {
	ширина: 100%;
	высота: 150 пикселей;
	высота строки: 150%;
	}

	ввод: наведение, текстовое поле: наведение,
	ввод: фокус, текстовое поле: фокус {
	цвет границы: # C9C9C9;
	}

	этикетка {
	маржа слева: 0 пикселей;
	цвет: # 999999;
	}

Кнопка	, ввод [type = «submit»] {
	ширина: авто;
	отступ: 9 пикселей 15 пикселей;
	фон: #cccccc;
	граница: 0;
	font-size: 14px;
	цвет: #FFFFFF;
	}

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

Лучшие примеры CSS и приемы для ваших форм Formstack

«Здесь, чтобы помочь» — это колонка поддержки, написанная специально для замечательных, лояльных клиентов Formstack. ‍

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

В этом посте я собираюсь разбить всю важную информацию, которую вам нужно знать об использовании CSS формы с Formstack, включая три моих основных совета по CSS! Готовы окунуться? Давайте начнем.

CSS формы: основы

CSS (каскадные таблицы стилей) — это язык кода, который можно использовать для стилизации онлайн-контента, такого как веб-страницы и формы.С помощью этого кода вы можете настраивать такие элементы, как шрифты, цвета, интервалы и макет. В приложении Formstack вы можете использовать расширенный редактор кода для внесения изменений CSS в свои формы. Сначала откройте форму, выберите вкладку «Сборка» и нажмите «Тема» (внизу конструктора, между полями и историей). Оттуда выберите «Редактировать тему». ‍

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

‍ При прокрутке вниз в параметрах темы вы увидите Расширенный редактор кода.Находясь в расширенном редакторе кода, вы можете выбрать вкладку CSS, чтобы изменить CSS формы. После того, как вы внесете какие-либо изменения в свою форму, обязательно прокрутите до верхней части раздела редактирования темы и нажмите «Сохранить», чтобы изменения кода остались неизменными! Вот как мой CSS будет выглядеть внутри расширенного редактора CSS:

Примечание. Чтобы сохранить изменения CSS и применить их к текущей теме и форме, выберите «Сохранить и активировать». Без этого шага изменения НЕ отразятся на вашей форме.

‍ Теперь, когда вы знаете, как получить доступ к редактору CSS, вот три моих лучших совета по настройке формы CSS!

Уловка №1: отредактируйте поле области описания

Использование настройки формы CSS в поле «Область описания» позволяет вставлять в формы форматированный текст (например, изображения, форматированный текст и ссылки).Вот несколько способов использования CSS для настройки этих полей:

‍

Изменить высоту строки и интервал

‍ Изменение высоты строки и расстояния в области описания — один из наиболее распространенных вопросов CSS, на которые наша служба поддержки клиентов команда получает. Используйте этот код, чтобы внести эти изменения:

.fsBody p {line-height: 15 px}

Редактировать таблицы в области описания

‍ По умолчанию таблицы в поле области описания не имеют границ :

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

.fsBody table td {border-color: black; border-style: solid; border-width: 2px; width: 25%;}

Уловка №2: измените кнопку отправки

Кнопка отправки является важным элементом ваша форма. Если она не выделяется, люди не будут отправлять ваши формы! Есть много разных способов изменить кнопку отправки формы с помощью CSS. Вот несколько примеров CSS для форм: ‍

Использование настраиваемого изображения для кнопки отправки

‍ Чтобы использовать настраиваемое изображение в качестве кнопки отправки, вставьте приведенный ниже код CSS в редактор CSS и замените фоновый URL-адрес со ссылкой на изображение, которое вы хотите использовать.

.fsПодать ввод {background: url ( http: //www.YOUR_IMAGE_LINK_HERE.png ) без повтора прокрутки 0 0 прозрачный! Важный; граница: средний нет! Важный; высота: 100 пикселей! Важно; поле: 0! Важно ; padding: 0! important; width: 300px! important; text-indent: -9999px! important;}

Вам может потребоваться отрегулировать высоту (height: 100px;) и ширину (width: 300px;) в соответствии с размерами ваше изображение. Как только вы сохраните эти изменения, в вашей форме появится новая кнопка отправки.

‍

Выровнять кнопку отправки по левому краю

‍ Выровнять кнопку отправки формы по левому краю также можно с помощью CSS.Просто введите следующий код в редакторе CSS:

.fsPagination {margin: 25px 0 0 22px; text-align: left;}

Удалить кнопку отправки

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

.fsSubmit input.fsSubmitButton {display: none;}

Кроме того, вы можете удалить URL-адрес из кода настраиваемой кнопки отправки в редакторе CSS. Вот еще несколько примеров кнопок отправки, которые используют CSS (и если вы хотите использовать любой из них в ваших формах, просто скопируйте код с этой страницы!)

Уловка № 3: Измените страницу благодарности

Ваша страница благодарности — еще один важный элемент процесса отправки формы. Вот несколько способов настроить эту страницу с помощью CSS!

‍

Измените цвет фона сообщения с благодарностью

Если вы хотите изменить цвет фона сообщения с благодарностью, не меняя цвет заголовков разделов формы, введите следующий код в редактор CSS на Ваша форма:

.fsBody .fsForm .fsTable .fsSectionHeader {цвет фона: # 7BC143 ; }

Замените шестнадцатеричный код, указанный выше, на цвет по вашему выбору. ‍

Измените или удалите значок галочки

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

#fsSubmissionCheckmark {background: url ( http: //www.YOUR_IMAGE_LINK_HERE.png ) прокрутка без повтора 0 0 прозрачный;

border: medium none; height: 100px; margin: 0; padding: 0; width: 300px;}

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

#fsSubmissionCheckmark {display: none; }

Дополнительная информация

Если вы новичок в настройке форм CSS с помощью Formstack, наши Темы пользовательских форм и Руководство по CSS заполнены примерами CSS форм и станут отличным источником, который поможет вам начать работу. Когда вы освоитесь с CSS форм, вы можете изменить и сохранить тему, а затем применить эти изменения к нескольким формам на вашем сайте.
Имейте в виду, что использование настраиваемого CSS в расширенном редакторе кода переопределит любые настройки, сделанные в разделах «Быстрый» и «Расширенный стили».
Вы можете включить «Без CSS» для кода встраивания Javascript, чтобы использовать стили CSS с вашего сайта.

Хотите узнать больше о параметрах настраиваемой темы Formstack? Нажмите ниже, чтобы узнать о других способах украсить формы без CSS.

36 самых красивых форм CSS, разработанных ведущими дизайнерами в 2021 году

Формы

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

Вот список красивых CSS-форм с современным дизайном.

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

Информация / Скачать демо

Контактная форма v2

Те, кому нужен простой пример дизайна HTML-формы, чтобы понять современную концепцию дизайна, найдут этот шаблон чрезвычайно полезным.Создатель сохранил простой и понятный дизайн и в то же время использовал тонкую анимацию, чтобы оживить дизайн. Разумное использование анимации — одна из современных тенденций дизайна, используемых дизайнерами для улучшения взаимодействия с пользователем. В целом, Contact Form v2 — это элегантный шаблон контактной формы, который загружается быстрее и помогает разработчику использовать его как на компьютере, так и на мобильных устройствах.

Информация / Скачать демо

Красивая форма регистрации CSS V18

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

Информация / Скачать демо

Контактная форма Colorlib

Контактная форма

Информация / Скачать демо

Форма входа, версия 2

Login Form v2 — это чистая форма входа, которую можно использовать как для веб-сайтов, так и для мобильных приложений.Разработчик этой формы дал вам возможность отображать и скрывать поле пароля. Как и в контактной форме V11, упомянутой выше, эта также имеет цветовую схему градиента для кнопки призыва к действию. В верхней части формы у вас есть место для добавления вашего логотипа. Центральное пятно на форме делает логотип более заметным. Внизу формы у вас есть место для добавления ссылки на регистрационную форму. Говоря о логотипах, взгляните на нашу коллекцию макетов логотипов, чтобы продемонстрировать ваш дизайн на фотореалистичных изображениях и свойствах.

Информация / Скачать демо

Форма входа 4

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

Информация / Скачать демо

Форма входа v3

Форма входа

v3 почти аналогична форме входа в систему V4, упомянутой выше. Эффекты ввода текста в этой форме чистые и гладкие, поэтому пользователь получит интерактивный опыт. В верхней части формы входа у вас есть место для добавления вашего логотипа. Благодаря гибкому и отзывчивому дизайну формы вы можете легко разместить свой логотип на этой форме. В демонстрации вы получаете фон изображения для просмотра всей страницы.Но вы можете изменить или использовать его в зависимости от ваших потребностей. Эта форма дает вам возможность «Запомнить меня», которая позволяет пользователю войти в систему один раз и забыть об этом на своих доверенных устройствах.

Информация / Скачать демо

Форма входа 6

Форма входа 6 — лучший вариант для входа пользователя или входа в систему. Если вы даете своим пользователям возможность просто ввести свой пароль и войти в профиль на устройстве, на котором они выполняли вход ранее, эта форма вам пригодится. Этот тип варианта входа в профиль хорошо знаком с приложениями Google и социальных сетей.Чтобы пользователь знал, входит ли он в правильный профиль, его изображение профиля отображается вверху. Эта форма также дает вам возможность отображать изображение профиля пользователя вверху. Благодаря минималистичному дизайну эта форма легко вписывается в любой тип веб-страницы.

Информация / Скачать демо

Форма входа 12

Форма входа 12 почти аналогична форме входа 6, упомянутой выше. Вверху у вас есть место для отображения изображения профиля пользователя.Это одна из самых красивых форм CSS в этом списке с фоном изображения и модным наложением цвета. Чтобы форма была четкой на заднем плане, поверх изображения используется наложение цвета. Здесь также внизу страницы у вас есть возможность добавить ссылку на страницу регистрации. Благодаря чистому дизайну формы входа в систему, это лучший вариант для входа в панель управления. Взгляните на наш бесплатный шаблон панели инструментов, в котором есть большинство опций, предварительно разработанных для вас.

Информация / Скачать демо