Стилизация input: Стилизация текстовых полей формы — ИТ Шеф

Содержание

Использование и стилизация input checkbox

Время на прочтение: 2 мин.

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

Что такое чекбокс?

Checkbox с английского переводится как «флажок». Это элемент пользовательского интерфейса, позволяющий пользователю управлять параметром с двумя состояниями — ☑ включено и ☐ отключено. В включенном состоянии внутри чекбокса отображается галочка ✓, иногда можно использовать крестик. По традиции чекбокс имеет квадратную форму.

В html формах для вывода чекбокса используется код: <input type= "checkbox">

Применение чекбоксов

Чекбоксы применяют:

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

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

Элемент toogle

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

Правильное применение checkbox

Создание стандартных чекбоксов

Ниже продемонстрирован пример создания стандартных чекбоксов.

See the Pen Untitled by Токмаков Александр (@calliko) on CodePen.

Стилизация чекбоксов

Чекбоксы можно стилизовать под ваши нужды. Ниже приведен пример стилизации чекбоксов с помощью css, без использования js

See the Pen checkbox style by Токмаков Александр (@calliko) on CodePen.

Пример тугла (переключателя):

See the Pen toggle by Токмаков Александр (@calliko) on CodePen.

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

Советы по использованию чекбоксов

Используйте стандартный вид чекбокса. Пользователи привыкли к квадратной форме чекбоксов и галочкам внутри них. Сделав их круглыми, вы можете запутать пользователей. Если использовать крестик, то тоже не понятно выбор сделан или наоборот — отмена.
Располагайте чекбоксы правильно. Лучший вариант в столбик друг под другом. Иногда можно их ставить в ряд, но нижние чекбоксы должны быть строго друг под другом.

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

А ещё у нас есть статья о стилизации select. Спасибо за внимание!

2 0 0 0 0 0

Приглашаем поучаствовать в обсуждении статьи:

Django | Стилизация полей форм

Последнее обновление: 20.08.2022

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

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


from django import forms

class UserForm(forms.Form):
    name = forms.CharField(min_length=3)
    age = forms.IntegerField(min_value=1, max_value=100)

В шаблоне пропишем ее использование:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
    <style>
    .  alert{color:red}
    .form-group{margin: 10px 0;}
    .form-group input{width:250px;height: 25px;border-radius:3px;}
    </style>
</head>
<body>
    <form method="POST" novalidate>
        {% csrf_token %}
        <div>
        {% for field in form %}
        <div>
            {{field.label_tag}}
            <div>{{field}}</div>
            {% if field.errors%}
            {% for error in field.errors %}
            <div>
                {{error}}
            </div>
            {% endfor %}
            {% endif %}
        </div>
        {% endfor %}
        </div>
        <input type="submit" value="Send" >
    </form>
</body>
</html>

Результа при отправке формы с ошибками:

Второй механизм представляют свойства формы required_css_class и error_css_class, который соответственно применяют класс css к метке, создаваемой для поля формы, и к блоку ассоциированных с ним ошибок.

Например, определим следующую форму:


from django import forms

class UserForm(forms.Form):
    name = forms.CharField(min_length=3)
    age = forms.IntegerField(min_value=1, max_value=100)
    required_css_class = "field"
    error_css_class = "error"

В этом случае в шаблоне у нас должны быть определены или подключены классы «field» и «error»:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
    <style>
    .field{font-weight:bold;}
    .error{color:red;}
    </style>
</head>
<body>
    <form method="POST" novalidate>
        {% csrf_token %}
        <table>
        {{form}}
        </table>
        <input type="submit" value="Send" >
    </form>
</body>
</html>

Но также можно было бы комбинировать оба способа:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT. COM</title>
    <style>
        .field{font-weight:bold;}
        .error{color:red;}
    </style>
</head>
<body>
    <form method="POST" novalidate>
        {% csrf_token %}
        <div>
        {% for field in form %}
        <div>
            {{field.label_tag}}
            <div>{{field}}</div>
            {% if field.errors%}
            <div>{{field.errors}}</div>
            {% endif %}
        </div>
        {% endfor %}
        </div>
        <input type="submit" value="Send" >
    </form>
</body>
</html>

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


from django import forms

class UserForm(forms.Form):
    name = forms.CharField(widget=forms.TextInput(attrs={"class":"myfield"}))
    age = forms.  IntegerField(widget=forms.NumberInput(attrs={"class":"myfield"}))

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

И, допустим, в шаблоне будет определен класс myfield:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
    <style>
        .myfield{
			border:1px solid #ccc; 
			border-radius:5px;
			height:25px;
			width:200px;
			margin: 10px 10px 10px 0;
		}
    </style>
</head>
<body>
    <form method="POST">
        {% csrf_token %}
        <div>
        {% for field in form %}
        <div>
            {{field.label_tag}}
            <div>{{field}}</div>
        </div>
        {% endfor %}
        </div>
        <input type="submit" value="Send" >
    </form>
</body>
</html>

НазадСодержаниеВперед

29 CSS Input Text

Коллекция бесплатных примеров кода для ввода текста HTML и CSS

: заполнителей, плавающих меток и т.