（前端基础）HTML（二）

表单post和get提交

常用于登录和注册.

表单标签：form
- 属性action：表单提交的位置，可以是网站，也可以是一个请求处理地址
- 属性method：属性值有post、get
  - 属性值post：在url中看不见提交信息，比较安全 ，可以传输大文件
  - 属性值get：在url中我们可以看见我们提交的信息，不安全，但是高效
文本输入框标签：input
- 属性type ：输入的类型（文本：text、密码：password、提交：submit、重置：reset）
- 属性name：文本框名字

表单元素格式（详细版）：

|-------------|-------------------------------------------------------------------------------------------------------------------------------------|
| 属性 | 说明 |
| type | 指定元素的类型。text(文本框)、password（密码框）、checkbox（多选框）、radio（单选框）、submit（提交按钮）、reset（重置按钮）、file、hidden（隐藏）、image（图片按钮）、button（按钮）。默认text |
| name | 指定表单元素的名称 |
| value | 元素的初始值。type为radio时必须指定一个值 |
| size | 指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位 |
| maxlength | type为text或password时，输入的最大字符数 |
| checked | type为radio或checkbos时，指定按钮是否是被选中 |

value、maxlength、size的使用

单选框radio的使用

radio使用时，name需要为一组，同时，可用checked实现默认选中，该处未使用。

name不同组：

按钮和多选框的使用

多选框checkbox：可用checked默认选中

按钮button与图片按钮image：

综上：已出现的按钮为

input type="button" vaule="按钮显示内容" //普通按钮

input type="image" src="图片路径" //图片按钮

input type="submit" vaule="按钮显示内容" //提交按钮

input type="reset" vaule="按钮显示内容" //重置按钮

列表框文本域和文件域

下拉框select标签

<select name="列表名称" >

<option value="选项值">选项1**</option>**

<option value="选项值" selected>选项2**</option>** //selected：默认选项在2

<option value="选项值">选项3**</option>**
</select>

案例：用selected默认选中上海

文本域textarea标签

<textarea name="文本域名" cols ="列" rows="行">文本内容</textarea>

文件域input标签

input标签中，type=file

html 复制代码

<p>
        文件域：
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>

搜索框滑块和简单验证

使用input标签，当type未email时，会进行简单验证：

邮箱验证：type=email

html 复制代码

邮箱：
        <input type="email" name="email">

url验证：type=url

html 复制代码

 url：
        <input type="url" name="url">

数字验证：type=number

max：最大值

min：最小值

step：每个数字间隔10

html 复制代码

数字验证：
        <input type="number" name="num" max="100" min="0" step="10" >

音量滑块：type=range

min：最小值

max：最大值

step：每次变化2

搜索框：type=search

html 复制代码

<p>
        搜索框：
        <input type="search" name="search">
    </p>

表单的应用

隐藏域：hidden

只读：readonly

禁用：disabled

增强鼠标可用性：label标签

（for与id共同使用）

表单初级验证

进行表单验证：保证数据的安全，减少请求数量

表单验证常用方式：

placeholder：提示信息，可用于所有文本框

required:非空判断,可用于所有文本框

pattern：正则表达式