**表单**

应用：用来收集用户信息，并将信息提交到后台存进数据库

form不能单独使用，需要配合表单元素一起使用

<form action="提交路径">

         上传文件：<input type="file">   

</form>

input    type=""

1、文本框（输入框）

<input type="text">   

2、密码框

<input type="password">  

3、按钮

      a、submit-------提交按钮 (需要配合action="提交路径"使用)

      b、reset--------重置按钮

      c、button---------空按钮（普通按钮）

      d、<button></button>---------空按钮（普通按钮）

4、上传文件

<input type="file">   

5、隐藏域

<input type="hidden" value="">

6、单选按钮

<form>

        <input type="radio" name="[必填]">选择内容

        <input type="radio" name="[必填]">选择内容

        <input type="radio" name="[必填]">选择内容

</form>

radio 单选必须给一组值添加相同name值，即可单选，解决共选问题

checked="checked"默认选中

disabled="disabled"禁用

为了提高用户体验，点击文字实现选中效果需要使用<lable>标签

<label for="关联控件的id名"></label>

（关联控件的id名一般指<input>元素的id）

7、多选

<form>

          <input type="checkbox" name="[必填]">选择内容

          <input type="checkbox" name="[必填]">选择内容

          <input type="checkbox" name="[必填]">选择内容

</form>

为了提高用户体验，点击文字实现选中效果需要使用<lable>标签

<label for="关联控件的id名"></label>

（关联控件的id名一般指<input>元素的id）

需要给标签添加相同的name名，方便后期JS获取数据

checked="checked"默认选中

disabled="disabled"不可用，禁用

下拉菜单

<form>

      <select name="" id="">

            <option value="">菜单可选内容</option>

            <option value="">菜单可选内容</option>

            <option value="">菜单可选内容</option>

            <option value="">菜单可选内容</option>

                       ……

       </select>

</form>

属性

<option value="">value属性方便JS取值

<option value="" selected>默认选中的菜单内容</option>

<select multiple size="数值"></select>

属性multiple实现多选，需要配合shift一起使用，默认显示4个

想要显示多个需要配合size属性

多行文本框

<form>

      <textarea name="" id="" cols="" row=""></textarea>

</form>

cols控制多行文本框宽度，row控制多行文本框高度（不推荐使用）

一般在css中控制多行文本框的宽高

控制文本框是否可以拖拽

resize属性

取值

none;不可拖拽【常用】

both；两个方向都可拖拽

vertical；水平方向拖拽

horizontal；垂直方向拖拽

<textarea name="" id=""></textarea>使用该标签之间不要加空格或回车，会影响到页面显示效果。

表单中其他标签

表单字段集：用来给表单元素进行分组分类

<fieldset>---------默认自带边框

        <legend>表单字段级标题标签</legend>

</fieldset>

表单

<form action="" method=""></form>

属性

action提交地址

method提交方式

取值：

get-----明文提交，提交内容能够在浏览器地址栏看到，不安全，提交数据大小有限制，默认get提交

post-----加密提交，提交的内容用户看不到，比较安全，提交数据大小不受限制