Формы Колбы – Принимать Ввод Пользователя С Помощью Форм Колбы

Автор оригинала: Pankaj Kumar.

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

Основы форм колб

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

Типичным примером форм является:

Здесь, когда пользователь запрашивает страницу в первый раз – он получает ее с помощью того, что мы называем ” GET метод .”

После заполнения формы данные пользователя отправляются на сервер с помощью метода POST .

Мы немного подробнее узнаем об этих двух методах.

Эти формы отображаются пользователю с помощью шаблонов с использованием атрибута HTML.

Пример HTML-формы выглядит следующим образом:


    Field1 
    Field2 
    Field3

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

Метод ПОЛУЧЕНИЯ или отправки данных

Каждый из этих методов, также называемых HTTP-методами, выполняет определенное действие с ресурсами сервера. Каждый метод соответствует отдельной задаче. В этой статье мы рассмотрим два из них, метод GET и метод POST.

GET – Этот метод извлекает определенную информацию из веб-сервера (только для ее просмотра)
POST – Этот метод отправляет данные от пользователя на сервер.

Поэтому, например, рассмотрим приложение Instagram.

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

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

Аналогично, рассмотрим веб-сайт блога. Когда вы читаете блог на веб-сайте, это делается с помощью метода GET . Когда вы пишете и публикуете свой блог, это делается с помощью метода POST .

Создание вашей Первой формы колбы

Теперь мы создадим простую форму в нашем приложении flask

1. Кодирование файла колбы

Рассмотрим следующий код:

from flask import Flask,render_template,request

app = Flask(__name__)

@app.route('/form')
def form():
    return render_template('form.html')

@app.route('/data/', methods = ['POST', 'GET'])
def data():
    if request.method == 'GET':
        return f"The URL /data is accessed directly. Try going to '/form' to submit form"
    if request.method == 'POST':
        form_data = request.form
        return render_template('data.html',form_data = form_data)


app.run(host='localhost', port=5000)

Здесь,

Представление Форма отображает HTML-форму Шаблон для пользователей
Когда пользователь отправляет форму, данные формы отправляются (как часть объекта запроса) | в представление Данных с помощью метода POST. Представление
Data затем воссоздает элементы данных формы в переменную form_data и отправляет их в data.html шаблон для отображения.

Запрос .форма имеет словарь структуру:

form_data = {
'key1(field1_name)' : 'value1(field1_value)',
'key2(field2_name)' : 'value2(field2_value)',
.
.
}

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

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

2. Файлы шаблонов

Вот шаблон формы-” form.html ” будет:


    Name 
    City 
    Country

В data.html отобразит данные формы:

{% for key,value in form.items() %}
 {{key}}
 {{value}}
{% endfor %}

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

3. Реализация Кодекса

Теперь запустите сервер и проверьте

Нажмите отправить и посмотрите

Кроме того, когда вы попытаетесь перейти по URL-адресу “/data” непосредственно из вашего браузера, вы получите эту веб-страницу с помощью метода GET , который отобразит ошибку, поскольку данные формы отсутствуют.

Вывод

Вот и все, ребята !! Все дело было в Формах в Колбе. Мы узнаем больше о таких темах в следующих статьях!!

До тех пор счастливого кодирования 🙂