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隐藏域有什么作用?
传递一个校验值，以便于后端做安全验证
