Form 表单
表单用于向服务器传输数据，从而实现用户与Web服务器的交互,表单是一个容器,能够包含input textarea select fieldset和label标签.
- Form表单提交数据的几个注意事项:
- form需要环绕在需要提交的各种标签外围
- form提交的数据提交到哪里去,需要用form标签的action属性规定,一般是一个地址
- 数据需要组织起来,采取类似于键值对的方式提交,也就是input一定要有个name属性,即后端拿到的字典的键,对应的值就是其中的值
- 对于选择类型的input,需要在input标签里配上值,以表示选择该选项的值,显示的选项只起到提示的作用
- 选择类型的input,name属性相同的为一组
- select标签的name也是键,下拉菜单里的每个option里的value就是对应这个键的值,一般值都用数字或者字符,不要用中文
一个表单相当于一个大的容器,每一个input或者select表示一个键和对应的值.在提交表单之后,表单就会将其中的所有用于交互的标签组织成数据发到指定的地址和端口,被相应的应用程序拿到,之后就可以针对该数据进行操作.不了解其中元素的作用,就无法了解form表单的属性,所以先来看其中的元素属性,再回头看form元素的属性
input 标签
先看一下input的详细用法:
| input标签属性 | ||
| type属性 | text | 单行文本输入框,输入的内容就是提交的值 |
| password | 密码输入框,输入的内容会被圆点遮蔽,输入的内容就是提交的值 | |
| 输入电子邮件,如果输入的不是电子邮件,浏览器会进行验证,可以通过form的属性来控制开关浏览器校验 | ||
| radio | 单选框,name属性相同的单选框属于同一组,需要设定value属性 | |
| checkbox | 复选框,name属性相同的单选框属于同一组,需设定value属性 | |
| file | 文件 | |
| button | 普通按钮,默认没有任何事件,常用JS绑定事件 | |
| reset | 重置按钮,如果表单内的元素有设置过默认值,会将当前form内的全部内容恢复成默认. | |
| submit | 提交按钮,会将该表单内的全部数据提交到form标签的action属性中的地址内 | |
| date | 日期 | |
| datetime | 时间 | |
| hidden | 单元格竖跨多少列,相当于竖向合并,但要把下一行的内容减少响应的数量 | |
| name属性 | name=键名 | 每一个input的name,就是其数据对应的键名 |
| value属性 | value=值 | 提交表单时键对应的值,对于不同类型的input,值是不同的. |
| 按钮类型 | 为button,reset和submit的时候,为按钮上显示的文字,而按钮本身的动作另外有事件,与value无关 | |
| 文本类型 | text,password,hidden三种类型来说,value是默认的初始值,如果不填入其他值,则会提交value的值,如果填入值,则按照填入的提交 | |
| 选项类型和文件类型 | 为radio和checkbox的时候,必须设置value,其值就是选项被选中的时候提交的值.对于文件类型,就是后端需要寻找的文件名的值 | |
| checked属性 | 表示默认选中 | 用于radio和checkbox类型,写法为checked=”checked” |
| readonly属性 | 表示只读 | 用于text和password,将框体改为只读,用户只能看到显示的默认值,经常用于用户提交表单时,通过JS修改属性,锁住表单的一部分.写法为readonly=”readonly” |
| disabled属性 | 表示该选项不可用 | 可用于所有类型的input元素,该input元素会变色而且无法使用,用法是disabled=”disabled” |
注意,如果input为file类型,则必须在form标签里指定method =”post”,get与post是HTTP协议的请求.methon属性不写,默认是get.还需要加enctype=”multipart/form-data”
placeholder=”占位值”也可以用于input标签,会显示占位值,但如果和value一起使用,value的优先级较高.
select 标签
select标签用于下拉菜单的选择,用optgroup标签来给选项分组,用option标签来标识具体选项,注意,每一个option标签都要加上value属性,以表示选择的值
<label for="pro">选择区域</label>
<select name="province" id="pro" multiple="multiple" size="8">
<optgroup label="beijing">
<option value="0">hd</option>
<option value="1">dc</option>
<option value="2">xc</option>
<option value="3">hd</option>
<option value="4">tx</option>
</optgroup>
<optgroup label="shanghai">
<option value="10">ja</option>
<option value="11">hp</option>
<option value="12" selected="selected">bs</option>
<option value="13">pt</option>
<option value="14">lg</option>
</optgroup>
<option value="20">hk</option>
<option value="21">gz</option>
<option value="22">saner</option>
<option value="23">sitong</option>
</select>
select的name属性一定要有,因为下拉菜单最终是只选择一项,name就是选项对应的键,而option的value就是选项对应的值.label标签用于给指定的交互元素添加说明,其for属性一定要等于交互元素的id.
multiple属性与size属性常搭配使用,表示可以多选(windows下按住ctrl来多选,但更好的方式是采用复选选项),然后展示多少选项.如果不加多选,其实没有必要加”size”.
optgroup用于分组选择,其label标签的值就是在下拉菜单里出现的文字(但无法选中),option是最终选项,必须设置value属性,其内容也显示在下拉菜单上.selected属性表示默认选中.disabled属性表示不可用
textarea 标签
textarea就是给用户输入大段文字的地方,用法示例
<textarea name="memo" id="memo" cols="30" rows="10"> 默认内容 </textarea>
name一定要设置,cols表示列宽,rows表示行宽,但用户输入的内容可以超出范围.内容表示默认内容,会被用户输入所覆盖.disabled也适用
fieldset 标签
fieldset 元素可将表单内的相关元素分组。<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。
一组表单元素放到 fieldset 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。
<fieldset>
<legend>操作按钮</legend>
<label for="submit">提交</label>
<input type="submit" name="tijc" id="submit" value="提交所有数据">
<label for="reset">重置</label>
<input type="reset" name="res" id="reset" value="重置所有数据">
</fieldset>
legend标签用以规定显示的框主题,浏览器会生成一个特殊的框框柱里边的表单元素
label标签
除了用for = “id”来和需要显示内容的input元素进行关联以外,还可以按照下边的方法使用:
<label>输入日期
<input type="datetime-local" name="date" id="date">
</label>
这样无需通过for属性取得联系
Form 属性
在看完了form内部标签的特性,可以发现,起内部元素就相当于具体的数据键值,而form就在最外层相当于一个容器,控制着里边的数据向哪里提交,如何提交等等
| form 标签属性 | |
| accept-charset | 使用什么字符集来提交数据,默认是页面指定的字符集,即head标签内的字符集 |
| action | 向何处提交表单,设置一个URL |
| autocomplete | 规定浏览器是否应该自动完成表单 |
| enctype | 规定被提交数据的编码,默认是url-encoded,如果上传文件则需要修改为multipart/form-data |
| method | 规定提交的请求,默认是get,上传文件需要改成post |
| name | 设置表单的名称 |
| novalidate | 设置浏览器不验证表单,直接向后端提交数据 |
| target | 规定 action 属性中地址的目标在哪里打开（默认：_self）,_blank表示在新窗口打开 |
