Поле формы ColorField

Поле формы ColorField применяется для создания поля ввода цвета. При отображении формы оно преобразуется в HTML-элемент <input type="color">, который позволяет пользователю выбрать цвет из палитры. Первым параметром передаётся имя поля, которое будет использоваться для доступа к значению. Вторым параметром передаётся подпись поля, отображаемая рядом с элементом ввода.

Синтаксис

from wtforms import ColorField

field = ColorField(label, [validators])

Пример

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

from flask import Flask, render_template
from flask_wtf import FlaskForm
from wtforms import ColorField, SubmitField

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret'

class ColorForm(FlaskForm):
	color = ColorField('Choose color')
	submit = SubmitField('Send')

@app.route('/', methods=['GET', 'POST'])
def index():
	form = ColorForm()
	if form.validate_on_submit():
		return f"Selected color: {form.color.data}"
	return render_template('index.html', form=form)

Давайте создадим шаблон для отображения формы:

<form method="post">
	{{ form.csrf_token }}
	<p>{{ form.color.label }} {{ form.color }}</p>
	<p>{{ form.submit }}</p>
</form>

Результат выполнения кода при выборе цвета #ff0000:

Selected color: #ff0000

Пример

Давайте зададим значение по умолчанию для поля цвета:

from flask import Flask, render_template
from flask_wtf import FlaskForm
from wtforms import ColorField, SubmitField

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret'

class ColorForm(FlaskForm):
	color = ColorField('Choose color', default='#00ff00')
	submit = SubmitField('Send')

@app.route('/', methods=['GET', 'POST'])
def index():
	form = ColorForm()
	if form.validate_on_submit():
		return f"Selected color: {form.color.data}"
	return render_template('index.html', form=form)

Давайте создадим шаблон для отображения формы:

<form method="post">
	{{ form.csrf_token }}
	<p>{{ form.color.label }} {{ form.color }}</p>
	<p>{{ form.submit }}</p>
</form>

Результат выполнения кода при отправке формы без изменения цвета:

Selected color: #00ff00

Смотрите также

класс Form,
который представляет базовый класс формы
метод validate_on_submit,
который проверяет отправку и валидацию формы
атрибут data,
который хранит значение поля
поле StringField,
который создаёт текстовое поле ввода