整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML的表单标签

TML:完成页面的内容展示

CSS:完成页面样式的控制,美化页面,完成页面的布局。

表单:用于采集用户输入的数据。用于和服务器进行交互。

form:用于定义表单的。可以定义一个范围(代表用户采集数据的范围)

属性:action:指定提交数据的url(指的就是把数据提交到哪里)

method:指定提交方式

分类:一共有7种,2种比较常用。

get:1.请求参数会在地址栏显示

2.请求参数的长度是有限制的。

3.请求不安全

post:1.请求参数不会在地址栏显示,会封装在请求体中。

2.请求参数的长度没有限制

3.较为安全

表单里面的数据要想被提交,必须指定它的name属性

表单项标签

input:可以通过type属性值,改变元素展示的样式。

type属性:text:文本输入框,默认值

placeholder:指定输入框的提示信息,当输入框的内容发生变化,会自动情况提示信息。

password:密码输入框

radio:1.单选框(要想让多个单选框实现单选的效果,则多个单选框的name属性值必须一样)

2.一般会给每一个单选框提供value属性,指定其被选中后提交的值。

3.checked属性可以指定默认值

checkbox:复选框:

1.一般会给每一个单选框提供value属性,指定其被选中后提交的值。

2.checked属性可以指定默认值

file:文件选择框

hidden:隐藏域,用于提交一些信息

按钮:

submit:提交按钮。可以提交表单

button:普通按钮

image:图片提交按钮

src属性指定图片的路径

label:指定输入项的文字描述信息

注意:lable的for属性一般会和input的id属性值对应。如果对应了,点击lable区域,会让input输入框获取焦点。


select:下拉列表

子元素:option,指定列表项

textarea:文本域

eform 是一个用于创建 Web 表单的 Python 库,提供了许多用于处理表单数据及其验证和呈现的功能。 deform 帮助程序员创建简单或复杂的 Web 表单,并使其易于与 Pyramid、Django 和 Flask 等 Python Web 框架集成。

此外,deform 还提供了许多支持组件,如日期选择器、下拉列表、多选框、单选按钮等,这些组件可以帮助开发人员快速创建各种类型的 Web 表单。

安装

使用 pip 进行安装:

pip install deform

示例代码

"""Self-contained Deform demo example."""
from __future__ import print_function

from pyramid.config import Configurator
from pyramid.session import UnencryptedCookieSessionFactoryConfig
from pyramid.httpexceptions import HTTPFound

import colander
import deform


class ExampleSchema(deform.schema.CSRFSchema):

    name = colander.SchemaNode(
        colander.String(),
        title="Name")

    age = colander.SchemaNode(
        colander.Int(),
        default=18,
        title="Age",
        description="Your age in years")


def mini_example(request):
    """Sample Deform form with validation."""

    schema = ExampleSchema().bind(request=request)

    # Create a styled button with some extra Bootstrap 3 CSS classes
    process_btn = deform.form.Button(name='process', title="Process")
    form = deform.form.Form(schema, buttons=(process_btn,))

    # User submitted this form
    if request.method == "POST":
        if 'process' in request.POST:

            try:
                appstruct = form.validate(request.POST.items())

                # Save form data from appstruct
                print("Your name:", appstruct["name"])
                print("Your age:", appstruct["age"])

                # Thank user and take him/her to the next page
                request.session.flash('Thank you for the submission.')

                # Redirect to the page shows after succesful form submission
                return HTTPFound("/")

            except deform.exception.ValidationFailure as e:
                # Render a form version where errors are visible next to the fields,
                # and the submitted values are posted back
                rendered_form = e.render()
    else:
        # Render a form with initial default values
        rendered_form = form.render()

    return {
        # This is just rendered HTML in a string
        # and can be embedded in any template language
        "rendered_form": rendered_form,
    }


def main(global_config, **settings):
    """pserve entry point"""
    session_factory = UnencryptedCookieSessionFactoryConfig('seekrit!')
    config = Configurator(settings=settings, session_factory=session_factory)
    config.include('pyramid_chameleon')
    deform.renderer.configure_zpt_renderer()
    config.add_static_view('static_deform', 'deform:static')
    config.add_route('mini_example', path='/')
    config.add_view(mini_example, route_name="mini_example", renderer="templates/mini.pt")
    return config.make_wsgi_app()

总体而言,如果你需要在 Python Web 应用程序中处理表单,Deform 是一个非常好用的库。它提供了许多有用的功能,并且易于使用和集成到现有的 Web 框架中。

演示地址:https://deformdemo.pylonsproject.org/

Github 地址:https://github.com/Pylons/deform

一篇文章我们说了单行文本框和多行文本框,今天呢我们继续看一下表单的其它控件:单选框、复选框、下拉框。

(1)单选框和复选框

在我们表单页面中,经常会有选择性别或者选择爱好这类的内容,使用选择框是一个好主意,html中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选。

使用语法:

单选框:<input type="radio" value="值" name="名称" checked="checked"/>

复选框:<input type="checkbox" value="值" name="名称" checked="checked"/>

详细讲解:

1、type: 当 type="radio" 时,控件为单选框;当 type="checkbox" 时,控件为复选框

2、value:提交数据到服务器的值(后台程序使用)

3、name:为控件命名,这里要注意同一组的单选按钮,name 取值一定要一致(具体可见下边的参考练习)。

4、checked:当设置 checked="checked"(也可以直接简写成checked) 时,该选项被默认选中

使用练习:

我们创建一个表单,表单里边包含姓别(男、女)选择的单选框,默认选中男以及爱好(唱歌、打游戏、绘画、旅游)选择的多选框,默认选中唱歌。具体的代码如下图所示:

在网页中的显示效果就如下图所示:

(2)下拉框

下拉框也是我们常用的一个表单控件,多用于选择城市地区等。

使用语法:

<select>

<option value="向服务器提交的内容" selected="selected">网页显示的内容</option>

</select>

详细讲解:

1、option:option为select下拉子元素,可以有一个或多个,写法类似ul和li,其中的value内容为提交数据到服务器的值(后台程序使用)

2、selected:当设置 selected="selected"(也可以直接简写成selected) 时,该选项被默认选中

使用练习:

我们创建一个表单,表单里边包含一个城市的下拉框,下拉框中有北京、上海、天津这三个城市,其中默认选中天津。具体的代码如下图所示:

在网页中的显示效果就如下图所示:

好了,本篇文章就先给大家介绍这几个表单控件的语法以及使用,下篇文章我们将介绍按钮的语法及使用以及完整的表单练习演示,记得平时要多加练习才是王道。

每日金句:做人要像竹子一样每前进一步,都要做一次小结。喜欢我的文章的小伙伴记得关注一下哦,每天将为你更新最新知识。