首頁 > 文章 > web前端 > HTML5-關於表單使用的程式碼實例總結

HTML5-關於表單使用的程式碼實例總結

黄舟原創: 2017-03-11 16:55:071993瀏覽

當使用form提交資料：在HTML4中，input、button和其他與表單相關的元素必須放在form元素中；在HTML5中，這條限制不復存在。可以將這類元素與文件中任何地方的表單掛鉤（透過表單元素的form屬性【下述範例3】）。

一、製作基本表單

範例1：新標籤頁顯示表單結果

<!doctype html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Form Target</title></head><body>
    <form action="http://localhost:8888/form/userInfo" enctype="application/x-www-form-urlencoded"
          target="_blank" method="post" autocomplete="off">
        <p>
            <label for="username">用户名:</label>
            <input type="text" name="username" id="username" autofocus>
        </p>
        <p>
            <label for="password">密码:</label>
            <input type="password" id="password" autocomplete="on"><br>
        </p>
        <p>
            <label for="address">地址:</label>
            <input type="text" name="address" id="address" disabled value="北京市">
        </p>
        <p>
            <input type="hidden" name="source" value="直接来源">
        </p>
        <button>提交</button>
    </form></body></html>

HTML5-關於表單使用的程式碼實例總結

##1.表單的action屬性

action屬性說明了提交時瀏覽器應該把從使用者收集的資料傳送到什麼地方【上述範例中，提交資料傳送到「http: //www.php.cn/:8888/form/userInfo」】。如果action屬性指定相對URL，那麼該值會被嫁接在目前頁的URL（如果使用了base元素，則是該元素的href屬性值）的後面。

2. 設定資料編碼

enctype屬性制定了瀏覽器對傳送給伺服器的資料採用的編碼方式【上述範例中，採用預設編碼方式】。

值說明#application/x-www-form-urlencoded 預設編碼方式；除了無法用來上傳檔案到伺服器外，它適用於各種類型的表單multipart/form-data一般只用於需要上傳檔案到伺服器的表單text/plain謹慎使用；各瀏覽器實作方式不同

#3. 控製表單自動完成功能

autocomplete屬性，自動填寫表單；預設on，設定為off時，禁止瀏覽器自動填入表單。各個input元素對autocomplete屬性的設定可以覆蓋form元素上的行為方式。

4. 指定表單回饋資訊的目標顯示位置

預設瀏覽器會以提交表單後伺服器回饋的資訊取代表單所在的原始頁面。這可以用form元素的target屬性來改變【上述範例中，結果會在新標籤頁顯示】。

值說明#_blank將瀏覽器回饋資訊顯示在新視窗（或標籤頁）中_parent將瀏覽器回饋資訊顯示在父窗框組中_self將瀏覽器回饋資訊顯示在目前視窗中（預設行為）_top#將瀏覽器回饋資訊顯示在頂層視窗中將瀏覽器回饋資訊顯示在指定窗框中

5. 设置表单名称

name属性可以用来为表单设置一个独一无二uerde标识符。
注意，input元素不设置name属性，那么用户在其中输入的数据在提交表单时不会被发送给服务器【上述示例中，“密码”字段不会被提交】。

6. 在表单中添加说明标签

可以为input元素配一个label元素，将label元素的for属性设置为input的id值，这样input元素和label元素就关联起来，有助于屏幕阅读器和其他残障辅助技术对表单的处理。

7. 自动聚焦到某个input元素

autofocus属性可以聚焦于某个input元素【上述示例中，“用户名”字段被自动聚焦】
注意，多个元素都设置了该属性，那么浏览器将会自动聚焦于其中的最后一个元素。

8. 禁用单个input元素

设置disabled属性，可以禁用input元素。
注意，被禁用的元素不能被提交【上述示例中，“地址”字段被禁用未被提交到服务器】。

二、对表单元素编组

可以使用fieldset元素将一些元素组织在一起。
示例2：将相关表单元素进行编组

<!doctype html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>元素分组</title></head><body>
    <form action="http://localhost:8888/form/userInfo" method="post" target="_blank">
       <fieldset>
           <legend>用户基本信息</legend>
           <p>
               <label for="username">用户名:</label>
               <input type="text" name="username" id="username">
           </p>
           <p>
               <label for="address">地址:</label>
               <input type="text" name="address" id="address">
           </p>
       </fieldset>
        <fieldset>
            <legend>用户爱好</legend>
            <p>
                <label for="fave1">#1:</label>
                <input type="text" name="fave1" id="fave1">
            </p>
            <p>
                <label for="fave2">#2:</label>
                <input type="text" name="fave2" id="fave2">
            </p>
            <p>
                <label for="fave1">#3:</label>
                <input type="text" name="fave3" id="fave3">
            </p>
        </fieldset>
        <button>提交</button>
    </form></body></html>

HTML5-關於表單使用的程式碼實例總結
说明：

通过设置fieldset元素的disabled属性，可以一次性地禁用多个input元素；
添加lagend元素，可以向用户提供相关说明，但其必须为fieldset元素的第一个子元素。

三、使用button元素

表：button元素的type属性的值

值	说明
submit	提交表单（默认行为）
reset	重置表单
button	无具体语义

表：type属性设置为submit时button元素的额外属性

属性	说明
form	指定按钮相关的表单
formaction	覆盖form元素的action属性，另行指定表单将要提交到的URL
formenctype	覆盖form元素的enctype属性，另行指定表单的编码方式
formmethod	覆盖form元素的method属性
formtarget	覆盖form元素的target属性
formnovalidate	覆盖form元素的novalidate属性，表明是否应执行客户端数据有效性检查

示例3：button元素提交表单

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>button属性控制表单</title></head><body>
    <form id="myForm"></form>
    <p>
        <label for="username">用户名:</label>
        <input type="text" name="username" id="username" form="myForm">
    </p>
    <p>
        <label for="address">地址:</label>
        <input type="text" name="address" id="address" form="myForm">
    </p>
    <button type="submit" form="myForm" formaction="http://localhost:8888/form/userInfo" formmethod="post">提交</button>
    <button type="reset" form="myForm">重置</button></body></html>

以上是HTML5-關於表單使用的程式碼實例總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：具體介紹HTML5-建立HTML文檔下一篇：具體介紹HTML5-建立HTML文檔

看更多