html表单

1 配置 可以使用Flask-WTF来处理web表单，在使用之前要先配置下，打开config.py，编辑添加如下内容 WTF_CSRF_ENABLED = True SECRET_KEY = 'you-will-never-guess' WTF_CSRF_ENABLED设置为True主要是开启CSRF保护，SECRET_KEY是为了实现CSRF保护，Flask-WTF需要应用程序去配置一个加密密钥。Flask-WTF使用这个密钥去生成加密令牌用于验证请求表单数据的真实性， 注：为了提高安全性，密钥应该存储在一个环境变量中，而不是嵌入到代码中 。配置完成后要通知Flask去加载这个配置文件，编辑app/__init__.py，添加如下内容 from flask import Flask app = Flask(__name__) app.config.from_object('config') from app import views 2 表单类 使用Flask-WTF时，每个web表单是由继承自 Form 类的子类来展现的。该类在表单中定义了一组表单域，每个都表示为一个对象。每个表单域都可以连接到一个或多个 validators ； validators 是一个用于检查用户提交的输入是否合法的函数，app/forms.py 专门用来存放表单类，用例 from flask.ext

(接webok项目) 1 pom.xml配置 <?xml version="1.0" encoding="UTF-8"?> < project xmlns = " http://maven.apache.org/POM/4.0.0 " xmlns: xsi = " http://www.w3.org/2001/XMLSchema-instance " xsi: schemaLocation = " http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd " > < modelVersion > 4.0.0 </ modelVersion > < groupId > org.example </ groupId > < artifactId > webok </ artifactId > < version > 1.0-SNAPSHOT </ version > < packaging > war </ packaging > < properties > < project.build.sourceEncoding > UTF-8 </ project.build.sourceEncoding > < maven.compiler.source > 13 </ maven

1.关于表单 表单是一个包含表单元素的区域。<form></form> 表单元素是允许用户在表单中(比如文本域、下拉列表、单选框、复选框)输入信息的元素。 2.输入 input—— type可选值：text(文本域)、radio(单选框)、checkbox(复选框)、password(密码暗文输入)、reset(重置文本框) name:用于后台程序使用 value:默认值 <form> First name: <input type="text" name="firstname" /> <br /> Last name: <input type="text" name="lastname" /> </form> 3.表单的动作属性和确认按钮 点击确认后，表单的内容会被传送到另一个文件，action定义了目的文件的文件名 <form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form> 4.下拉列表 selected：默认选中 multiple="multiple" 表示可多选 <form> <select name="cars">

1.用户名和密码的表单 Code: <form> 姓名: <input type="text" name="FirstName"> <br /> 密码: <input type="password" name="SecondName"> </form> 运行效果如下: 姓名: 密码: 说明: 表单是一个包含表单元素的区域, 表单使用表单标签(<form>)定义. 表单元素是允许用户在表单中(比如:文本域,下拉列表,单选框,复选框等等)输入信息元素 2. 单选按钮(Radio Buttons) Code: <form> 姓别: <input type=”radio” name=”sex” value=”男">男 <input type=”radio” name=”sex” value=”女">女 </form> 运行效果如下: 姓别: 男 女 说明: 只能从中选取其一 3. 复选框 Code: <form> <input type=”checkbox” name=”bike” />I have a bike <br /> <input type=”checkbox” name=”bike” />I have a car </form> 运行效果如下: I have a bike I have a car 4. 按钮 Code: <form> <input type=”button”

表单的标记<form></form> 属性： 　　name：表单的名字 　　action=“url” 提交地址 　　method 提交的方式 　　　　get 　　　　post 　　target 在什么位置打开 常用的表单元素 　　1.<input type="#" name="">: 　　　　　　text：文本框 　　　　　　password：密码框 　　　　　　radio：单选框 　　　　　　checkbox：复选框 　　　　　　file：文件域 　　　　　　submit：提交按钮 　　　　　　reset：重置按钮 　　　　　　button：普通按钮 　　　　　　image：图像域按钮 　　　　　　hidden：隐藏域　　 text文本框 　　<input type="text" value="你好" > 　　输入的类型 初始值 　　placehold=字体变虚且可直接输入 <form action="sss" name="form1" method="get"> <input type="text" value="admin" placeholder="请输入用户名" name="login" > <input type="password" value="123456" placeholder="请输入密码" name="pwd"> <input type="submit"

form表单：<form action="" method=""> action 代表提交地址 method 是提交方式（分加密不加密）get:会在地址中显示提交内容（一般作为测试用）post 不会在地址中显示提交内容 常用表单属性 <input type="" name="" value=""/> type的值： text 文本输入框 password密码输入框 reset 重置按钮 number数值输入框 date 日期选择框 radio单选框 checkbox多选框 select标签 下拉选择菜单 <select name="" id=""> <option value=""></option> </select> 多行文本框 <textarea name="" id="" cols="" row=""></textarea> 输入提示信息属性 placeholder=“请输入...” 样式修改使用选择器例：iput::-webkit-input-placeholder{} 必填项提示：required input：checked 被选中时 去除焦点框：outline:none 所有项目必须放在form标签中 来源： https://www.cnblogs.com/qdxiaochong/p/9281630.html

表单是用来交互的，接收浏览器端的数据 语法：<form name="" action="" method=""> 各种控件..... </form> 表单属性 name 表单标识 action表单数据提交给处理数据的页面 method表单提交方式 有post和get 默认get get方式 通过地址传输数据 不能传递敏感数据， 不能传递大量数据，最大1KB 不能传递附件 post方式 将数据传递给处理程序 相对安全 可以传递大量数据 可以传递附件 控件介绍 1、单行文本框 语法：<input type="text" name="" value="" size="" maxlength=""/> 属性：name单行文本框的标识 size文本框宽度 单位字符 maxlength文本框最多能输入多少字符，超过则无法输入 value 文本框的初始值 2、密码框 语法：<input type="password" name="" value="" size="" maxlength=""/> 属性：name 密码框的标识 value 密码框的初始值 size 密码框的宽度，单位字符 maxlength 密码框最多能输入的字符，超过无法输入 readonly只读属性，可以选中，不能修改 disabled 不能选中，也不能修改 3、单选框 语法：<input type="radio" name=

HTML表单和输入 1、 HTML表单用于收集不同类型的用户输入 2、 表单是一个包含表单元素的区域 3、表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。 4、表单使用表单标签 <form> 来设置 HTML表单：输入元素 1、多数情况下被用到的表单标签是输入标签（<input>）。<input>元素是最重要的表单元素 2、 输入类型是由类型属性（type）定义的 。大多数经常被用到的输入类型如下 ⑴文本域： 文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域 ⑵密码字段： 密码字段通过标签<input type="password">来定义，密码字段字符不会明文显示，而是以星号或圆点替代 ⑶单选按钮： 表单单选框选项通过标签<input type="radio">来定义 ⑷复选框： 复选框通过标签<input type="checkbox">来定义，用户需要从若干给定的选择中选取一个或若干选项 ⑸提交按钮： 提交按钮通过标签<input type="submit">来定义 ⑹下拉框： 下拉框通过标签<select>来定义 注： 1、<input>元素在<form>元素中使用

目录 表单标签 1. form 标签 2. 表单控件 2.1 登录框 2.2 单选按钮 2.3 多选按钮 3. select 标签 4 文件上传 5. textarea 标签 6. 按钮 7. 隐藏域 8. 图片 9. 滑动条 10. 取色 11. 数字 12. 日期 13. email 表单标签 1. form 标签 <!-- form 标签：划定一个表单区域 action: 数据的提交地址 method: 提交方式 get: （默认方式）通过 url 地址传输数据，数据会显示在 url 地址栏中，相对来说不安全 传输数据有大小限制，不同浏览器传输的数据大小不同 post: 数据不通过 url 地址传参，相对来说较安全 数据传输没有具体的大小限制 一般表单指定使用 post 方式提交数据 enctype: 如果表单当中有文件上传，必须添加这个属性 指定属性值为 multipart/form-data 用于文件转码 --> <form action="" method="post" enctype="multipart/form-data"></form> 2. 表单控件 type 的参数 释义 text 单行的输入字段，可输入文本，默认宽度为 20 个字符 password 密码框 radio 单选按钮 checkbox 多选按钮 file 输入字段和 "浏览"按钮，供文件上传

href是链接标签的核心属性，属性值可以是一个跳转的地址 <a href="//www.baidu.com/">GO!百度</a>，适用于任何带有路径的地址 href里面所有的内容就是路径，绝对路径：从盘符开始，然后依次往下查找。相对路径：从当前文件开始，如果下一级目录就直接写文件夹名，上一级用、、/表示 form核心标签只有提交功能，没有任何样式。action提交的地址通常为服务端的地址，如果不写默认本页提交。method的提交方式是get/post，如果不写为get提交。 CSS的使用方式：1 行内样式（内联样式）<标签style="属性名1：属性值1；属性名2：属性值2；.... "></标签> 2页面样式：在head标签里增加一个子标签</style> 选择器{ 属性名1：属性值1； 属性名2：属性值2； .... } 3.外部文件（外部样式表） 在head标签里面增加一个子标签 <link rel="stylesheet" href="css文件的路径" /> 4.外部导入样式 主要用在样式初始化。因为有一些标签有自己的样式，我们需要清空，方便自己计算 css------选择器 ID选择器 使用id选择器：在元素上面增加一个id属性,id属性的属性值不用用数字开头 一个页面中只能有一个id属性值 css中id选择的表示方法用 # 表示 class选择器