• HTML <!--...--> 注释标签
  • HTML <!DOCTYPE> 声明
  • HTML <a> 标签
  • HTML <abbr> 标签
  • HTML <acronym> 标签 - HTML5 不支持
  • HTML <address> 标签
  • HTML <applet> 标签 - HTML5 不支持
  • HTML <area> 标签
  • HTML <article> 标签
  • HTML <aside> 标签
  • HTML <audio> 标签
  • HTML <b> 标签
  • HTML <base> 标签
  • HTML <basefont> 标签 - HTML5 不支持
  • HTML <bdi> 标签
  • HTML <bdo> 标签
  • HTML <big> 标签 - HTML5 不支持
  • HTML <blockquote> 标签
  • HTML <br> 标签
  • HTML <button> 标签
  • HTML <canvas> 标签
  • HTML <caption> 标签
  • HTML <body> 标签
  • HTML <center> 标签 - HTML5 不支持
  • HTML <cite> 标签
  • HTML <code> 标签
  • HTML <col> 标签
  • HTML <colgroup> 标签
  • HTML <command> 标签
  • HTML <datalist> 标签
  • HTML <dd> 标签
  • HTML <dl> 标签
  • HTML <dt> 标签
  • HTML <del> 标签
  • HTML <details> 标签
  • HTML <dfn> 标签
  • HTML <dialog> 标签
  • HTML <dir> 标签 - HTML5 不支持
  • HTML <div> 标签
  • HTML <embed> 标签
  • HTML <fieldset> 标签
  • HTML <figcaption> 标签
  • HTML <figure> 标签
  • HTML <font> 标签 - HTML5 不支持
  • HTML <footer> 标签
  • HTML <frame> 标签 - HTML5 不支持
  • HTML <frameset> 标签 - HTML5 不支持
  • HTML <head> 标签
  • HTML <header> 标签
  • HTML <hgroup> 标签
  • HTML <h1> - <h6> 标签
  • HTML <hr> 标签
  • HTML <em> 标签
  • HTML <i> 标签
  • HTML <iframe> 标签
  • HTML <img> 标签
  • HTML <input> 标签
  • HTML <ins> 标签
  • HTML <kbd> 标签
  • HTML <keygen> 标签
  • HTML <label> 标签
  • HTML <legend> 标签
  • HTML <li> 标签
  • HTML <link> 标签
  • HTML <map> 标签
  • HTML5 <mark> 标签
  • HTML <menu> 标签
  • HTML <meta> 标签
  • HTML <meter> 标签
  • HTML <nav> 标签
  • HTML <noframes> 标签HTML5不支持该标签
  • HTML <noscript> 标签
  • HTML <object> 标签
  • HTML <ol> 标签
  • HTML <optgroup> 标签
  • HTML <output> 标签
  • HTML <option> 标签
  • HTML <p> 标签
  • HTML <param> 标签
  • HTML <form> 标签
  • HTML <pre> 标签
  • HTML <html> 标签
  • HTML5 <progress> 标签
  • HTML <q> 标签
  • HTML <rp> 标签
  • HTML <rt> 标签
  • HTML <ruby> 标签
  • HTML <s> 标签
  • HTML <samp> 标签
  • HTML <script> 标签
  • HTML <section> 标签
  • HTML <select> 标签
  • HTML <small> 标签
  • HTML <source> 标签
  • HTML <span> 标签
  • HTML <strike> 标签 - HTML5 不支持
  • HTML <strong> 标签
  • HTML <style> 标签
  • HTML <sub> 标签
  • HTML <summary> 标签
  • HTML <sup> 标签
  • HTML <table> 标签
  • HTML <tbody> 标签
  • HTML <td> 标签
  • HTML <textarea> 标签
  • HTML <tfoot> 标签
  • HTML <th> 标签
  • HTML <thead> 标签
  • HTML <time> 标签
  • HTML <title> 标签
  • HTML <tr> 标签
  • HTML <track> 标签
  • HTML <tt> 标签 - HTML5 不支持
  • HTML <u> 标签
  • HTML <ul> 标签
  • HTML <var> 标签
  • HTML <video> 标签
  • HTML <wbr> 标签
  •  
    当前位置:  教程>HTML标签参考手册

    HTML <form> 标签

     
        发布时间:2017-1-18  


        本文导语: html form有什么用途?如何使用? <form> 标签用于创建 HTML 表单。表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset和 label 等元素。表单用于向...

     

    html form有什么用途?如何使用?

         <form> 标签用于创建 HTML 表单。表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus

    textareafieldsetlabel 等元素。表单用于向服务器传输数据。

    <form> 标签实例(www.169it.com)

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

    <form action="/demo_form.html" method="get">
      First name: <input type="text" name="fname"><br>
      Last name: <input type="text" name="lname"><br>
      <input type="submit" value="提交">
    </form>


    浏览器支持

    Internet Explorer Firefox Opera Google Chrome Safari

    所有主流浏览器都支持 <form> 标签。


    标签定义及使用说明

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

    <form> 元素包含一个或多个如下的表单元素:

    HTML 表单详细介绍

    HTML 表单用于搜集不同类型的用户输入。

    <form> 元素

    HTML 表单用于收集用户输入。

    <form> 元素定义 HTML 表单:

    实例

    <form action="/action_page.html">
     .
    form elements
     .
    </form>

    HTML 表单包含表单元素。

    表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

    <input> 元素

    <input> 元素是最重要的表单元素。

    <input> 元素有很多形态,根据不同的 type 属性

    这是本章中使用的类型:

    类型 描述

    text 定义常规文本输入。

    radio 定义单选按钮输入(选择多个选择之一)

    submit 定义提交按钮(提交表单)

    HTML 表单文本输入

    <input type="text"> 定义用于文本输入的单行输入字段:

    实例

    <form action="/action_page.html">
     First name:<br>
    <input type="text" name="firstname">
    <br>
     Last name:<br>
    <input type="text" name="lastname">
    </form>

    注释:表单本身并不可见。还要注意文本字段的默认宽度是 20 个字符。

    HTML 表单单选按钮输入

    <input type="radio"> 定义单选按钮。

    单选按钮允许用户在有限数量的选项中选择其中之一:

    实例

    <form action="/action_page.html">
    <input type="radio" name="sex" value="male" checked>Male
    <br>
    <input type="radio" name="sex" value="female">Female
    </form>

    <input type="submit"> 定义用于向表单处理程序(form-handler)提交表单的按钮。

    表单处理程序通常是包含用来处理输入数据脚本的服务器页面。

    表单处理程序在表单的 action 属性中指定:

    实例

    <form action="/action_page.html">
    First name:<br>
    <input type="text" name="firstname" value="Mickey">
    <br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse">
    <br><br>
    <input type="submit" value="Submit">
    </form>

    HTML 表单 Action 属性的作用及用法介绍

    action 属性定义在提交表单时执行的动作。向服务器提交表单的通常做法是使用提交按钮。通常,表单会被提交到 web 服务器上的网页。

    在上面的例子中,指定了某个服务器脚本来处理被提交表单:

    <form action="/it-htmltag/action__a class=/index.html"inlink" href="/tag/page/index.html" target="_blank">page.php">

    如果省略 action 属性,则 action 会被设置为当前页面。

    HTML 表单Method 属性

    method 属性规定在提交表单时所用的 HTTP 方法GETPOST):

    <form action="/it-htmltag/action_page.html" method="GET">

    或:

    <form action="/it-htmltag/action_page.html" method="POST">

    HTML 表单何时使用 GET?

    您能够使用 GET(默认方法):

    如果表单提交是被动的(比如搜索引擎查询),并且没有敏感信息

    当您使用 GET 时,表单数据在页面地址栏中是可见的:

    action_page.php?firstname=Mickey&lastname=Mouse

    注释:GET 最适合少量数据的提交。浏览器会设定容量限制

    HTML 表单何时使用 POST?

    您应该使用 POST:

    如果表单正在更新数据,或者包含敏感信息(例如密码)。

    POST 的安全性更加,因为在页面地址栏中被提交的数据是不可见的。

    Name 属性

    如果要正确地被提交,每个输入字段必须设置一个 name 属性。

    本例只会提交 "Last name" 输入字段:

    实例

    <form action="/it-htmltag/action_page.html">
    First name:<br>
    <input type="text" value="Mickey">
    <br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse">
    <br><br>
    <input type="submit" value="Submit">
    </form>

    用 <fieldset> 组合表单数据

    <fieldset> 元素组合表单中的相关数据

    <legend> 元素为 <fieldset> 元素定义标题。

    实例

    <form action="/action_page.html">
    <fieldset>
    <legend>Personal information:</legend>
    First name:<br>
    <input type="text" name="firstname" value="Mickey">
    <br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse">
    <br><br>
    <input type="submit" value="Submit"></fieldset>
    </form>



    HTML 4.01 与 HTML5之间的差异

    HTML5 新增了两个新的属性:autocomplete 和 novalidate,同时不再支持 HTML 4.01 中的某些属性。


    HTML 与 XHTML 之间的差异

    在 XHTML 中,name 属性已被废弃。使用全局 id 属性代替。


    属性

    New :HTML5 中的新属性。

    属性描述
    acceptMIME_typeHTML5 不支持。规定服务器接收到的文件的类型。(文件是通过文件上传提交的)
    accept-charsetcharacter_set规定服务器可处理的表单数据字符集
    actionURL规定当提交表单时向何处发送表单数据。
    autocompleteNewon
    off
    规定是否启用表单的自动完成功能。
    enctypeapplication/x-www-form-urlencoded
    multipart/form-data
    text/plain
    规定在向服务器发送表单数据之前如何对其进行编码。(适用于 method="post" 的情况)
    methodget
    post
    规定用于发送表单数据的 HTTP 方法。
    nametext规定表单的名称。
    novalidateNewnovalidate如果使用该属性,则提交表单时不进行验证。
    target_blank
    _self
    _parent
    _top
    规定在何处打开 action URL。

    HTML Form 属性

    HTML <form> 元素,已设置所有可能的属性,是这样的:

    实例

    <form action="/action_page.html" method="GET" target="_blank" accept-charset="UTF-8"
    ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
    .
    form elements
     .
    </form>

    <form> 元素属性:

    属性 描述

    accept-charset 规定在被提交表单中使用的字符集(默认:页面字符集)。

    action 规定向何处提交表单的html iis7站长之家(URL)(提交页面)。

    autocomplete 规定浏览器应该自动完成表单(默认:开启)。

    enctype 规定被提交数据的编码(默认:url-encoded)。

    method 规定在提交表单时所用的 HTTP 方法(默认:GET)。

    name 规定识别表单的名称(对于 DOM 使用:document.forms.name)。

    novalidate 规定浏览器不验证表单。

    target 规定 action 属性中地址的目标(默认:_self)。



    全局属性

    <form> 标签支持 HTML 的全局属性。


    事件属性

    <form> 标签支持 HTML 的事件属性。



    • 本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
      本站(WWW.)站内文章除注明原创外,均为转载,整理或搜集自网络.欢迎任何形式的转载,转载请注明出处.
      转载请注明:文章转载自:[169IT-IT技术资讯]
      本文标题:HTML <form> 标签
    相关文章推荐:


    站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3