zerojs-零技术

html5 表单

表单 form

form 元素 表示了文档中的一个区域，这个区域包含有交互控制元件，用来向 web 服务器提交信息。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form action="test.php" method="get" enctype="application/x-www-form-urlencoded">
          name: <input type="text" name="fname" placeholder="请输入用户名"><br>
          gender: 男<input type="radio" name="gender" />
                       女 <input type="radio" name="gender" /><br>
          <input type="submit" value="提交">
        </form>
    </body>
</html>

属性说明：

属性描述
action:一个处理这个 form 信息的程序所在的 URL
method:规定用于发送表单数据的 HTTP 方法, 可能的值有:
post:指的是 HTTP POST 方法 ; 表单数据会包含在表单体内然后发送给服务器.
get:指的是 HTTP GET 方法; 表单数据会附加在 action 属性的 URI 中，并以 ? 作为分隔符,然后这样得到的 URI 再发送给服务器.

post 和 get 的区别：

post:

  • 将表单数据附加到 HTTP 请求的 body 内（数据不显示在 URL 中）
  • 没有长度限制
  • 通过 POST 提交的表单不能加入书签

get:

  • 将表单数据以名称/值对的形式附加到 URL 中
  • URL 的长度是有限的（大约 3000 字符）
  • 绝不要使用 GET 来发送敏感数据！（在 URL 中是可见的）
  • 对于用户希望加入书签的表单提交很有用
  • GET 更适用于非安全数据，比如在 Google 中查询字符串

enctype:

当 method 属性值为 post 时, enctype 是提交 form 给服务器的内容的 MIME 类型 。

可能的取值有:

取值描述
application/x-www-form-urlencoded:如果属性未指定时的默认值。
multipart/form-data:这个值用于一个 type 属性设置为 "file" 的 <input> 元素。
text/plain(HTML5)

表单元素

标签说明
<form>定义供用户输入的表单。
<input>定义输入域。
<textarea>定义文本域 (一个多行的输入控件)。
<lable>定义一个控制的标签。
<select>定义一个选择列表。
<option>定义下拉列表中的选项。
<optgroup>定义选项组。
<button>定义一个按钮。
<fieldset>定义域。
<legend>定义域的标题。

1. input 输入元素

<input> 标签规定了用户可以在其中输入数据的输入字段。

实例:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <form
      action="test.php"
      method="get"
      enctype="application/x-www-form-urlencoded"
    >
      name: <input type="text" name="fname" placeholder="请输入用户名" /><br />
      gender: 男<input type="radio" name="gender" /> 女
      <input type="radio" name="gender" /><br />
      <input type="submit" value="提交" />
    </form>
  </body>
</html>

input的type的取值有:

属性作用
text默认。定义一个单行的文本字段（默认宽度为 20 个字符）。
button定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）。
checkbox定义复选框。
radio定义单选框。
submit定义提交按钮。
image定义图像作为提交按钮。
reset定义重置按钮（重置所有的表单值为默认值）。
color定义拾色器。
password定义密码字段（字段中的字符会被遮蔽）。
search定义用于输入搜索字符串的文本字段。
date定义 date 控件（包括年、月、日，不包括时间）。
datetime定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）。
datetime-local定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。
email定义用于 e-mail 地址的字段。
file定义文件选择字段和 "浏览..." 按钮，供文件上传。
hidden定义隐藏输入字段。
month定义 month 和 year 控件（不带时区）。
number定义用于输入数字的字段。
range定义用于精确值不重要的输入数字的控件（比如 slider 控件）。
tel定义提交按钮。
time定义用于输入时间的控件（不带时区）。
url定义用于输入 URL 的字段。
week定义 week 和 year 控件（不带时区）。

其他属性：

属性作用
accept：如果该元素的 type 属性的值是 file,则该属性表明了服务器端可接受的文件类型；否则它将被忽略。
audio/*表示音频文件
video/*表示视频文件
image/*表示图片文件
autofocus：这个布尔属性允许您指定的表单控件在页面加载时具有焦点（自动获得焦点），除非用户将其覆盖，例如通过键入不同的控件。文档中只有一个表单元素可以具有 autofocus 属性，它是一个布尔值。
autosave：这个属性应该定义为唯一值。如果 type 属性的值是 search，那么之前的搜索词值将在整个页面加载过程中保持在下拉菜单中。
checked：如果该元素的 type 属性的值为 radio 或者 checkbox,则该布尔属性的存在与否表明了该控件是否是默认选择状态.
disabled：这个布尔属性表示此表单控件不可用。并且，禁用的控件的值在提交表单时也不会被提交。如果 type 属性为 hidden，此属性将被忽略。
height：如果 type 属性的值是 image，这个属性定义了按钮图片的高度。
width：如果 type 属性的值是 image，这个属性定义了按钮图片的宽度。
multiple：这个属性指示用户能否输入多个值。这个属性仅在 type 属性为 email 或 file 的时候生效 ; 否则被忽视.
readonly：这个布尔属性用于指明用户无法修改控件的值。
required：这个属性指定用户在提交表单之前必须为该元素填充值. 当 type 属性是 hidden,image 或者按钮类型(submit,reset,button)时不可使用. :optional 和 :required CSS 伪元素的样式将可以被该字段应用作外观.
src：如果 type 属性的值是 image, 这个属性指定了按钮图片的路径; 否则它被忽视.
form：指定跟自身相关联的表单。值必须为本文档内的表单的 ID，如果未指定，就是跟当前所在的表单元素相关联。这就允许你在文档的任意地方放置文本域元素。

2. Radio Buttons 单选按钮

<input type="radio"> 标签定义了表单单选框选项，实现一个单选组内使用单选按钮只需让radio的name属性值相同。

<form>
  <input type="radio" name="sex" value="male" />Male<br />
  <input type="radio" name="sex" value="female" />Female
</form>

3. Checkboxes 复选框

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>
  <input type="checkbox" name="vehicle" value="Bike" />I have a bike<br />
  <input type="checkbox" name="vehicle" value="Car" />I have a car
</form>

4. Submit Button 提交按钮

<input type="submit"> 定义了提交按钮.

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<form name="input" action="html_form_action.php" method="get">
  Username: <input type="text" name="user" />
  <input type="submit" value="Submit" />
</form>

5. textarea 多行文本域

textarea 元素表示一个多行纯文本编辑控件。

实例:

<textarea name="textarea" rows="10" cols="50">Write something here</textarea>

属性说明： rows：元素的输入文本的行数（显示的高度）。
cols：文本域的可视宽度。必须为正数，默认为20 (HTML5)。

6. select 下拉框

select 元素是一种表单控件，可创建选项菜单。菜单内的选项为 option , 可以由 optgroup 元素分组。选项可以被用户预先选择。

实例:

<select name="city">
  <option value="广东">广东</option>
  <option value="广西" selected>广西</option>
  <option value="上海">上海</option>
</select>

属性说明： selected：表示默认选中选项

7. optgroup 下拉框分组

optgroup 元素会创建包含在一个 select 元素中的一组选项

实例:

<select name="city">
  <optgroup label="广东">
    <option value="广州">广州</option>
    <option value="深圳">深圳</option>
  </optgroup>
  <optgroup label="广西">
    <option value="桂林">桂林</option>
    <option value="南宁">南宁</option>
  </optgroup>
</select>

属性说明： selected：表示默认选中选项 label：
选项组的名字，当在用户界面标记(label)选项的时候可以被浏览器使用。使用这个元素时必须加上这个属性
Last Updated:
Contributors: zerojs