入门5

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

表单用于搜集信息提交给后台。 常用input标签 <input type="text" name="username">,<input type="pasword" name="password">

post 和 get 方式的区别？

1. 提交方式区别
    GET请求的数据会附在URL之后，以？分割URL和传输数据参数之间以&相接。如果是数据，原样发送，如果是中文/其他字符，则用BAS64加密。
    POST把提交的数据则放在HTTP包的包体中。
2. 提交数据大小
    GET提交的长度和URL长度有直接关系，URL不存在参数上限的问题，HTTP协议规范没有对URL长度进行限制这个限制是特定的浏览器及服务器对它的限制。IE对URL长度的限制是2083字节（2K+35）。对于其他 浏览器，如Netscape、FireFox等，理论上没有长度限制，其限制取决于操作系统的支持。
    理论上POST是没有大小限制的，HTTP协议规范也没有进行大小限制，起限制作用的是服务器的处理程序的处理能力。
3. 安全性对比
    POST比GET的安全性高。通过GET提交数据，用户名密码会以明文的形式出现在URL上，（1）登录页面可能被浏览器缓存，（2）其他人查看浏览器历史记录，那么别人就可以拿到你的账号和密码了，（3）使用GET提交数据可能会造成CSRF攻击。
4. 总结
    Get是向服务器发索取数据的一种请求，而Post是向服务器提交数据的一种请求，在FORM（表单）中Method默认是"Get"，实质上Get和Post只是收发机制不同。

在input里，name 有什么作用？

name属性规定input元素的名称。name属性只用于提交到服务器后的表单数据进行标识，或者在客户端通过JavaScript引用表单数据。

注释：只有设置了name属性的表单元素才能在提交表单时传递它们的值。

radio 如何 分组?

要给radio分组，在radio标签内加入name属性即可。同意name属性即为一组如下

<audio controls>
  <source src="viper.mp3" type="audio/mp3" name="radio1">
  <source src="viper.ogg" type="audio/ogg" name="radio1">
  <source src="song.mp3 type="audio/mp3" name="radio2">
  <p>你的浏览器不支持 HTML5 音频。</p>
</audio>

两个radio1标签为一组

placeholder 属性有什么作用?

placeholder 属性提供可描述输入字段预期值的提示信息。
该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

注释：placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password。

注释: placeholder 属性是 HTML5 中的新属性。

type=hidden隐藏域有什么作用? 举例说明

隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用
（隐藏只是在网页页面上面不显示输入框，但是虽然隐藏了，还是具有form传值功能。
一般用来传值，而不必让用户看到。）例如有些时候我们要给用户一信息，让他在提交表单时提交上来以确定用户身份，如sessionkey，等等．当然这些东西也能用cookie实现，但使用隐藏域就简单的多了．而且不会有浏览器不支持，用户禁用cookie的烦恼

HTML 表单的用法

表单用于向服务器传输数据，在网页里就是一个存放控件的地方，如文本框，密码框，按钮之类的，这些控件叫做表单元素。

<form action="url" method="get|post" name="name" onSubmit="" target="">
<!-- 各种表单元素 -->
</form>

• 属性

1. action属性：改属性用来指定处理表单数据程序的URL地址。
2. method属性：改属性用来指定数据传送到服务器的方式。有两种属性值，get和post
3. name属性：指定表单的名称，可自定义
4. onSubmit属性：指定当用户单击提交按钮时触发的事件。
5. target属性：指定输入数据结果显示在哪个窗口中，_blank标示在新窗口中打开目标文件；_self表示在同一个窗口中打开，该项一般不用设置；_parent表示在上一级窗口中打开，一般使用框架页时经常使用；_top表示在浏览器的整个窗口中打开，忽略任何框架。

• 表单元素的常用类型

1. text：文本框，<input type="text"/>（input 的type 属性的默认值就是"text"）
2. textarea : 文本域
3. select : 下拉选择框
4. password：密码框
5. radio: 单选按钮
6. checkbox : 复选框
7. reset：重置按钮
8. button：普通按钮
9. submit：提交按钮
10. image：图片
11. file : 文件上传
12. hidden : 隐藏域

实现表单效果

效果链接