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

Подобные статьи:

Волшебные константы для сайта

Валидация на HTML5

Верстаем с помощью display, превращаем строчные теги в блочные

Учимся верстать на флексбоксах

Давайте разберем 4 способа выравнивания блока при верстке

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

Делаем адаптивную таблицу несколько примеров

Создаем корзину для сайта

КАК СОЗДАТЬ МАКЕТ С FLEXBOX

Делаем геометрические фигуры на css

Пишем медиа запросы css — это просто

img и свойство background

Свойства margin , padding , строчные и блочные элементы.

Классы и ид-шники в css

Работа с формами | Документация Django 3.1

Об этом документе

Этот документ содержит введение в основы веб-форм и то, как они обрабатываются в Django. Для более детального рассмотрения конкретных областей API форм смотрите API форм, Поля формы и Валидация форм и полей.

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

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

HTML-формы

В HTML форма — это набор элементов внутри <form>...</form>

Некоторые из этих элементов интерфейса формы — ввод текста или флажки — встроены в сам HTML. Другие гораздо сложнее; интерфейс, который открывает окно выбора даты или позволяет перемещать ползунок или манипулировать элементами управления, обычно использует JavaScript и CSS, а также элементы HTML формы <input> для достижения этих эффектов.

Помимо элементов

• where: URL, по которому должны быть возвращены данные, соответствующие введенным пользователем
• how: метод HTTP, с помощью которого должны быть возвращены данные

В качестве примера, форма входа для администратора Django содержит несколько элементов <input>: один из type="text" для имени пользователя, один из type="password" для пароля и один из type="submit" для кнопки «Войти». Он также содержит некоторые скрытые текстовые поля, которые пользователь не видит, и которые Django использует для определения того, что делать дальше.

Он также сообщает браузеру, что данные формы должны быть отправлены на URL, указанный в атрибуте <form>“action — /admin/ — и что они должны быть отправлены с использованием механизма HTTP, указанного в атрибуте method — post.

Когда срабатывает элемент <input type="submit" value="Log in">, данные возвращаются в /admin/.

GET и POST — единственные методы HTTP, которые следует использовать при работе с формами.

Форма входа в Django возвращается с помощью метода POST, в котором браузер упаковывает данные формы, кодирует их для передачи, отправляет на сервер, а затем получает ответ.

GET, напротив, объединяет предоставленные данные в строку и использует ее для составления URL. URL содержит адрес, по которому должны быть отправлены данные, а также ключи и значения данных. Вы можете увидеть это в действии, если выполните поиск в документации Django, который выдаст URL вида https://docs.djangoproject.com/search/?q=forms&release=1.

GET и POST обычно используются для разных целей.

Любой запрос, который может быть использован для изменения состояния системы — например, запрос, который вносит изменения в базу данных — должен использовать POST. GET следует использовать только для запросов, которые не влияют на состояние системы.

GET также не подходит для формы пароля, поскольку пароль будет отображаться в URL, а значит, и в истории браузера и журналах сервера, причем открытым текстом. Он также не подходит для больших объемов данных или для двоичных данных, таких как изображение. Веб-приложение, использующее запросы GET для административных форм, представляет собой угрозу безопасности: злоумышленнику может быть легко сымитировать запрос формы, чтобы получить доступ к чувствительным частям системы. POST в сочетании с другими средствами защиты, такими как CSRF protection в Django, обеспечивает больший контроль над доступом.

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

Роль Django в формах

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

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

Django обрабатывает три различные части работы, связанной с формами:

• подготовка и реструктуризация данных, чтобы сделать их готовыми к визуализации
• создание HTML-форм для данных
• получение и обработка представленных форм и данных от клиента

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

Формы в Django

Мы кратко описали HTML-формы, но HTML <form> — это только одна часть необходимого механизма.

В контексте веб-приложения «форма» может относиться к HTML <form>, или к Django Form, который ее создает, или к структурированным данным, возвращаемым при отправке, или к сквозной рабочей коллекции этих частей.

Класс Django

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

Подобно тому, как поля класса модели отображаются на поля базы данных, поля класса формы отображаются на элементы HTML-формы <input>. (Поле ModelForm отображает поля класса модели на элементы HTML-формы <input> через Form; на этом основана админка Django).

Поля формы сами по себе являются классами; они управляют данными формы и выполняют проверку при отправке формы. DateField и FileField обрабатывают совершенно разные типы данных и должны делать с ними разные вещи.

Поле формы представляется пользователю в браузере как HTML «виджет» — часть пользовательского интерфейса. Каждый тип поля имеет соответствующее значение по умолчанию Widget class, но оно может быть переопределено по мере необходимости.

Создание, обработка и визуализация форм

При визуализации объекта в Django мы обычно:

1. получить его в представлении (например, получить его из базы данных)
2. передать его в контекст шаблона
3. развернуть его в HTML-разметку с помощью переменных шаблона

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

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

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

Когда мы создаем форму, мы можем оставить ее пустой или предварительно заполнить, например, с помощью:

• данные из сохраненного экземпляра модели (как в случае с админскими формами для редактирования)
• данные, которые мы собрали из других источников
• данные, полученные от предыдущей отправки HTML-формы

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

Построение формы

Работа, которую необходимо выполнить

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

<form action="/your-name/" method="post">
    <label for="your_name">Your name: </label>
    <input type="text" name="your_name" value="{{ current_name }}">
    <input type="submit" value="OK">
</form>

Это указывает браузеру вернуть данные формы в URL /your-name/, используя метод POST. Он отобразит текстовое поле с надписью «Ваше имя:» и кнопку с надписью «OK». Если контекст шаблона содержит переменную current_name, она будет использована для предварительного заполнения поля your_name.

Вам понадобится представление, которое отображает шаблон, содержащий HTML-форму, и которое может предоставлять поле current_name по мере необходимости.

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

Теперь вам также понадобится представление, соответствующее этому URL /your-name/, которое будет находить соответствующие пары ключ/значение в запросе, а затем обрабатывать их.

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

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

На данном этапе гораздо проще заставить Django сделать большую часть этой работы за нас.

Создание формы в Django

Класс

Мы уже знаем, как должна выглядеть наша HTML-форма. Наша отправная точка для нее в Django такова:

forms.py

from django import forms

class NameForm(forms.Form):
    your_name = forms.CharField(label='Your name', max_length=100)

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

Максимально допустимая длина поля определяется max_length. Это делает две вещи. Она накладывает maxlength="100" на HTML <input> (таким образом, браузер должен предотвратить ввод пользователем более чем этого количества символов). Это также означает, что когда Django получит форму обратно от браузера, он проверит длину данных.

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

• возврат True
• поместить данные формы в ее атрибут cleaned_data.

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

<label for="your_name">Your name: </label>
<input type="text" name="your_name" maxlength="100" required>

Обратите внимание, что он **не включает в себя теги <form> или кнопку отправки. Мы должны сами предусмотреть их в шаблоне.

Взгляд

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

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

views.py

from django.http import HttpResponseRedirect
from django.shortcuts import render

from .forms import NameForm

def get_name(request):
    # if this is a POST request we need to process the form data
    if request.method == 'POST':
        # create a form instance and populate it with data from the request:
        form = NameForm(request.POST)
        # check whether it's valid:
        if form.is_valid():
            # process the data in form.cleaned_data as required
            # ...
            # redirect to a new URL:
            return HttpResponseRedirect('/thanks/')

    # if a GET (or any other method) we'll create a blank form
    else:
        form = NameForm()

    return render(request, 'name.html', {'form': form})

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

Если форма отправлена с помощью запроса POST, представление снова создаст экземпляр формы и заполнит его данными из запроса: form = NameForm(request.POST) Это называется «привязка данных к форме» (теперь это связанная форма).

Мы вызываем метод формы is_valid(); если он не True, мы возвращаемся к шаблону с формой. На этот раз форма уже не пустая (unbound), поэтому HTML-форма будет заполнена ранее представленными данными, где их можно будет отредактировать и исправить при необходимости.

Если is_valid() равно True, то теперь мы сможем найти все проверенные данные формы в ее атрибуте cleaned_data. Мы можем использовать эти данные для обновления базы данных или другой обработки перед отправкой HTTP-переадресации браузеру, указывающей ему, куда идти дальше.

Шаблон

Нам не нужно многого делать в нашем шаблоне name. html:

<form action="/your-name/" method="post">
    {% csrf_token %}
    {{ form }}
    <input type="submit" value="Submit">
</form>

Все поля формы и их атрибуты будут распакованы в HTML-разметку из этого {{ form }} языком шаблонов Django.

Формы и защита от подделки межсайтовых запросов

Django поставляется с простым в использовании protection against Cross Site Request Forgeries. При отправке формы через POST с включенной защитой CSRF вы должны использовать тег шаблона csrf_token, как в предыдущем примере. Однако, поскольку защита от CSRF не связана напрямую с формами в шаблонах, этот тег опущен в следующих примерах в этом документе.

Типы ввода HTML5 и проверка браузера

Если ваша форма включает URLField, EmailField или любой целочисленный тип поля, Django будет использовать типы ввода url, email и number HTML5. По умолчанию браузеры могут применять свою собственную проверку для этих полей, которая может быть более строгой, чем проверка Django. Если вы хотите отключить это поведение, установите атрибут novalidate в теге form или укажите другой виджет для поля, например TextInput.

Теперь у нас есть рабочая веб-форма, описанная Django Form, обработанная представлением и отображенная в виде HTML <form>.

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

Подробнее о классах Django

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

Модели и формы

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

Связанные и несвязанные экземпляры форм

Различие между Связанные и несвязанные формы является важным:

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

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

Подробнее о полях

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

forms.py

from django import forms

class ContactForm(forms.Form):
    subject = forms.CharField(max_length=100)
    message = forms.CharField(widget=forms.Textarea)
    sender = forms.EmailField()
    cc_myself = forms.BooleanField(required=False)

В нашей предыдущей форме использовалось одно поле, your_name, a CharField. В данном случае наша форма имеет четыре поля: subject, message, sender и cc_myself. CharField, EmailField и BooleanField — это только три из доступных типов полей; полный список можно найти в Поля формы.

Виджеты

Каждое поле формы имеет соответствующий Widget class, который в свою очередь соответствует виджету HTML-формы, например <input type="text">.

В большинстве случаев поле будет иметь разумный виджет по умолчанию. Например, по умолчанию поле CharField будет иметь виджет TextInput, который в HTML выдает <input type="text">. Если вам нужно <textarea> вместо этого, вы укажете соответствующий виджет при определении поля формы, как мы это сделали для поля message.

Полевые данные

Какими бы ни были данные, представленные в форме, как только они будут успешно проверены вызовом is_valid() (и is_valid() вернет True), проверенные данные формы окажутся в словаре form.cleaned_data. Эти данные будут красиво преобразованы в типы Python для вас.

Примечание

На данный момент вы все еще можете получить доступ к непроверенным данным непосредственно из request. POST, но проверенные данные лучше.

В приведенном выше примере контактной формы cc_myself будет булевым значением. Аналогично, такие поля, как IntegerField и FloatField преобразуют значения в Python int и float соответственно.

Вот как данные формы могут быть обработаны в представлении, которое обрабатывает эту форму:

views.py

from django.core.mail import send_mail

if form.is_valid():
    subject = form.cleaned_data['subject']
    message = form.cleaned_data['message']
    sender = form.cleaned_data['sender']
    cc_myself = form.cleaned_data['cc_myself']

    recipients = ['[email protected]']
    if cc_myself:
        recipients.append(sender)

    send_mail(subject, message, sender, recipients)
    return HttpResponseRedirect('/thanks/')

Совет

Подробнее об отправке электронной почты из Django смотрите Отправка электронной почты.

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

Работа с шаблонами форм

Все, что вам нужно сделать, чтобы поместить вашу форму в шаблон, это поместить экземпляр формы в контекст шаблона. Таким образом, если ваша форма называется form в контексте, {{ form }} отобразит ее элементы <label> и <input> соответствующим образом.

Параметры рендеринга формы

Дополнительная мебель для шаблонов форм

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

Однако для пар <label>/<input> существуют и другие варианты вывода:

• {{ form. as_table }} будет отображать их как ячейки таблицы, обернутые в теги <tr>
• {{ form.as_p }} будет отображать их обернутыми в теги <p>
• {{ form.as_ul }} будет отображать их обернутыми в теги <li>

Обратите внимание, что вам придется самостоятельно предоставить окружающие элементы <table> или <ul>.

Вот вывод {{ form.as_p }} для нашего экземпляра ContactForm:

<p><label for="id_subject">Subject:</label>
    <input type="text" name="subject" maxlength="100" required></p>
<p><label for="id_message">Message:</label>
    <textarea name="message" required></textarea></p>
<p><label for="id_sender">Sender:</label>
    <input type="email" name="sender" required></p>
<p><label for="id_cc_myself">Cc myself:</label>
    <input type="checkbox" name="cc_myself"></p>

Обратите внимание, что каждое поле формы имеет атрибут ID, установленный в id_<field-name>, на который ссылается сопровождающий тег label. Это важно для обеспечения доступности форм для вспомогательных технологий, таких как программы для чтения с экрана. Вы также можете customize the way in which labels and ids are generated.

Подробнее об этом см. в разделе Вывод форм в формате HTML.

Рендеринг полей вручную

Нам не обязательно позволять Django распаковывать поля формы; при желании мы можем сделать это вручную (что позволит нам, например, изменить порядок полей). Каждое поле доступно как атрибут формы с помощью {{ form.name_of_field }}, и в шаблоне Django будет отображаться соответствующим образом. Например:

{{ form.non_field_errors }}
<div>
    {{ form.subject.errors }}
    <label for="{{ form.subject.id_for_label }}">Email subject:</label>
    {{ form.subject }}
</div>
<div>
    {{ form.message.errors }}
    <label for="{{ form.message.id_for_label }}">Your message:</label>
    {{ form.message }}
</div>
<div>
    {{ form. sender.errors }}
    <label for="{{ form.sender.id_for_label }}">Your email address:</label>
    {{ form.sender }}
</div>
<div>
    {{ form.cc_myself.errors }}
    <label for="{{ form.cc_myself.id_for_label }}">CC yourself?</label>
    {{ form.cc_myself }}
</div>

Полные элементы <label> также могут быть сгенерированы с помощью label_tag(). Например:

<div>
    {{ form.subject.errors }}
    {{ form.subject.label_tag }}
    {{ form.subject }}
</div>

Рендеринг сообщений об ошибках формы

Цена этой гибкости — немного больше работы. До сих пор нам не приходилось беспокоиться о том, как отображать ошибки формы, поскольку об этом уже позаботились. В этом примере нам пришлось позаботиться об ошибках для каждого поля и об ошибках для формы в целом. Обратите внимание на {{ form.non_field_errors }} в верхней части формы и поиск ошибок в шаблоне для каждого поля.

Использование {{ form.name_of_field.errors }} выводит список ошибок формы, отображаемый в виде неупорядоченного списка. Это может выглядеть следующим образом:

<ul>
    <li>Sender is required.</li>
</ul>

Список имеет CSS-класс errorlist, чтобы вы могли стилизовать его внешний вид. Если вы хотите дополнительно настроить отображение ошибок, вы можете сделать это, перебирая их в цикле:

{% if form.subject.errors %}
    <ol>
    {% for error in form.subject.errors %}
        <li><strong>{{ error|escape }}</strong></li>
    {% endfor %}
    </ol>
{% endif %}

Ошибки, не относящиеся к полю (и/или ошибки скрытого поля, которые отображаются в верхней части формы при использовании таких помощников, как form.as_p()), будут отображаться с дополнительным классом nonfield, чтобы помочь отличить их от ошибок, относящихся к полю. Например, {{ form.non_field_errors }} будет выглядеть следующим образом:

<ul>
    <li>Generic validation error</li>
</ul>

Подробнее об ошибках, стилизации и работе с атрибутами формы в шаблонах смотрите в API форм.

Перебор полей формы

Если вы используете один и тот же HTML для каждого из полей формы, вы можете уменьшить количество дублирующегося кода, перебирая каждое поле по очереди с помощью цикла {% for %}:

{% for field in form %}
    <div>
        {{ field.errors }}
        {{ field.label_tag }} {{ field }}
        {% if field.help_text %}
        <p>{{ field.help_text|safe }}</p>
        {% endif %}
    </div>
{% endfor %}

Полезные атрибуты на {{ field }} включают:

{{ field.label }}

Метка поля, например, Email address.

{{ field. label_tag }}

Метка поля, обернутая в соответствующий тег HTML <label>. Это включает в себя label_suffix формы. Например, по умолчанию label_suffix — это двоеточие:

<label for="id_email">Email address:</label>

{{ field.id_for_label }}

ID, который будет использоваться для этого поля (id_email в примере выше). Если вы создаете метку вручную, вы можете использовать этот параметр вместо label_tag. Это также полезно, например, если у вас есть встроенный JavaScript и вы хотите избежать жесткого кодирования ID поля.

{{ field.value }}

Значение поля. например, [email protected].

{{ field.html_name }}

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

{{ field. help_text }}

Любой текст справки, связанный с полем.

{{ field.errors }}

Выводит <ul>, содержащий все ошибки валидации, соответствующие данному полю. Вы можете настроить представление ошибок с помощью цикла {% for error in field.errors %}. В этом случае каждый объект в цикле представляет собой строку, содержащую сообщение об ошибке.

{{ field.is_hidden }}

Этот атрибут имеет значение True, если поле формы является скрытым полем, и False в противном случае. Он не особенно полезен в качестве переменной шаблона, но может быть полезен в условных тестах, таких как:

{% if field.is_hidden %}
   {# Do something special #}
{% endif %}

{{ field.field }}

Экземпляр Field из класса формы, который обернут этим BoundField. Вы можете использовать его для доступа к атрибутам Field, например, {{ char_field. field.max_length }}.

См.также

Полный список атрибутов и методов приведен в разделе BoundField.

Перемещение по скрытым и видимым полям

Если вы вручную размещаете форму в шаблоне, а не полагаетесь на стандартный макет формы Django, вы можете захотеть обращаться с полями <input type="hidden"> иначе, чем с не скрытыми полями. Например, поскольку скрытые поля ничего не отображают, размещение сообщений об ошибках «рядом» с полем может запутать ваших пользователей — поэтому ошибки для таких полей должны обрабатываться по-другому.

Django предоставляет два метода на форме, которые позволяют вам зацикливать скрытые и видимые поля независимо друг от друга: hidden_fields() и visible_fields(). Вот модификация предыдущего примера, в котором используются эти два метода:

{# Include the hidden fields #}
{% for hidden in form.hidden_fields %}
{{ hidden }}
{% endfor %}
{# Include the visible fields #}
{% for field in form. visible_fields %}
    <div>
        {{ field.errors }}
        {{ field.label_tag }} {{ field }}
    </div>
{% endfor %}

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

Многоразовые шаблоны форм

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

# In your form template:
{% include "form_snippet.html" %}

# In form_snippet.html:
{% for field in form %}
    <div>
        {{ field.errors }}
        {{ field.label_tag }} {{ field }}
    </div>
{% endfor %}

Если объект формы, передаваемый в шаблон, имеет другое имя в контексте, его можно псевдоименовать с помощью аргумента with тега include:

{% include "form_snippet. html" with form=comment_form %}

Если вы часто делаете это, вы можете подумать о создании пользовательского inclusion tag.

Дополнительные темы

Здесь описаны основы, но формы могут делать гораздо больше:

• Формсеты
  • Использование исходных данных с помощью набора форм
  • Ограничение максимального количества форм
  • Валидация форм
  • Проверка количества форм в наборе форм
  • Работа с заказами и удалением форм
  • Добавление дополнительных полей в набор форм
  • Передача пользовательских параметров формам набора форм
  • Настройка префикса набора форм
  • Использование набора форм в представлениях и шаблонах
• Создание форм из моделей
  • ModelForm
  • Модельные наборы форм
  • Встроенные наборы форм
• Активы формы (класс Media)
  • Активы как статическое определение
  • Media как динамическое свойство
  • Пути в определениях активов
  • Media объекты
  • Media на формах

См. также

The Forms Reference

Охватывает полный справочник API, включая поля форм, виджеты форм, а также валидацию форм и полей.

36 самых красивых CSS-форм, разработанных лучшими дизайнерами в 2022 году

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

Вот список красивых форм CSS с современным дизайном.

Контактная форма CSS V03

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

Информация / Загрузить демонстрацию

Красивая форма регистрации CSS V07

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

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

Информация / Загрузить демонстрацию

Регистрационная форма CSS V02

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

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

Информация / Загрузить демо

Reg Form v15

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

Информация / Загрузить демоверсию

Контактная форма v2

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

Информация / Загрузить демонстрацию

Красивая регистрационная форма CSS V18

В этой регистрационной форме CSS вы получаете аккуратный дизайн формы с местом для изображений. Если быть точным, эта форма использует изображения в качестве фона. Следовательно, убедитесь, что вы используете изображения, которые не мешают текстам полей формы. Аккуратный маркер дается, чтобы четко показать выбранное поле формы. Короче говоря, регистрационная форма V18 проста и удобна в использовании. Кроме того, вы можете использовать этот шаблон для любого бизнес-сайта благодаря его чистому дизайну.

Информация / Загрузить демоверсию

Контактная форма Colorlib

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

Информация / Загрузить демоверсию

Форма входа v1

Форма входа v1 — это интерактивная форма входа. Создатель этой формы использовал эффект наведения, чтобы предоставить пользователям уникальный опыт. Текстовые эффекты полужирного шрифта также используются для полей формы в форме входа. Если вы ищете подходящую форму для вашего современного веб-сайта, стоит попробовать эту форму. Вы можете использовать логотип вашей компании или элементы, связанные с вашим брендом, для элемента слева. Поскольку все эти эффекты сделаны полностью с использованием новейшего фреймворка HTML5 и CSS3, форма будет загружаться быстрее. Между каждым элементом дается достаточно места, чтобы у вас было больше места.

Информация / Загрузить демо

Reg Form v2

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

Информация / Загрузить демо

Reg Form v7

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

Информация / Загрузить демо

Регистрационная форма v3

Регистрационная форма v3 почти аналогична упомянутой выше форме V2. Поскольку и версия 2, и версия 3 принадлежат одному и тому же создателю, вы можете ожидать одинакового дизайна и качества кода. В этой форме пространства пропорциональны, поэтому у вас достаточно места для всех элементов. Большое пространство для изображений позволяет легко показывать изображения аудитории. Этот пропорциональный дизайн сделал эту форму одной из самых красивых форм CSS в этом списке. Поскольку это форма темной темы, буквы остаются белыми и увеличены для лучшей читаемости. Как и большинство других красивых CSS-форм в этом списке, эта также адаптирована для мобильных устройств.

Информация / Загрузить демо

Reg Form v25

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

Информация / Загрузить демо

Reg Form v16

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

Информация / Загрузить демо

Reg Form v12

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

Информация / Загрузить демонстрацию

Reg Form v11

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

Информация / Загрузить демо

Reg Form v13

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

Информация / Загрузить демо

Reg Form v20

Эта форма будет идеальным вариантом, если вы ищете красивые CSS-формы для своего сайта о красоте и моде. С минимальным дизайном и модной цветовой схемой эта форма является одним из уникальных образов в этой красивой коллекции форм CSS. Радиокнопки эффективно используются для указания выбранного поля формы и параметров. Для более привлекательного дизайна радиокнопок взгляните на нашу коллекцию радиокнопок Bootstrap. Поскольку этот шаблон формы создан с использованием новейших фреймворков HTML5, CSS3 и Bootstrap 4, он может легко обрабатывать другие сторонние элементы дизайна.

Информация / Скачать демо

Контактная форма v1

Контактная форма v1 почти аналогична форме входа v1, упомянутой выше. Если вы хотите, вы можете использовать обе формы на своем веб-сайте, чтобы добиться единообразия дизайна на всем веб-сайте. Поля формы в этой контактной форме полностью функциональны с внешнего интерфейса. Все, что вам нужно сделать, это позаботиться о внутренней части интеграции. Поскольку разработчик следовал структуре кода, используемой профессионалами отрасли, другие разработчики могут легко работать с этим шаблоном. Как и форма входа в V2, эта сделана исключительно с использованием фреймворка HTML5 и CSS3, поэтому вам не нужно беспокоиться о задержке и длительной загрузке.

Информация / Скачать демо

Форма входа 5

Форма входа 5 красочная. Если вы делаете красочный веб-сайт, эта контактная форма будет идеальным дополнением к вашему веб-сайту. Большинство пользователей предпочитают использовать вход через социальные сети и Google, чтобы не запоминать много паролей. Многие эксперты, обеспокоенные конфиденциальностью данных, рекомендуют вам использовать вариант входа в систему по электронной почте, поскольку вы не знаете всех деталей, которые веб-сайт получит из вашей учетной записи в социальной сети. После нескольких проблем с конфиденциальностью в Facebook лучше подумать о том, где вы используете опцию входа через социальную сеть. Что касается формы входа 5, у вас есть все варианты, размещенные в наиболее доступных местах. Вы можете использовать эту форму прямо на своем веб-сайте без каких-либо колебаний.

Информация / Загрузить демоверсию

Контактная форма v13

Если у вас есть магазин или офис, показать его на карте — лучший способ общаться с посетителями вашего сайта. Дизайн разделенного экрана этого шаблона дает вам достаточно места для отображения карты с одной стороны и формы с другой стороны. На карте также предоставляется полноэкранный режим, позволяющий пользователю четко видеть карту и взаимодействовать с ней. Разработчик интегрировал карту с Google Map, поэтому вам не нужно беспокоиться о внутренней части карты. Если вы концентрируетесь на своей местной аудитории, подобная контактная форма очень поможет вашему магазину. Говоря о магазинах и рекламных акциях, взгляните на наши бесплатные шаблоны электронной коммерции для красивых веб-сайтов с множеством полезных функций.

Информация / Скачать демо

Форма входа 13

Форма входа 13 на самом деле является регистрационной формой. Как и контактная форма v13, здесь также используется дизайн с разделенным экраном. Дизайн разделенного экрана дает вам более чем достаточно места для добавления изображения. Вы можете использовать это пространство изображений, чтобы показать некоторые из ваших фотографий, если вы используете его для веб-сайтов с фотографиями. Или вы можете показать несколько анимированных иллюстраций преимуществ, которые получит пользователь, зарегистрировавшись на вашем сайте. Поля формы поддерживают проверку поля, и при обнаружении ошибки в поле формы пользователю отображается сообщение. Эту форму можно использовать и для других целей. Разработчик сохранил структуру кода очень простой для более легкой настройки.

Информация / Загрузить демоверсию

Контактная форма v5

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

Информация / Скачать демо

Форма входа 9

Форма входа 9 — это модная форма, которую можно использовать как для веб-сайтов, так и для мобильных приложений. Создатель этой формы сделал ее адаптивной, чтобы ее можно было легко использовать на существующем адаптивном веб-сайте. Эффекты тени и глубины различают основные поля формы и фон. Простой дизайн формы позволяет легко разместить ее на любом веб-сайте. Особенно на минималистичных веб-сайтах эта форма сочетается лучше, чем любые другие формы. В нижней части формы вы можете связать форму регистрации. Но в демоверсии по умолчанию вы не получаете регистрационную форму. Так что это может быть что-то, что вы должны сделать сами, или вы можете просто использовать регистрационную форму, упомянутую в этом списке.

Информация / Загрузить демонстрацию

Контактная форма v3

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

Информация / Скачать демоверсию

Креативная форма входа

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

Информация / Загрузить демоверсию

Контактная форма v14

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

Информация / Загрузить демо

Контактная форма v10

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

Информация / Загрузить демо

Контактная форма v16

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

Информация / Загрузить демо

Контактная форма v11

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

Информация / Скачать демо

Контактная форма v9

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

Информация / Загрузить демоверсию

Форма входа v2

Форма входа v2 — это чистая форма входа, которую вы можете использовать для веб-сайтов и мобильных приложений. Разработчик этой формы предоставил вам возможность отображать и скрывать поле пароля. Как и контактная форма V11, упомянутая выше, эта также имеет градиентную цветовую схему для кнопки призыва к действию. В верхней части формы у вас есть место для добавления вашего логотипа. Центральное пятно на форме обеспечивает лучшую видимость логотипа. В нижней части формы у вас есть место для добавления ссылки на регистрационную форму. Говоря о логотипах, взгляните на нашу коллекцию макетов логотипов, чтобы продемонстрировать свой дизайн на фотореалистичных изображениях и объектах.

Информация / Скачать демо

Форма входа 4

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

Информация / Скачать демо

Форма входа v3

Форма входа v3 почти аналогична форме входа V4, упомянутой выше. Текстовые эффекты ввода в этой форме чистые и гладкие, поэтому пользователь получит интерактивный опыт. В верхней части формы входа у вас есть место для добавления вашего логотипа. Благодаря гибкому и адаптивному дизайну формы вы можете легко разместить свой логотип на этой форме. В демоверсии вы получаете фоновое изображение для просмотра на всю страницу. Но вы можете изменить или использовать его в зависимости от ваших потребностей. Эта форма дает вам опцию «Запомнить меня», которая позволяет пользователю войти в систему один раз и забыть об этом на своих доверенных устройствах.

Информация / Скачать демо

Форма входа 6

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

Информация / Скачать демо

Форма входа 12

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

Информация / Скачать демоверсию

Интерфейсный интерфейс Вдохновение Шаблоны контактных форм CSS-формы Шаблоны форм HTML-формы Формы входа Форма регистрации 11 августа 2022 г.

10 фрагментов кода для создания красивых форм

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

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

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

Кроме того, все они размещены бесплатно, поэтому вы можете копировать и играть с кодом по своему вкусу.

Набор инструментов веб-дизайнера

Неограниченные загрузки: шаблоны HTML и Bootstrap, темы и плагины WordPress и многое, многое другое!

HTML-шаблоны

3200+ шаблонов

Шаблоны Bootstrap

Более 2000 шаблонов

Шаблоны панели мониторинга

240+ шаблонов

темы WordPress

1450+ тем

Шаблоны информационных бюллетеней

270+ шаблонов

Веб-шрифты

13 500+ шрифтов

Начать загрузку прямо сейчас!

1. Материальный дизайн

Все знают о языке материального дизайна Google за последние несколько лет, когда он стал известен. Концепции материального дизайна были нацелены на приложения для Android, но быстро распространились в Интернете.

Если вам нравится минималистский стиль пользовательского интерфейса материалов Google, посмотрите на эту материальную форму, созданную Джоном Ульманном.

Работает на Sass и Pug для предварительной обработки CSS/HTML. Это также довольно легкая форма, и элементы дизайна материалов должны отображаться одинаково во всех браузерах.

Настоящий источник вдохновения для всех дизайнеров материалов.

2. Под водой

Совершите путешествие в океан в этой уникальной контактной форме, выполненной в водном стиле.

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

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

3.

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

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

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

4. Elegant Contact

Благодаря значкам Font Awesome и базовому адаптивному стилю эта контактная форма действительно уникальна.

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

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

И если вы ищете что-то немного уникальное, попробуйте добавить в смесь другой значок.

5. Tiny Login

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

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

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

6. Комбинированный вход и регистрация

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

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

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

7. Контактная доска для меловой доски

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

Кроме того, деревянная рамка помогает продавать эту вещь как настоящую.

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

8. Оформление заказа кредитной картой

Я видел много форм оформления заказа, но этот дизайн от Фабио Оттавиани, пожалуй, лучший из тех, что я когда-либо встречал.

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

9. Пользовательская регистрация

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

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

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

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

10. Плавающие этикетки

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

Взгляните на эту форму с плавающей меткой, работающую на CSS3 и Compass.

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

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

Чем больше вы изучаете шаблоны проектирования, тем больше идей у ​​вас появляется для реализации собственных проектов. И CodePen — отличный сайт для сбора этих идей.

Как создавать привлекательные веб-формы (и вдохновение для начала) —

Логотипы, веб-сайты и многое другое…

Логотипы, веб-сайты, обложки книг и многое другое…

Получить дизайн

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

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

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

Итак, какие приемы, компоненты и стили должны использовать дизайнеры при создании форм? Я здесь, чтобы поделиться. 🙂

Перед эстетикой

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

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

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

Компоненты формы с HTML и CSS

Внешний вид элементов формы HTML по умолчанию, как показано в Windows 7 в браузере Firefox.

Имейте в виду, что ваш дизайн будет преобразован в HTML/CSS и, возможно, в Java Script. В HTML есть несколько доступных компонентов формы:

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

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

Тем не менее, эти типы элементов не должны быть ограничены, по крайней мере, с помощью Javascript.

Компоненты форм с Javascript

Элементы форм в стиле HTML/CSS все больше и больше заменяются виджетами Javascript, которые обеспечивают свободу творчества.

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

Дизайн следует за удобством использования

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

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

Приступая к разработке веб-сайта, сосредоточьтесь на приоритетах и ​​целях клиента. Спросите себя:

• Что важнее для клиента: стиль или простота?
• Повысит или понизит удобство использования в данном конкретном случае использование несистемных элементов?

Создайте форму, как если бы вы разговаривали

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

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

Различные типы и стили форм

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

Одностраничные формы

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

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

Пошаговые формы

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

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

Формы домашней страницы

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

Формы нижнего колонтитула

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

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

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

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

Формы поиска

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

Формы визуальной метафоры

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

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

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