HTML form 表单

[Harley Wang]

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

• 表单用于向服务器传输数据
• 根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

标签	功能
<input type="text">	定义单行输入文本框
<input type="password">	定义密码字段
<input type="radio">	定义单选按钮，用name分组
<input type="checkbox">	定义多选按钮
<input type="submit">	定义提交表单数据至表单处理程序的按钮
<input type="button">	定义按钮
<input type="reset">	定义重置按钮
<input type="number">	用于应该包含数字值的输入字段
<input type="date">	用于应该包含日期的输入字段
<input type="color">	用于应该包含颜色的输入字段

post 和 get 方式的区别？

• 方式

get 把参数包含在 URL 中，post 通过 request body 传递参数。

• 安全

get 比 post 更不安全，因为参数直接暴露在 URL 上，所以不能用来传递敏感信息。

• 数据量的问题

传输给后台数据量很大，post 可以防止数据传输不完整
数据量小 get

• 使用场景

需要向后台查询数据 get
传输数据给后台 post

在input里，name 有什么作用？

name属性规定input元素的名称，达到区分多个表单的目的，从而防止了表单提交到后台程序之后出现混乱，也只有设置了name属性的表单元素才能在提交表单时传递它们的值。

radio 如何 分组?

通过 name 属性分组，eg（name="sex1"的为一组，name="sex2"的为一组）：

<input type="radio" name="sex1" value="male">男
<input type="radio" name="sex1" value="female" >女
<input type="radio" name="sex2" value="male">男
<input type="radio" name="sex2" value="female" >女

placeholder 属性有什么作用?

placeholder 属性能够在文本框里显示提示信息，提示信息会在输入字段时消失，在没有字段输入时显示。

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

• 隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。
• 当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上，可以让服务器知道数据采集的是否正确，从而避免服务器数据被假页面提交的数据攻击篡改。或者有些时候我们要给用户一信息，让用户在提交表单时提交上来以确定用户身份。

HTML 表单的用法

• 表单用于向服务器传输数据
• form

<form action="提交到服务器地址" method="get">
...
...
</form>

action：提交表单的地址
method：提交表单使用的方法，get或者post

• input
  通过 type 属性来设置不同的 input 类型。

1. text
   文本域

 <div class="username">
    <label for="username">姓名</label>
    <input id="username" type="text" name="username" placeholder="用户名">
</div>

2. password
   密码域，显示为小黑圆点

<div class="password">
    <label for="password">密码</label>
    <input id="password" type="password" name="password" placeholder="请输入密码">
</div>

3. button
   提交按钮，不会提交
   <input type="buttom" value="按钮">

4. submit
   提交按钮，会提交
   <input type="submit" value="提交">

5. reset
   重置输入按钮
   <input type="reset" value="重置">

6. radio
   单选，通过 name 属性分组

<div class="sex">
    <label>性别</label>
    <input type="radio" name="sex" value="male">男
    <input type="radio" name="sex" value="female">女
</div>

7. checkbox
   复选框

<div class="hobby">
    <label for="hobby">爱好</label>
    <input type="checkbox" name="hobby" value="dota">dota
    <input type="checkbox" name="hobby" value="travel">旅游
    <input type="checkbox" name="hobby" value="pet">宠物
</div>

9. file
   上传文件

   <div class="file">
      <input type="file" name="myfile" accept="image/png">
    </div>

此例中image/png意思是只能选择此格式的图片上传

10. hidden
    隐藏域
    <input type="hidden" name="..." value="...">

• label

在介绍 input 元素时，label 元素已出现多次，eg：

<div class="username">
    <label for="username">姓名</label>
    <input id="username" type="text" name="username" placeholder="用户名">
</div>

label 元素为 input 元素定义标注，当鼠标选择该标签时，关联的元素控件会获得焦点，for 属性与关联元素的 id 属性要相同。

• select元素和嵌套的option元素
  下拉菜单栏

<div class="section">
    <label for="car">My Car</label>
    <select id="car" name="car">
        <option value="TT">TT</option>
        <option value="SAAB" selected>萨博</option>
        <option value="GTR">GTR</option>
    </select>
</div>

• textarea
  多行文本框
  <textarea name="comment"></textarea>

推荐阅读

w3school
99% 的人都理解错了 HTTP 中 GET 与 POST 的区别