Стили HTML форм

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

Почему так сложно стилизовать виджеты форм с помощью CSS?

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

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

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

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

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

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

Хорошая

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

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

Плохая

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

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

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

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 , , and elements. The file picker widget is also known not to be stylable at all. The new and 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 (en-US) .

Basic styling

To style elements that are easy to style (en-US) 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 (en-US) .

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; /* For legacy WebKit based browsers */ -moz-box-sizing: border-box; /* For legacy (Firefox <29) Gecko based browsers */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:

Создаем простую форму html

В этом уроке рассмотрим создание красивой формы регистрации html + css. Вот что должно у нас получиться:

Фомы нужны для получения различных данных от пользователя. Для создания форм в html есть тег .

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

action — адрес страницы которая будет обрабатывать данные.

method — метод протокола http, может быть GET или POST

GET- данные будут передаваться в адресной строке, например в форме будут введены имя ivan и пароль qwerty, в адресной строке мы увидим примерно следующее:

POST- посылает на сервер данные в запросе браузера. Этот метод используется, если нам не нужно, чтобы в адресной строке были видны введенные данные. Например нам не нужно чтобы было видно введенный пароль. В адресной строке мы получим http://site.ru/form.php

name — имя формы, нужно для обработки данных.

Приступим к созданию простой формы регистрации html. Дадим имя нашей форме regisrration, страница обработки наших данных будет form.php, метод передачи данных будем использовать POST.

За создание полей формы в html отвечает тег

Для создания формы регистрации нам понадобится три типа инпутов:

type=”text” – текстовое поле

type=”password” – поле пароля

type=”submit” – кнопка отправки формы

Также нам пригодятся следующие атрибуты

name — имя для обработки данных;

value — значение элемента;

required – указание, что поле обязательно для заполнения

Вот такой код html у нас получиться:

Пока наша html форма регистрации выглядит не очень красиво.

Теперь добавим немного стилей css к нашей html форме.

Запихнем нашу форму в блок div и добавим заголовок и ссылку для восстановления пароля. И добавим классы css для наших элементов.

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

.

Вот весь код нашей красивой формы регистрации:

      
Авторизация на сайте
 
    
Забыли пароль? 
 
 
  

Красивая форма с индикатором заполнения.

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

Зайдите на сайт https://github.com/Colourity/Fort.js и скачайте архив со стилями и скриптом. Создаем html файл следующего содержания:

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

Эффекты могут быть такие: default(), sections(), gradient(), flash(). Попробуйте каждую и посмотрите, что изменится.

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

Итак, на этом все. Спасибо за внимание.

Создано 01.06.2014 20:32:16

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

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

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

Коллекция из 15+ красивых форм регистрации и авторизации

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

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

Nice dark sign in form

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