form表单

表单：在显示中表单用于提交数据

           在网页中也可以使用表单，用于将本地的数据提交给远程的服务器

组成：表单域+表单控件+提示信息

一、表单域 form：

可选属性：action 提交的路径

                  method 提交的方式

                        可选属性值：get 获取数据 信息量少 速度快 安全性较差 相对post效率高

                                              post 传送数据 信息量大 速度慢 安全性高 效率较低

                  autocomplete 添加历史输入信息 ,给添加name属性的表单控件添加

                        可选属性值：on / off               

二、表单控件 input：

可选属性：type 控制表单控件的类型       

                  placeholder 提示信息

                  autocomplete 历史记录 属性值on/off 需要添加name属性

                  multiple 多选，写在file控件中可以提交多个文件，也可以写多个url等用逗号连接

                  required 控制该项为必填项

                   autofocus 自动获取焦点

                   pattern  正则表达式验证

                  name 提交给服务器的名字

                  appearance 元素的样式 none清楚自带的样式

                  readonly  将表单项设为只读 但会提交数据

                  disabled  将表单禁用   不会提交数据

                  value  提交的内容

                  checkend 默认选中

相关标签 1、label 快速选中

例：

<label for="list">账号:</label>
<input type="text" name="zhanghao" id="list"> 

    当点击“账号：”时也会选中text文本框

2、datalist 提示信息

例：

<input tupe="text" list="Tips" name="city">
<datalist id="Tips">
<option value="山东青岛" label="一个靠海的城市">
<option value="山东济南" label="山东的省会">
</datalist>

             

 3、fieldset 表单中的分组 可以嵌套

4、legend 标题，必须为fieldset中的第一个元素，表现形式为在边框的中间，可以同过padding来设置位置

 5、textarea 多行文本框（文本域）

可选属性值：rows 行数      用来控制高度

                      cols 字符数   用来控制宽度

                      resize 用户是否可以控制大小  none让大小固定

6、select 下拉列表

option标签中添加下拉的内容

 type中的属性值/不同的表单控件  要想提交信息的话都必须添加name属性

1 text 文本框

2 password 密码框

3 radio 单选按钮 同一问题的选项必须设置相同的name （否则可以多选且不能取消）value也必须设置

4 checkbox 多选按钮 类似radio 也必须写name和value

5 button 普通按钮

6 submit 提交按钮

7 reset 重置按钮

注：可以使用双标签button来设置按钮通过双标签可以添加图片来作为按钮

直接的双标签button是提交按钮 type=“submit” 也是提交

  type=“button”是普通按钮    type=“reset”是重置按钮

8 file 提交文件

新增表单控件

9 color 颜色

10 hidden 隐藏 （通过js可以设置） 

11 tel 唤起拨号键（移动端）

12 number 数字   min/max/step

13 url 网址

14 email 邮箱

15 date 年月日

16 month 年月

17 week  年周

18 time 年月日时间

19 datatime-local 选择本地时间

20 range 滑块 min/max/step