基础知识 submit 表单 密码输入框 网站 方法 我们 函数
html 表单
表单的标签是 <form>,用于给网站的后台提交数据。提交的数据格式原本是什么样不太清楚,以 python 的 flask 框架来看,我从表单中得到的数据是一个字典(flask.request.form),可以从中获取到表单中提交上来的数据。字典的键是各个表单元素的 name 属性的值,值则是用户的输入。
■<form>
form 本身具有一些属性,比如 action 指定了一个 url,就是当把表单中的数据提交上去后由 url 指定的程序来处理这些数据。这个指定的程序可以是一个. php 脚本之类的文件,也可以是比如 flask 框架中的一个路径处理函数。其他属性还有:
action 指定了一个程序来处理
method 指定这个表单的提交方法,可选 post,get 等
target 指定 action 中的 url 的目标
name 指定一个表单的名称
等等
■<input>
基本的表单组件很多都是 input 标签,不同的是其 type 属性的值。type 属性的值决定了这个表单元素到底是个什么东西。比如:
<input type="text"value="default_text"name="test_text"maxlength=" 设置输入最长长度 "size=" 设置本身输入框长度 "/> 一个明文输入框,默认值是 default_text
<input type="password"name="test_passwd"maxlength="..."size="..."/> 一个密码输入框
<input type="submit"value=" 按钮上显示的文字 "name="test_submit"/> 一个提交按钮,按下提交按钮后提交整个表单的数据到服务器,和 submit 类似的,若 type 是个 reset 则是个清空按钮
<input type="radio"name="group1"value="radio_info"checked>some label text</input> 一个单选项,对于多个单选项,所有 name 一样的属于同一个组,一个组的所有选项只能有一个被选中,value 是提交数据时该单选项的值,checked 标识了该选项被选中,如果同一组内多个 radio 都有 checked 的话以最后设置的那个为准。某个 radio 没有选的话就不会传这个元素的键值对到后端去。
<input type="checkbox"name="group2"value="check_info"checked>some label text</input> 一个复选框,属性和 radio 类似,但是不存在一个组只能选一个,value 属性写的一些信息,作为这个复选框元素的值随其他数据一起提交到后端。没有选的话同样不传数据
<input type="number"name="quantity"min="1"max="5"> 一个数字输入框,可以设置最小值和最大值
<input type="file"id="file_id"name="file_name"> 构造一个文件上传的部件(具体怎么上传,如何和后端互动还不清楚)
以上是经典 html 中的一些 input 类型,html5 中支持更多类似于日期,颜色等的 input。http://www.w3school.com.cn/html/html_form_input_types.asp
此外,input 标签还有很多单独的属性用来设置它的一些特性,比如上面的单选多选框中提到的 checked 属性,除了 checked 还有:
readonly 设置某个 input 只读不可编辑
disabled 设置某个 input 不可用不可编辑
size,maxlength 这些属性上面提到过了,就不说了
■其他表单元素
上面提到了 input,input 已经有很多表单元素的形式了,除了那些 input,我们还有以下一些元素
<select> 下拉列表,里面要添加 <option>,option 可以设置 selected,value 等属性,提示用文字写在 option 里面
<select multiple> 多选框列表
- <select name="cars">
- <option value="volvo">
- Volvo
- </option>
- <option value="saab">
- Saab
- </option>
- <option value="fiat">
- Fiat
- </option>
- <option value="audi">
- Audi
- </option>
- </select>
<textarea> 多行文本框,可以设置属性诸如 name,rows,cols 等(rows 和 cols 指定初始状态的行列数),也可以设置 disabled,readonly,maxlength 等
<button> 独立按钮,可以设置 onclick 等属性が,反正要用 jQuery 的话就无所谓 onclick 了
【前端】 html 基础知识 表单
来源: http://www.bubuko.com/infodetail-2011425.html