Flask-WTF
Flask-WTF是简化了WTForms操作的一个第三方库。
WTForms表单的两个主要功能是验证用户提交数据的合法性以及渲染模板。
当然还包括一些其他的功能:CSRF保护,文件上传等。安装Flask-WTF默认也会安装WTForms,安装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>
在radio中,从属相同的name具有排他性,从属不同的name独立性。从属不同的form表单也具有独立性。
<form> 是否本科: 是<input type="radio" name="a" value="0"> 不是<input type="radio" name="a" value="1"> </label> </form>
而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>