HTML表单基本使用

HTML表单

HTML是一个包含表单元素的区域，用于搜集不同类型的用户输入，以提交给后台。
表单元素是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

常见的标签介绍

form标签用于定义表单，包含了表单元素。

form标签有四个属性

• action： 表单提交的地址
• method：提交表单的方法，一般有get和post两种（区别见附录）。
• target：在何处打开action
• _blank ：在新窗口中打开。
• _self ：(默认)在相同的框架中打开。
• _parent ：在父框架集中打开。
• _top ：在整个窗口中打开。
• framename：在一个name属性为framename的框架中打开。

• enctype: 编码方式
• application/x-www-form-urlencoded：在发送前编码所有字符（默认）
• text/plain：空格转换为 "+" 加号，但不对特殊字符编码
• multipart/form-data：使用包含文件上传控件的表单时，必须使用该值

<form action="action_page.php" method="get" >
    form elements
</form>

input标签可通过type属性来设置不同的input类型

• 文本/密码

• 一般不设置value，value值为用户输入的值

• placeholder属性，用于在输入框内给用户提供提示文字，帮助用户填写输入字段，不影响实际value值。用户输入值后会消失。

  <input type="text" name="username" placeholder="请输入用户名">
  <input type="password" name="password" placeholder="请输入密码"> 
  

• 单选/复选框

• 同一组数据的name值需保持相同

• label元素的for属性值与关联元素id值保持一致，则点击label 元素内文本，浏览器就会自动将焦点转到和标签相关的表单控件上。

• 必须设置value值，否则选中项的值无法提交

  <!--单选框-->
  <label for="male">男</label><input type="radio" id="male" name="gender" value="0"/>
  <label for="female">女</label><input type="radio" id="female" name="gender" value="1"/>
  

  <!--复选框-->
  <label for="swim">游泳：</label><input type="checkbox" id="swim" name="hobby" value="0"/>
  <label for="basketball">篮球：</label><input type="checkbox" id="basketball" name="hobby" value="1"/>
  <label for="football">足球：</label><input type="checkbox" id="football" name="hobby" value="2"/>
  

• 文件

• accept属性：可接受的文件类型

  <input type="file" accept="image/gif, image/jpeg"/>
  

• 按钮

  <input type="button">
  <!--提交给表单处理程序-->
  <input type="submit">
  <input type="reset">
  <!--图片按钮-->
  <input type="image" src="xxx.jpg" alt="Submit Form"/>
  

• 隐藏域

• 提交数据但前台不显示

   <input type="hidden" name="a" value="1">
  

select标签定义下拉列表

• 配合option标签使用
• option元素的selected属性设为selected则该子项在页面中默认选中
• 各option元素需设置value以提交数据

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

textarea标签定义多行文本

<textarea cols="60" rows="5">123</textarea>

附录

1. post 和 get 方式的区别？

• GET方法

• 查询字符串（名称/值对）是在 GET 请求的 URL 中发送的

• 受限于url的最大长度2048个字符.

• 只允许 ASCII 字符。

• 与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分，对所有人可见。因此在发送密码或其他敏感信息时绝不要使用 GET ！

  /test/demo_form.asp?name1=value1&name2=value2
  

• POST方法

• 查询字符串（名称/值对）是在 POST 请求的 HTTP 消息主体中发送的

• 对数据类型、长度均无限制

• 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。

  POST /path/script.cgi HTTP/1.0
  From: frog@jmarshall.com
  User-Agent: HTTPTool/1.0
  Content-Type: application/x-www-form-urlencoded
  Content-Length: 32
  
  home=Cosby&favorite+flavor=flies
  

• 使用场景
  （1）如果表单正在更新数据，或者包含敏感信息（例如密码）时，最好是用POST。POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。
  （2）如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息时使用GET。GET适合少量数据的提交，因为浏览器会设定容量限制。