Form表单input标签

form表单有什么作用？有哪些常用的input 标签，分别有什么作用？

• 作用:form表单提交的方式向服务器发送数据

• 常见的input标签

• text

<label for="input_username">用户名：</label> <input id="input_username" name="username" type="text" placeholder="输入用户名" autofocus/>
<!-- 
text 用于输入一行文字 比如说输入姓名 
placeholder是没有输入是显示的提示文字，不是真实的赋值，一旦有输入值或者输入时placeholder隐藏显示
autofocus 用来指定聚焦元素
 -->

• password

            <label for="input_pass">密码：</label> <input id="input_pass" name="password" type="password" placeholder="输入密码"/>
<!-- 
password 用于输入密码
pass world元素输入值会显示成黑点
for 可以把描述元素与输入元素通过id绑定到一起，点击描述时聚焦到相对应的输入框
 -->

• radio 单选框

          <label for="ck1">ra1：</label><input type="radio" id="ra1" name="ra" value="1" />
            <br/>
            <label for="ra2">ra2：</label><input type="radio" id="ra2" name="ra" value="2" />
            <br/>
            <label for="ra3">ra3：</label><input type="radio" id="ra3" name="ra" value="3" />
<!-- 
radio 是单选框 每组只能选择一个 那么表示分组 value表示单选框的值
 -->

• checkbox 复选框

            <h3>复选框</h3>
            <label for="ck1">CK1：</label><input type="checkbox" id="ck1" name="ck" value="1" />
            <br/>
            <label for="ck2">CK2：</label><input type="checkbox" id="ck2" name="ck" value="2" checked />
            <br/>
            <label for="ck3">CK3：</label><input type="checkbox" id="ck3" name="ck" value="3" />
            <br/>
<!-- 
checkbox 是复选框 每组可以选择多个 name用于分组 value 选定按钮的值  checked 代表处于默认选中状态
 -->

• file

            <h3>File</h3>
            <input type="file" accept="image/gif, image/jpeg"/>
            <br/><br/>
            <!-- 
                file用于选择文件 accept参数可以制定文件类型
             -->

• image 按钮

            <h3>image 按钮</h3>
            <input type="image" src="xxx.jpg" alt="Submit Form"/>
            <br/><br/>
            <!--
              图片按钮和submit提交按钮一样，点击可以提交表单，当然也可以作为普通按钮使用。 
            -->

• 隐藏域
  <h3>隐藏域</h3>

• radio 单选框
  <label for="ck1">ra1：</label><input type="radio" id="ra1" name="ra" value="1" /> <br/> <label for="ra2">ra2：</label><input type="radio" id="ra2" name="ra" value="2" /> <br/> <label for="ra3">ra3：</label><input type="radio" id="ra3" name="ra" value="3" />
  >>- checkbox 复选框
  <h3>复选框</h3> <label for="ck1">CK1：</label><input type="checkbox" id="ck1" name="ck" value="1" /> <br/> <label for="ck2">CK2：</label><input type="checkbox" id="ck2" name="ck" value="2" checked /> <br/> <label for="ck3">CK3：</label><input type="checkbox" id="ck3" name="ck" value="3" /> <br/>
  >>- file
  <h3>File</h3> <input type="file" accept="image/gif, image/jpeg"/> <br/><br/>
  >> - image 按钮
  <h3>image 按钮</h3> <input type="image" src="xxx.jpg" alt="Submit Form"/> <br/><br/>
  >> - 隐藏域
  <h3>隐藏域</h3>
  <input type="hidden" value="xxx" />
  
  
  
  

• select 下拉菜单

            <h3>下拉菜单</h3>
            <select id="input_select">
                <option value="1">1</option>
                <option value="2" selected="selected">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
            <!-- 
              下拉菜单点击会显示下拉框
              select代表默认选中值
              下拉菜单直接是类型select与元素option  不再是input标签用type指定出现
             -->

• textarea 多行输入框 用于输入大量文字

            <h3>多行文本</h3>
            <textarea cols="60" rows="5">123</textarea>
            <br/><br/>

• button submit reset

            <input type="button" value="Buttom" />     <!-- 点击不会提交也不会刷新 -->
            <input type="submit" value="Submit" />      <!-- 点击会提交数据 -->
            <input type="reset" value="Reset" />  <!-- 点击会重置所有input标签 -->

form标签属性

form标签是表单的外壳，主要有四个属性
action： 表单提交的地址
method：提交保单的方法
target：在何处打开action
enctype:
application/x-www-form-urlencoded：在发送前编码所有字符（默认）
text/plain：空格转换为 "+" 加号，但不对特殊字符编码
multipart/form-data：使用包含文件上传控件的表单时，必须使用该值

post 和 get 方式的区别？

get

表单数据会被encodeURIComponent后以参数形式name1=value1&name2=value2 附带在 url？后面发送给服务器，并在url中显示出来；

---

post

<!--
 content-type 默认"application/x-www-form-urlencoded" 对表单数据进行编码，
数据字段以键值对在 http请求体中发送给服务器；
如果 enctype 属性值为"multipart/form-data"，
则以消息的形式发送给服务器。
-->

---

post和get都可以用于上传数据
post相对于get要安全一些

<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

>> - textarea 多行输入框 用于输入大量文字
<h3>多行文本</h3>
<textarea cols="60" rows="5">123</textarea>



>> - button submit reset
<input type="button" value="Buttom" />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
####form标签属性 > form标签是表单的外壳，主要有四个属性 action： 表单提交的地址 method：提交保单的方法 target：在何处打开action enctype: application/x-www-form-urlencoded：在发送前编码所有字符（默认） text/plain：空格转换为 "+" 加号，但不对特殊字符编码 multipart/form-data：使用包含文件上传控件的表单时，必须使用该值 ####post 和 get 方式的区别？ >get
表单数据会被encodeURIComponent后以参数形式name1=value1&name2=value2 附带在 url？后面发送给服务器，并在url中显示出来；
> --- >post

```
>---
>
>>post和get都可以用于上传数据
post相对于get要安全一些
post可以传输的最大数据量要大一些，数据量比较大时post无法保证数据的完整性
post一般用于上传数据
get一般用于请求数据时上传一些与安全无关的参数

input中name的作用

name可以用于单选框与复选框的分组 也是传递变量时的变量名 只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

radio 如何 分组?

相同name的radio元素再同一组

placeholder 属性有什么作用?

提示用户进行输入
placeholder是没有输入是显示的提示文字，不是真实的赋值，一旦有输入值或者输入时placeholder隐藏显示

type=hidden隐藏域有什么作用?

传递一个校验值，以便于后端做安全验证