（前端基础）HTML（二）

表单post和get提交

常用于登录和注册.

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

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

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

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

 搜索框滑块和简单验证

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

邮箱验证：type=email

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

url验证：type=url

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

数字验证：type=number

max：最大值

min：最小值

step：每个数字间隔10

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

音量滑块：type=range

min：最小值

max：最大值

step：每次变化2

搜索框：type=search

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

表单的应用

• 隐藏域：hidden

• 只读：readonly

• 禁用：disabled

•  增强鼠标可用性：label标签

（for与id共同使用 ）

 表单初级验证

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

表单验证常用方式：

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

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

• pattern：正则表达式