HTML表单

1.作用

提交数据，使页面具有交互性

2.标签

<form action="提交的地址" name="表单名称" method="提交方式get|post"></form>

get和post的区别：

1. get提交数据不安全，post安全
2. get提交数据大小有限制，post理论上没有限制

3.表单元素

 <!--掌握-->
 <input type="text"/> <input type="password"/>
 <input type="radio" name=""/>
 <input type="checkbox"/>
 <!--
         label标签一般配合单选按钮或者多选按钮使用
         label的for 与 input的id 一致
 -->

 <input type="submit"/>
 <input type="reset"/>
 <input type="button"/>
 <button>提交</button>
 <button type="reset">重置</button>
 <button type="button">按钮</button>

 <!--了解-->
 <input type="file"/>  //上传文件
 <input type="hidden"/>
 <input type="image" src=""/> //图片提交按钮
 <select name="" id="">
        <option value=""></option>
        <option value=""></option>
        <option value=""></option>
        <option value=""></option>
 </select>
 <select name="" id="">
    <optgroup label="组名">
        <option value=""></option>
        <option value=""></option>
        <option value=""></option>
        <option value=""></option>
    </optgroup>
 </select>

 <textarea name="" id="" cols="30" rows="10"></textarea>

    <label for=""></label>
    作用：提升用户体验度，一般配合单选按钮和多选按钮使用
    label标签的for属性和input的id属性绑定

    <fieldset>
        <legend></legend>
    </fieldset>
    eg:
    <form>
      <fieldset>
        <legend>健康信息</legend>
        身高：<input type="text" />
        体重：<input type="text" />
      </fieldset>
    </form>

4.属性

• value 当前值
• name 名称
• checked 默认被选中，配合单选按钮和多选按钮使用
• selected 默认显示，配合option使用
• readonly 只读
• disabled 禁用

5.HTML5新增type类型（了解）

<input type="email" />
<input type="url"/> 
<input type="search"/> 
<input type="color"/> 
<input type="number"/> 
<input type="range"/> 
<input type="tel"/> 
<input type="date"/> 
<input type="week"/> 
<input type="month"/>

6.HTML5新增属性

• placeholder="" 默认提示
• required 必填项
• autofocus 自动获取焦点
• multiple 可以输入多个，用逗号隔开，一般配合邮箱和网址使用
• min和max 最小值和最大值，配合数字和范围使用
• minlength和maxlength 最小长度和最大长度

7. form表单提交数据时 一> 一定要写name属性