• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
    •
    位置： html5 中文手册 -> html5 标签 -> html5 表单

    <form>

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

    浏览器支持

    所有浏览器都支持

    示例

    带有两个输入字段和一个提交按钮的 HTML 表单：

    <form action="demo_form.php" method="get">
	first name:<input type="text" name="fname"><br>
	last name:<input type="text" name="lname"><br>
	<input type="submit" value="submit">
</form>

    定义和用法

    <form>标签创建供用户输入的表单。

    表单可包含文本域，复选框，单选按钮等等。表单用于向指定的 URL 传递用户数据。

    属性

    属性描述45
    action定义一个 URL。当点击提交按钮时，向这个 URL 发送数据。45
    data供自动插入数据。5
    replace定义表单提交时所做的事情。5
    accept处理该表单的服务器可正确处理的内容类型列表（用逗号分隔）。45
    accept-charset表单数据的可能的字符集列表（逗号分隔）。默认值是"unknown"。45
    enctype用于对表单内容进行编码的 MIME 类型。45
    method用于向 action URL 发送数据的 HTTP 方法。默认是 get。45
    name为表单定义一个唯一的名称。不支持。用 id 代替。4
    target在何处打开目标 URL。45
    • enctype当method属性值为post时，enctype 就是将表单的内容提交给服务器的MIME 类型。可能的取值有：
      • application/x-www-form-urlencoded：未指定属性时的默认值。
      • multipart/form-data：此值用于一个type属性设置为"file"的<input>元素。
      • text/plain：(HTML5)

      此值可以被<button>或者<input>元素中的formenctype属性覆盖。

    • method浏览器使用这种HTTP方式来提交表单。可能的值有：
      • post：指的是HTTPPOST 方法；表单数据会包含在表单体内然后发送给服务器.
      • get：指的是HTTPGET 方法；表单数据会附加在action属性的URI中，并以'?'作为分隔符，然后这样得到的 URI 再发送给服务器。如果这样做（数据暴露在 URI 中）没什么副作用，或者表单仅包含ASCII字符时，再考虑使用这种方法吧。
      • dialog：Use when the form is inside a<dialog>element to close the dialog when submitted.

      此值可以被<button>、<input type="submit">或<input type="image">元素中的formmethod属性覆盖。

    • name表单的名称。在 HTML4 中，此用法不被推荐（作为替代，应该使用id）。HTML5中，一个文档中的多个表单当中，name必须唯一而不仅仅是一个空字符串。
    • novalidateHTML5新增
      此布尔类型的属性指的是提交时表单是否处于未验证状态。如果此属性没有指定(因此此表单是验证通过的)，此默认设置可以被属于此表单的<button>、<input type="submit">或<input type="image">元素中的formnovalidate属性覆盖。
    • target一个名字或者说关键字，用来指示在提交表单之后，在哪里显示收到的回复。在 HTML4 里，这是一个用于 frame 的名字/关键字。在 HTML5 里，这是一个用于browsing context 浏览器上下文的名字/关键字（举例来说，标签页，窗口，或者行内 frame）。如下的关键字含有特别的含义：
      • _self：在当前 HTML4 或 HTML5 文档页面重新加载返回值。是默认值。译注：也就是说，如果此文档在一个frame中的话，self是在当前frame（document）中重新加载的，而不是整个页面（window）。
      • _blank：以新的 HTML4 或 HTML5 文档窗口加载返回值。
      • _parent：在父级的 frame 中以 HTML4 或 HTML 5 文档形式加载返回值，如果没有父级的frame，行为和_self一致。
      • _top：如果是 HTML4 文档：清空当前文档，加载返回内容；HTML5：在当前文档的最高级内加载返回值，如果没有父级，和_self的行为一致。
      • iframename：返回值在指定<iframe>中显示。

      HTML5：此值可以被<button>、<input type="submit">或<input type="image">元素中的formtarget属性覆盖。

    HTML 4.01 与 HTML 5 之间的差异

    在 HTML 5 中有一些新属性，同时不再支持 HTML 4.01 中的一些属性。

    在 HTML 5 中有一个新属性：replace。它定义表单被提交后所做的事情。

    例子

    <!-- 一个简单的表单，会发送一个 get 请求 -->
<form action="" method="get">
  <label for="get-name">name:</label>
  <input id="get-name" type="text" name="name">
  <input type="submit" value="save">
</form>

<!-- 一个简单的表单，发送 post 请求 -->
<form action="" method="post">
  <label for="post-name">name:</label>
  <input id="post-name" type="text" name="name">
  <input type="submit" value="save">
</form>

<!-- 使用 fieldset、legend，和 label 的表单 -->
<form action="" method="post">
  <fieldset>
    <legend>title</legend>
    <input type="radio" name="radio" id="radio">
    <label for="radio">click me</label>
  </fieldset>
</form>

    上篇：<fieldset>

    下篇：<input>