• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • <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
    • enctypemethod属性值为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>

    下篇:<textarea>