HTML5-關於表單使用的程式碼實例總結-H5教程-PHP中文網

首頁

web前端

H5教程

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

黄舟

Mar 11, 2017 pm 04:55 PM

當使用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

H5和HTML5之間的連接：相似性和差異Apr 24, 2025 am 12:01 AM

H5和HTML5是不同的概念：HTML5是HTML的一個版本，包含新元素和API；H5是基於HTML5的移動應用開發框架。 HTML5通過瀏覽器解析和渲染代碼，H5應用則需要容器運行並通過JavaScript與原生代碼交互。

H5代碼的基礎：密鑰元素及其目的Apr 23, 2025 am 12:09 AM

HTML5的關鍵元素包括、、、、、等，用於構建現代網頁。 1.定義頭部內容，2.用於導航鏈接，3.表示獨立文章內容，4.組織頁面內容，5.展示側邊欄內容，6.定義頁腳，這些元素增強了網頁的結構和功能性。

HTML5和H5：了解常見用法Apr 22, 2025 am 12:01 AM

HTML5和H5沒有區別，H5是HTML5的簡稱。 1.HTML5是HTML的第五個版本，增強了網頁的多媒體和交互功能。 2.H5常用於指代基於HTML5的移動網頁或應用，適用於各種移動設備。

HTML5：現代網絡的基礎（H5）Apr 21, 2025 am 12:05 AM

HTML5是超文本標記語言的最新版本，由W3C標準化。 HTML5引入了新的語義化標籤、多媒體支持和表單增強，提升了網頁結構、用戶體驗和SEO效果。 HTML5引入了新的語義化標籤，如、、、等，使網頁結構更清晰，SEO效果更好。 HTML5支持多媒體元素和，無需第三方插件，提升了用戶體驗和加載速度。 HTML5增強了表單功能，引入了新的輸入類型如、等，提高了用戶體驗和表單驗證效率。

H5代碼：編寫清潔有效的HTML5Apr 20, 2025 am 12:06 AM

如何寫出乾淨高效的HTML5代碼？答案是通過語義化標籤、結構化代碼、性能優化和避免常見錯誤。 1.使用語義化標籤如、等，提升代碼可讀性和SEO效果。 2.保持代碼結構化和可讀性，使用適當縮進和註釋。 3.優化性能，通過減少不必要的標籤、使用CDN和壓縮代碼。 4.避免常見錯誤，如標籤未閉合，確保代碼有效性。