入门5 Form表单

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

1. HTML <form> 元素 表示了文档中的一个区域，这个区域包含有交互控制元件，用来向web服务器提交信息，拥有以下属性。

1. action 一个处理这个form信息的程序所在的URL。
2. autocomplete 用于指示 input 元素是否能够拥有一个默认值，这个默认值是由浏览器自动补全的。
3. enctype 当 method 属性值为 post 时, enctype 是提交form给服务器的内容的 MIME 类型，可能的取值有三个，application/x-www-form-urlencoded: 如果属性未指定时的默认值。multipart/form-data: 这个值用于一个 type 属性设置为 "file" 的 <input> 元素。text/plain (HTML5)。
4. method 浏览器使用这种 HTTP 方式来提交 form。 可能的值有get和post。
5. target 一个名字或者说关键字，用来指示在提交表单之后，在哪里显示收到的回复.
   2.常见的Input标签主要由type属性控制。

• type: 控件类型的显示。如果这个属性没有指定，默认的类型是 text。
• type可用的值包括：
• button：无缺省行为按钮。
• checkbox： 复选框。必须使用 value 属性定义此控件被提交时的值。使用 checked 属性指示控件是否被选择。也可以使用 indeterminate 指示复选框在一种不确定状态（大多数平台上，显示为一条穿过复选框的水平线）。
• color：HTML5 用于指定颜色的控件。
• date：HTML5 用于输入日期的控件（年，月，日，不包括时间）。
• datetime：HTML5 基于 UTC 时区的日期时间输入控件（时，分，秒及几分之一秒）。
• datetime-local：HTML5 用于输入日期时间控件，不包含时区。
• email：HTML5 用于编辑 e-mail 的字段。 合适的时候可以使用 :valid 和 :invalid CSS 伪类。
• file：此控件可以让用户选择文件。使用 accept 属性可以定义控件可以选择的文件类型。
• hidden：不显示在页面上的控件，但它的值会被提交到服务器。
• image：图片提交按钮。必须使用 src 属性定义图片的来源及使用 alt 定义替代文本。还可以使用 height 和 width 属性以像素为单位定义图片的大小。
• month：HTML5 用于输入年月的控件，不带时区。
• number: HTML5 用于输入浮点数的控件。
• password：一个值被遮盖的单行文本字段。使用 maxlength 指定可以输入的值的最大长度 。
• radio：单选按钮。必须使用 value 属性定义此控件被提交时的值。使用checked 必须指示控件是否缺省被选择。在同一个”单选按钮组“中，所有单选按钮的 name 属性使用同一个值； 一个单选按钮组中是，同一时间只有一个单选按钮可以被选择。
• range：HTML5 用于输入不精确值控件。
• reset：用于将表单所内容设置为缺省值的按钮。
• search：HTML5用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。
• submit：用于提交表单的按钮。
• tel：HTML5 用于输入电话号码的控件；换行会被自动从输入的值中移除A,，but no other syntax is enforced。可以使用属性，比如 pattern 和 maxlength 来约束控件输入的值。恰当的时候，可以应用 :valid 和 :invalid CSS 伪类。
• text：单行字段；换行会将自动从输入的值中移除。
• time：HTML5 用于输入不含时区的时间控件。
• url：HTML5 用于编辑URL的字段。 The user may enter a blank or invalid address. 换行会被自动从输入值中移队。可以使用如：pattern 和 maxlength 样的属性来约束输入的值。 恰当的时候使可以应用 :valid 和 :invalid CSS 伪类。
• week：HTML5 用于输入一个由星期-年组成的日期，日期不包括时区。
  3.表单中readonly和disabled属性的区别
• 设置了readonly的input[text]在提交表单的时候还是会提交input上声明的数据。
• 设置了disabled的则不会提交input上声明的数据。
  4.表单提交文件的正确方式
  添加input[type=file]的input标签
  设置表单的method为post
  设置表单的enctype为multipart/form-data
  5.如何无刷新提交表单
  在页面设置一个iframe，设置好它的name属性值，用css控制他是'消失'的。
  设置form的target属性为iframe的name属性即可。
  6.默认情况下，form中的button按钮不声明type属性，则一律视为submit。
  2.post 和 get 方式的区别？
  1.GET方式是从指定的资源请求数据；POST方式是向指定的资源提交要被处理的数据。
  2.GET方式的查询字符串（比如用户名和密码）是在GET请求的 URL 中发送的：POST的查询字符串则是在POST请求的http消息主体中发送的，URL 并不会泄露信息：
  3.安全性：与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。在发送密码或其他敏感信息时绝不要使用 GET；POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。
  4.字数限制：当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。POST的传输字数无限制。
  5.GET 请求可被缓存，GET 请求保留在浏览器历史记录中。而POST 请求不会被缓存，POST 请求不会保留在浏览器历史记录中。
  6.GET适用于数据的查询和获取，POST适用于数据的增加删除和修改
  3.在input里，name 有什么作用？
  由于表单提交的数据一般都是以key:value的方式提交，所以input中的name属性主要用来标识提交的数据的key值，好让服务器处理程序分辨。
  例如：

<input name=name value=adam> <input name=age value=18>

则服务器在后台收到的数据格式可能是这样的：

{ name:adam, age:18 }
4.radio 如何 分组?
通过设置name来实现分组。
5.placeholder 属性有什么作用?
placeholder属性一般会在输入框有一个提示，该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
注意：
placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password。
placeholder为HTML5的新属性
6.type=hidden隐藏域有什么作用? 举例说明
作用：隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。
举例：

1. 有些时候我们要给用户一信息，让他在提交表单时提交上来以确定用户身份，如sessionkey等。当然这些东西也能用cookie实现，但使用隐藏域就简单的多了．而且不会有浏览器不支持，用户禁用cookie的烦恼。
2. 有些时候一个form里有多个提交按钮，怎样使程序能够分清楚到底用户是按那一个按钮提交上来的呢？我们就可以写一个隐藏域，然后在每一个按钮处加上onclick=”document.form.command.value=”xx””然后我们接到数据后先检查command的值就会知道用户是按的那个按钮提交上来的。
3. 有时候一个网页中有多个form，我们知道多个form是不能同时提交的，但有时这些form确实相互作用，我们就可以在form中添加隐藏域来使它们联系起来。
4. JavaScript不支持全局变量，但有时我们必须用全局变量，我们就可以把值先存在隐藏域里，它的值就不会丢失了。
5. 还有个例子，比如按一个按钮弹出四个小窗口，当点击其中的一个小窗口时其他三个自动关闭．可是IE不支持小窗口相互调用，所以只有在父窗口写个隐藏域，当小窗口看到那个隐藏域的值是close时就自己关掉。
6. CSRF 详解与攻防实战42
   7.表单的用法

1.表单定义
HTML表单是一个包含表单元素的区域， 表单使用<form> 标签创建。
<form action="提交到服务器的地址" method="post">
表单元素在这
</form>
2.单行文本框
<input type="text" name="名称" />
3.密码框
<input type="password" name=""/>
4.单选按钮
<input type="radio" name=""/>
5.复选
<input type="checkbox" name=""/>
6.多行文本
<textarea name="" rows="10" cols="50"/>
7下拉菜单
<select name="car">
<option value="大众">大众</option>
<option value="福特">福特</option>
<option value="自行车">自行车</option>
</select>
8隐藏域，检查是否安全
<input type="hidden" name="jirengu" value="jirengu">
9.label
<label>我的汽车:</label>
10.上传文件
<input type="file" name="" accept="上传的文件格式"/>
示例代码：

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<div class="login">
  <input type="text" name="sex">
  <form action="/getInfo" method="get">
      <div class="submit">
      <button>提交😁</button>
    </div>
    <div class="username">
      <label for="username">姓名</label>
      <input id="username" type="text" name="username" value="ruo">
    </div>
    <div class="password">
      <label for="password">密码</label>
      <input id="password" type="password" name="password" placeholder="输入密码">
    </div>
    <div class="hobby">
      <label>爱好</label>
      <input type="checkbox" name="hobby" value="read"> 读书
      <input type="checkbox" name="hobby" value="music"> 听歌
      <input type="checkbox" name="hobby" value="study"> 学习
    </div>
    <div class="sex">
      <label>性别</label>
      <input type="radio" name="sex" value="男"> 男
      <input type="radio" name="sex" value="女"> 女
    </div>
    <div class="file">
      <input type="file" name="myfile" accept="image/png">
    </div>
    <div class="select">
      <select name="city">
        <option value="beijing">北京</option>
        <option value="shanghai" selected>上海</option>
        <option value="hangzhou">杭州</option>
      </select>
    </div>
    <div class="textarea">
      <textarea name="article">
         多行文本，注意和 type=text的区别
      </textarea>
      <input type="hidden" name="csrf" value="12345623fafdffdd">
        <input type="button" value="Buttom" /> 不会提交
        <input type="submit" value="Submit" /> 会提交
        <input type="reset" value="Reset" /> 重置输入
    </div>
  </form>


</div>
</body>
</html>