Flask-WTF

Flask-WTF是简化了WTForms操作的一个第三方库。

WTForms表单的两个主要功能是验证用户提交数据的合法性以及渲染模板。

当然还包括一些其他的功能:CSRF保护,文件上传等。安装Flask-WTF默认也会安装WTForms,安装Flask-WTF如下:

第六章  Flask-WTF(二)

回顾表单:

input> 标签

????<input> 标签根据不同的 type 属性,可以变化为多种形态。

<form action='url'method='get/post'>
    <input type='text'/>
    <input type='password'/>
    <input type='radio'/>
    <input type='checkbox'/>
    <textarea></textarea>
<input type='submit'/>
</form>

点击提交(type='submit')时,form表单会自动把name属性值作为键名,value属性值作为键值,组成键值对形式,

然后form表单会按指定的method方式吧数据发送到指定的ur1路径去。

我们大体介绍一下:input的type属性

radio:

Radio 对象:代表 HTML 表单中的单选按钮。

在 HTML 表单中 <input type="radio"> 每出现一次,一个 Radio 对象就会被创建。

单选按钮是表示一组互斥选项按钮中的一个。当一个按钮被选中,之前选中的按钮就变为非选中的。

当单选按钮被选中或不选中时,该按钮就会触发 onclick 事件句柄。

password :

Password 对象代表 HTML 表单中的密码字段。

HTML 的 <input type="password"> 标签在表单上每出现一次,一个 Password 对象就会被创建。

该文本输入字段供用户输入某些敏感的数据,比如密码等。当用户输入的时候,他的输入是被掩盖的(例如使用星号*),以防止旁边的人从他背后看到输入的内容。不过需要注意的是,当表单提交时,输入是用明文发送的。

与类型为 "text" 的元素类似,当用户改变显示值时,它会触发 onchange 事件句柄。

Text :

Text 对象代表 HTML 表单中的文本输入域。

在 HTML 表单中 <input type="text"> 每出现一次,Text 对象就会被创建。

该元素可创建一个单行的文本输入字段。当用户编辑显示的文本并随后把输入焦点转移到其他元素的时候,会触发 onchange 事件句柄。

button: 

Button 对象代表 HTML 文档中的一个按钮。我认为是一种多选按钮

该元素没有默认的行为,但是必须有一个 onclick 事件句柄以便使用。

在 HTML 文档中 <input type="button"> 标签每出现一次,一个 Button 对象 就会被创建。

注意

1.radio与button的差异

    <label>
    性别: 男<input type="radio" name="a" value="0"><input type="radio" name="a" value="1">
    </label>
        <label>
    年龄: 成年<input type="radio" name="b" value="0"> 未成年<input type="radio" name="b" value="1">
    </label>

第六章  Flask-WTF(二)

在radio中,从属相同的name具有排他性,从属不同的name独立性。从属不同的form表单也具有独立性。

<form>
        是否本科: 是<input type="radio" name="a" value="0"> 不是<input type="radio" name="a" value="1">
    </label>
</form>

第六章  Flask-WTF(二)

 

而button适用于多选问题

2.<label>

    <label>姓名
        <input name="text1" type='text'/>
    </label>

一般都会被label包裹起来

 

3.post与get请求

method提交方式:

get:

数据会显示在地址栏,显示的形式是ur1?数据数据是键值对形式存在,多个键值对之间使用&符号连接,?号最多出现一次,&可以出现多次。

post:

数据不在地址栏中显示,可以在network监听工具中监听,在请求头中数据中不会出现?和&符号,正常倩况下是看不到这个数据的。

<form action='/' method='get或者post'>
    <label>姓名
        <input name="text1" type='text'/>
    </label>
    <br>
    <label>密码
        <input name="pass" type='password' />
    </label>
    <br>
    <label>
    性别: 男<input type="radio" name="a" value="0"><input type="radio" name="a" value="1">
    </label>
        <label>
    年龄: 成年<input type="radio" name="b" value="0"> 未成年<input type="radio" name="b" value="1">
    </label>
    <br>
    <label>
        <input name="checkboxx" type='checkbox'/>
    </label>

    <input type='submit'/>
</form>
get或者post

相关文章: