HTML Form 表单的简单使用

概述

HTML中<form>元素被用来表示一个区域，该区域中的控件，可以用来向服务器提交数据。

常用属性

• action: 表示处理form的URL。
• method: 表示提交表单的方法
• enctype: 提交form给服务器的内容的 MIME 类型。
  • application/x-www-form-urlencoded: 如果属性未指定时的默认值
  • multipart/form-data: 这个值用于一个 type 属性设置为 file 的 <input> 元素
  • text/plain (HTML5)
  • target: 一个名字或者说关键字，用来指示在提交表单之后，在哪里显示收到的回复。

method方法中 POST和GET区别

GET是向服务器获取数据，POST是向服务器上传数据。

• 数据提交方式

  使用GET，数据被拼接成URL向服务器发送请求 如http://test.com/login?user=admin&password=123
  使用POST, 数据被包装在请求的body中向服务器发送请求。

• 安全性

POST的安全性高于GET,因为GET的数据会直接显示在URL里面

• 编码

GET只能发送ASCII字符，POST可以则可以发送整个ISO 10646中的字符。在Form中的enctype中，当属性为`multipart/form-data`,（form 数据中包含文件),只能使用POST

• 提交的数据长度

  GET提交的长度为2083个字符，受制于URL的长度。

• 缓存

  GET提交的记录会被浏览器缓存。在历史记录中。

  表单常用的input标签

  form表单的作用可以收集信息，提交给网站后台。常用的input标签如下：

  • text: 单行字段。
  • password: 一个值被遮盖的单行文本字段，使用maxlength可以指定输入的值的最大长度。
  • checkbox: 复选框。使用value属性定义控件被提交的值。使用checked属性表示控件是否被选择。
  • radio: 单选按钮，使用value属性定义控件被提交的值。在同一个”单选按钮组“中，所有单选按钮的 name 属性使用同一个值； 一个单选按钮组中是，同一时间只有一个单选按钮可以被选择。
  • file: 可让用户选择文件。accept属性控制可以选择文件的类型。
  • hidden: 不显示在页面的上的控件，但是值会被提交到服务器。
  • button: 无缺省行为的按钮。
  • submit: 用于提交表单的按钮
  • reset: 用于将表单所有内容设置为缺省值的按钮

  代码示例

  <form action="/userInfo" method="post">
  <div class="name">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" placeholder="用户名">
  </div>
  <div class="password">
  <label for="password">密码：</label>
  <input type="password" id="password" name="password" placeholder="输入密码">
  </div>
  <div class="gender">
  <label for="gender">性别：</label>
  <input type="radio" name="gender" value="male">男
  <input type="radio" name="gneder" value="female">女
  </div>
  <div class="sex">
  <label for="sex">取向：</label>
  <input type="radio" name="sex" value="male">男
  <input type="radio" name="sex" value="female">女
  </div>
  <div class="hobby">
  <label for="hobby">爱好：</label>
  <input type="checkbox" name="hobby" value="dota">dota
  <input type="checkbox" name="hobby" value="旅游">旅游
  <input type="checkbox" name="hobby" value="宠物">宠物
  </div>
  <div class="comment">
  <label for="comment">评论：</label>
  <textarea name="comment" id="comment" cols="30" rows="10" placeholder="评论"></textarea>
  </div>
  <div class="myCar">
  <label for="myCar">我的Car:</label>
  <select name="myCar" id="myCar">
    <option value="bmw">宝马</option>
    <option value="benz" selected>奔驰</option>
    <option value="audi">奥迪</option>
  </select>
  </div>
  <input type="submit" value="提交">
  </form>
  

  其他

  • <label>元素中for属性表示，当点击label时，for对应id的元素会被focus。