表單

本文轉載自查看原文 2021-10-02 19:17 124 前端/ HTML

表單

表單是HTML中獲取用戶輸入的手段。它對於Web應用系統極其重要，然而HTML定義的功能落后於表單的使用方式已有多年。在HTML5中，整個表單系統已經徹底改造過，面貌煥然一新，標准的步伐已經跟上了表單的應用實踐。

這里介紹的是HTML表單的基礎知識。從定義一個非常簡單的表單開始，通過對它的擴充演示如何配置和控制表單工作的方式。

制作基本表單

制作一個基本的表單需要三個元素：form、input和button元素。代碼清單1展示了一個含有簡單表單的HTML文檔。

代碼清單1 一個簡單的HTML表單

<!DOCTYPE HTML>
<html>
    <head>
        <title>黃子涵</title>
        <meta name="作者" content="黃子涵"/>
        <meta name="描述" content="黃子涵是帥哥！"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    </head>
    <body>
        <form method="post" action="http://120.77.46.246/form">
            <input name="fave"/>
            <button>黃子涵的按鈕</button>
        </form>
    </body>
</html>

其顯示效果如下圖所示。

這個表單實在太簡單了，沒有多少用處。

定義表單

先從form元素講起，該元素表示HTML頁面上的表單。下表概括了form元素。

form元素

目前只要知道form元素告訴瀏覽器它處理的是HTML表單就行了。

第二種關鍵元素是input，其用途是收集用戶輸入數據。從上圖可以看到，那個input元素在瀏覽器中顯示為一個簡單的文本框。用戶就在這個文本框中輸入內容。這是最基本的一種input元素。后面會介紹收集用戶輸入數據的多種選擇（包括HTML5中新增的一些很棒的特性），下表概括了input元素。

input元素

input元素的屬性多達29個，具體有哪些可用取決於type屬性的值。

提示

除了input元素，還有其他一些元素可以用來收集用戶輸入的數據。

前面的例子中要講的最后一個元素是button。用戶需要有一種方法告訴瀏覽器：所有數據已經輸入完畢，該把它們發給服務器了。這個事情多半是用button元素來做（不過還有一些其他辦法可用）。下表概括了button元素。

button元素

button元素有多種用途。該元素用在form元素中且沒有設置任何屬性時，其作用是告訴瀏覽器把用戶輸入的數據提交給服務器。

查看表單數據

這個示例需要有一個接收瀏覽器發送的數據的服務器。

代碼清單2 腳本文件formecho.js

var http = require('http');
var querystring = require('querystring');

http.createSever(function (req, res)) {
    switch (req.url) {
        case '/form':
        if(req.method == 'POST') {
            console.log("[200]" + req.method + "to" + req.url);
            var fullBody = '';
            req.on('data', function(chunk) {
                fullBody += chunk.toString();
            });
            req.on('end', function() {
                res.writeHead(200, "OK", {'Content-Type': 'text/html'});
                res.write('<html><head><title><title><head><body>');
                res.write('<style>th, td {text-align:left; padding:5px; color:black}\n');
                res.write('th {background-color:grey; color:white; min-width:10em}\n');
                res.write('td {background-color:lightgrey}\n');
                res.write('caption {font-weight:bold}</style>');
                res.write('<table border="1"><caption>Form Data</caption>');
                res.write('<tr><th>Name</th><th>Value</th>');
                var dBody = querystring.parse(fullBody);
                for (var prop in dBody) {
                    res.write("<tr><td>" + prop + "</td><td>" + dBody[prop] + "</td></tr>");
                }
                res.write('</table></body></html>');
                res.end();
            });
        } else {
            console.log("[405]" + req.method + "to" + req.url);
            res.writeHead(405, "Method not supported", {'Content-Type': 'text/html'});
            res.end('<html><head><title>405 - Method not supported</title></head><body>' +
                    '<h1>Method not supported.</h1></body></html>');
        }
        break;
      default:
        res.writeHead(404, "Not found", {'Content-Type': 'text/html'});
        res.end('<html><head><title>405 - Not found</tile></head><body>' +
                '<h1>Not found.</h1><body></html>');
        console.log("[404]" + req.method + "to" + req.url);
    };
}).listen(8080);

這個腳本將瀏覽器發來的數據匯總並返回一個簡單的HTML文檔，在文檔中以HTML表格的形式將那些數據顯示出來。它在8080端口監聽瀏覽器的連接請求，並且只處理瀏覽器用HTTP POST方法發送到/form這個URL的表單數據。這個腳本保存在一個名為formecho.js的文件中。要運行這個腳本程序，可在服務器上打開一個命令窗口並輸入如下命令:

bin\node.exe formecho.js

titan服務器運行的操作系統是Windows Server 2008 R2。讀者如果使用其他操作系統的話，用來啟動Node.js的命令會有所不同。在示例表單的文本框中輸入Apples然后按下Submit Vote按鈕提交表單，服務器端腳本的輸出內容在瀏覽器中顯示的結果如下圖所示。（這里弄了很久都搞不明白，所以放棄了）

結果中只有一項數據，這是因為在示例表單中只有一個input元素。表格的Name列中顯示的值為fave，它正是為input元素的name屬性設置的值。表格的Value列中顯示的值為Apples，它正是按下Submit Vote按鈕之前在文本框中輸入的內容。后面制作更復雜的表單時，Node.js腳本的輸出信息都將以表格形式顯示。

配置表單

前面已經制作過一個包含簡單表單的HTML文檔，並用Node.js顯示了發送給服務器的數據。現在該介紹一下可用於表單及其內容的各種基本配置選項了。

配置表單的action屬性

action屬性說明了提交表單時瀏覽器應該把從用戶收集的數據發送到什么地方。我想把數據提交給自己編寫的Node.js腳本處理，所以要把表單發至開發服務器titan上位於8080端口的/form這個URL。代碼清單1中的表單已經這樣做了：

如果不設置form元素的action屬性，那么瀏覽器會將表單數據發到用以加載該HTML文檔的URL。這看似毫無意義，其實不然，好幾個流行的Web應用系統開發框架都依賴於這個特性。

如果為action屬性指定的是一個相對URL，那么該值會被嫁接在當前頁的URL的后面。代碼清單3示范了如何用base元素設置表單數據的發送目的地。

代碼清單3 使用base元素設置表單數據的發送目的地

<!DOCTYPE HTML>
<html>
    <head>
        <title>黃子涵</title>
        <meta name="作者" content="黃子涵"/>
        <meta name="描述" content="黃子涵是帥哥！"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
        <base href="http://120.77.46.246"/>
    </head>
    <body>
        <form method="post" action="/form">
            <input name="fave"/>
            <button>黃子涵的按鈕</button>
        </form>
    </body>
</html>

警告

base元素將影響HTML文檔中所有的相對URL，而不只是form元素。

配置HTTP方法屬性

method屬性指定了用來將表單數據發送到服務器的HTTP方法。允許的值有get和post這兩個，它們分別對應於HTTP的GET和POST方法。未設置method屬性時使用的默認值為get。這有點令人遺憾，因為大多數表單都需要用HTTP POST方法。前面的例子中為表單指定的正是post這個值：

GET請求用於安全交互(safe interaction)，同一個請求可以發起任意多次而不會產生額外作用。POST請求則用於不安全交互，提交數據的行為會導致一些狀態的改變。對於Web應用程序多半釆用后一種方式。這些規矩是W3C（World Wide Web Consortium，萬維網聯盟）定的，參www.w3.org/Provider/Style/URI 。

一般而言，GET請求應該用於獲取只讀信息，而POST請求則應該用於會改變應用程序狀態的各種操作。使用恰當的請求很重要。如果拿不准該用哪個，寧可謹慎一點，就用POST方法好了。

提示

Node.js腳本只響應POST請求。

配置數據編碼

enctype屬性指定了瀏覽器對發送給服務器的數據采用的編碼方式。該屬性可用的值有三個，如下表所示。

enctype屬性允許的值

值	說明
application/x-www-form-urlencoded	這是未設置enctype屬性時使用的默認編碼方式。它不能用來將文件上傳到服務器
multipart/form-data	該編碼方式用於將文件上傳到服務器
text/plain	該編碼方式因瀏覽器而異

為了搞清這些編碼方式的工作機制，需要先在表單中再添加一個input元素，如代碼清單4所示。

代碼清單4 在表單中添加一個input元素

<!DOCTYPE HTML>
<html>
    <head>
        <title>黃子涵</title>
        <meta name="作者" content="黃子涵"/>
        <meta name="描述" content="黃子涵是帥哥！"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    </head>
    <body>
        <form method="post" action="/form">
            <input name="fave"/>
            <input name="name"/>
            <button>黃子涵的按鈕</button>
        </form>
    </body>
</html>

添加第二個input元素是為了從用戶那里收集兩項數據。讀者可能已經看出，這里要設計的表單是用來讓用戶為自己喜歡的水果投票的。新增的input元素用來獲取用戶的姓名。從代碼清單中可以看到，該元素的name屬性的值被設置成了name。為演示各種表單編碼方式的效果，實驗中將把表單的enctype屬性分別設置為每一種可用的編碼類型。每一次在文本框中輸入的數據都是相同的。第一個文本框中輸入的是Apples，第二個文本框中輸入的是Adam Freeman（姓氏和名字之間有一個空格）。

application/x-www-form-urlencoded編碼

這是默認的編碼方式，除了不能用來上傳文件到服務器外，它適用於各種類型的表單。每項數據的名稱和值都與URL采用同樣的編碼方案（這是該編碼方式名稱中urlencoded這個部分的由來）。示例表單的數據釆用這種編碼后的結果如下：

fave=Apples&name=Adam+Freeman

其中的特殊字符已經替換成了對應的HTML實體。數據項的名稱和值以等號（=）分開，各組數據項間則以符號&分開。

`multipart/form-data`編碼

multipart/form-data編碼走的是另一條路子。它更為冗長，處理起來更加復雜。這也是它一般只用於需要上傳文件到服務器的表單的原因————這個任務用默認編碼方式無法辦到。示例表單的數據采用這種編碼方式的結果如下:

------WebkitFormBoundary2qgCsuH4ohZ5eObF 
Content-Disposition:form-data;name="fave"

Apples

------webKitFormBoundary2qgCsuH4ohZ5eObF 
Content-Disposition:form-data;name="name"

Adam Freeman

------WebKitFormBoundary2qgCsuH4ohZ5eObF--

fave=Apple 

name=Adam Freeman

text/plain編碼

這種編碼要謹慎使用。對於在這種方案中數據應該如何編碼並沒有正式的規范，主流瀏覽器各有各的數據編碼方法。例如，Chrome使用與application/x-www-form-urlencoded方案一樣的數據編碼方法，而Firefox則將數據編碼成如下形式：

fave=Apple

name=Adam Freeman

在這個結果中，每個數據項占據一行，特殊字符並未進行編碼。建議不要使用這種編碼方案, 各種瀏覽器實現它的方式各不相同，因此其結果難以預料。

控制表單的自動完成功能

瀏覽器可以記住用戶輸入表單的數據，並在再次遇到類似表單的時候自動使用這些數據幫用戶填寫。這種技術可以讓用戶免於反復輸入同樣的數據之苦。這方面的一個典型例子是用戶在線購買商品或服務的時候輸入的姓名和送貨信息。每個網站都有自己的購物車和注冊程序，但是瀏覽器可以使用用戶在其他表單中輸入過的數據加快結賬過程。用以判斷哪些數據可以重復使用的技術因瀏覽器而異，不過一種常用的方法是查看input元素的name屬性。

一般來說，表單的自動完成功能有益於用戶，對Web應用系統也有一點幫助。不過有時網頁作者並不想讓瀏覽器自動填寫表單。代碼清單5示范了如何使用form元素的autocomplete屬性達到這個目的。

代碼清單5 將form元素的autocomplete屬性設置為禁用

<!DOCTYPE HTML>
<html>
    <head>
        <title>黃子涵</title>
        <meta name="作者" content="黃子涵"/>
        <meta name="描述" content="黃子涵是帥哥！"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    </head>
    <body>
        <form autocomplete="off" method="post" action="http://120.77.46.246/form">
            <input name="fave"/>
            <input name="name"/>
            <button>黃子涵的按鈕</button>
        </form>
    </body>
</html>

autocomplete屬性允許的值有兩個：on和off。如果不設置這個屬性的話，其默認值為on，表示允許瀏覽器填寫表單。

input元素也有autocomplete屬性，可以用於單個元素的自動完成功能，如代碼清單6所示。

代碼清單6 設置input元素的autocomplete屬性

<!DOCTYPE HTML>
<html>
    <head>
        <title>黃子涵</title>
        <meta name="作者" content="黃子涵"/>
        <meta name="描述" content="黃子涵是帥哥！"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    </head>
    <body>
        <form autocomplete="off" method="post" action="http://120.77.46.246/form">
            <input autocomplete="on" name="fave"/>
            <input name="name"/>
            <button>黃子涵的按鈕</button>
        </form>
    </body>
</html>

form元素的autocomplete屬性設置的是表單中的input元素默認的行為方式。而各個input元素在該屬性上的設置可以覆蓋這個默認行為方式。上面的代碼清單正是這樣做的。此例在form元素上禁用了自動完成功能，但在第一個input元素上————僅是在這個元素上，又重新開啟了該功能。至於第二個input元素，因為沒有設置autocomplete屬性，所以釆用的是form層面的設置。

一般來說，最好讓自動完成功能保持開啟狀態。用戶習慣讓瀏覽器自動填寫表單，而且在網上辦理任何一種業務時往往都會用到好幾個表單。關閉這個功能干涉了用戶的偏好和工作習慣。有些網站對信用卡數據禁用自動完成功能，這個更有意義一點。不過即便如此，這種做法也要謹慎使用，要充分考慮各種理由。

指定表單反饋信息的目標顯示位置

默認情況下瀏覽器會用提交表單后服務器反饋的信息替換表單所在的原頁面。這可以用form元素的target屬性予以改變。該屬性的工作機制與a元素的target屬性一樣。可供選擇的目標如下表所示。

fonn元素的target屬性值

值	說明
`_blank`	將瀏覽器反饋信息顯示在新窗口（或標簽頁）中
`_parent`	將瀏覽器反饋信息顯示在父窗框組中
`_self`	將瀏覽器反饋信息顯示在當前窗口中（這是默認行為）
`_top`	將瀏覽器反饋信息顯示在頂層窗口中
`<frame>`	將瀏覽器反饋信息顯示在指定窗框中

這些值每一個都代表着一種瀏覽環境。_blank和_self這兩個值不言而喻。其他值則與窗框的使用相關。代碼清單7示范了如何設置form元素的target屬性。

代碼清單7 使用target屬性

<!DOCTYPE HTML>
<html>
    <head>
        <title>黃子涵</title>
        <meta name="作者" content="黃子涵"/>
        <meta name="描述" content="黃子涵是帥哥！"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    </head>
    <body>
        <form target="_blank" method="post" action="http://120.77.46.246/form">
            <input autocomplete="on" name="fave"/>
            <input name="name"/>
            <button>黃子涵的按鈕</button>
        </form>
    </body>
</html>

此例將target設置為_blank，讓瀏覽器將服務器的反饋信息顯示在新窗口或標簽頁中。這個修改的效果如下圖所示。

設置表單名稱

name屬性可以用來為表單設置一個獨一無二的標識符，以便使用DOM（Document Object Model，文檔對象模型）時區分各個表單。name屬性與全局屬性id不是一回事。后者在HTML文檔中多半用於CSS選擇器。代碼清單8展示的是一個設置了name屬性和id屬性的form元素。簡單起見，例中這兩個屬性使用了同樣的值。

代碼清單8 使用form元素的name屬性和id屬性

<!DOCTYPE HTML>
<html>
    <head>
        <title>黃子涵</title>
        <meta name="作者" content="黃子涵"/>
        <meta name="描述" content="黃子涵是帥哥！"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    </head>
    <body>
        <form name="黃子涵" id="黃子涵" method="post" action="http://120.77.46.246/form">
            <input name="fave"/>
            <input name="name"/>
            <button>黃子涵的按鈕</button>
        </form>
    </body>
</html>

提交表單時其name屬性值不會被發送給服務器，所以該屬性的用處僅限於DOM中，不像input元素的同名屬性那么重要。要是input元素不設置name屬性，那么用戶在其中輸入的數據在提交表單時不會被發送給服務器。

在表單中添加說明標簽

現在已經有了一個用來收集用戶輸入數據的表單，但是它用起來有點不方便。

這個表單明顯缺乏給用戶看的指示信息。誰會通過閱讀HTML源代碼來搞清每個文本框的用途呢？這個缺點可以用label元素彌補，該元素的用途是為表單中的每一個元素提供說明。下表概括了label元素。

label元素

代碼清單9 使用label元素

<!DOCTYPE HTML>
<html>
    <head>
        <title>黃子涵</title>
        <meta name="作者" content="黃子涵"/>
        <meta name="描述" content="黃子涵是帥哥！"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    </head>
    <body>
        <form method="post" action="http://120.77.46.246/form">
            <P><label for="fave">黃子涵是帥哥<input id="fave" name="fave"/></label></P>
            <p><label for="name">黃子涵是靚仔<input id="name" name="name"/></label></p>
            <button>黃子涵的按鈕</button>
        </form>
    </body>
</html>

此例為每個input元素都配了一個label元素。注意，例中為input元素設置了id屬性，並將相關label元素的for屬性設置為這個id值。這樣做即可將input元素和label元素關聯起來，有助於屏幕閱讀器和其他殘障輔助技術對表單的處理。這些說明標簽的顯示結果如下圖所示。

上面的代碼清單把input元素作為label元素的內容放置在其中。這個不是強制性的要求，二者可以獨立定義。在設計復雜表單的時候，label元素獨立於input元素定義是很常見的事。

提示

此例在表單中添加了一些p元素，以便簡單地設置一下表單的布局。這樣做更方便讀者觀察在HTML文檔中新添加的部分對呈現結果的影響。要想得到更美觀的表單，需要用到CSS的表格特性。

自動聚焦到某個input元素

設計者可以讓表單顯示出來的時候即聚焦於某個input元素。這樣用戶就能直接在其中輸入數據而不必先動手選擇它。autofocus屬性的用途就是指定這種元素，如代碼清單10所示。

代碼清單10 使用autofocus屬性

<!DOCTYPE HTML>
<html>
    <head>
        <title>黃子涵</title>
        <meta name="作者" content="黃子涵"/>
        <meta name="描述" content="黃子涵是帥哥！"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    </head>
    <body>
        <form method="post" action="http://120.77.46.246/form">
            <P>
                <label for="fave">黃子涵是帥哥<input autofocus id="fave" name="fave"/></label>
            </P>
            <p><label for="name">黃子涵是靚仔<input id="name" name="name"/></label></p>
            <button>黃子涵的按鈕</button>
        </form>
    </body>
</html>

瀏覽器將這個頁面一顯示出來就會聚焦於第一個輸入元素。下圖顯示了Chrome用以標示位於焦點上的那個元素的視覺信號。

autofocus屬性只能用在一個input元素上。要是有幾個元素都設置了這個屬性，那么瀏覽器將會自動聚焦於其中的最后一個元素。

禁用單個input元素

如果不想讓用戶在某個input元素中輸入數據，可以禁用它。這看似奇怪，其實不然。設計者也許想要為幾個相關任務提供一致的用戶界面，但是其中有些元素並非總是用得上。此外有時也需要根據用戶的操作用JavaScript啟用某些元素。這方面的一個常見例子是：在用戶選擇將貨物發到賬單地址之外的地址時，啟用一組用來收集新地址信息的input元素。

要禁用input元素，需要設置其disabled屬性，如代碼清單11所示。

代碼清單11 設置input元素的disabled屬性

<!DOCTYPE HTML>
<html>
    <head>
        <title>黃子涵</title>
        <meta name="作者" content="黃子涵"/>
        <meta name="描述" content="黃子涵是帥哥！"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    </head>
    <body>
        <form method="post" action="http://120.77.46.246/form">
            <P>
                <label for="fave">黃子涵是帥哥<input autofocus id="fave" name="fave"/></label>
            </P>
            <p><label for="name">黃子涵是靚仔<input disabled id="name" name="name"/></label></p>
            <button>黃子涵的按鈕</button>
        </form>
    </body>
</html>

此例在收集用戶姓名的那個input元素上設置了disabled屬性。禁用后的input元素在Chrome中的樣子如下圖所示。其他瀏覽器為其使用的樣式與此類似。

對表單元素編組

對於更復雜的表單，有時需要將一些元素組織在一起。為此可以使用fieldset元素。下表概括了這個元素。

fieldset 元素

代碼清單12示范了fieldset元素的用法。該例添加了一些input元素，以演示如何將fieldset用於fonn中的一部分元素。

代碼清單12 使用fieldset元素

<!DOCTYPE HTML>
<html>
    <head>
        <title>黃子涵</title>
        <meta name="作者" content="黃子涵"/>
        <meta name="描述" content="黃子涵是帥哥！"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    </head>
    <body>
        <form method="post" action="http://120.77.46.246/form">
            <fieldset>
                <P><label for="fave">黃子涵是帥哥<input id="fave" name="fave"/></label></P>
                <p><label for="name">黃子涵是靚仔<input id="name" name="name"/></label></p>
            </fieldset>
            <fieldset>
                <p><label for="fave1">#黃子涵1：<input id="fave1" name="fave1"/></label></p>
                <p><label for="fave2">#黃子涵2：<input id="fave2" name="fave2"/></label></p>
                <p><label for="fave3">#黃子涵3：<input id="fave3" name="fave3"/></label></p>
            </fieldset>
            <button>黃子涵的按鈕</button>
        </form>
    </body>
</html>

此例用一個fieldset元素將兩個用來收集用戶個人信息的input元素編為一組，又用另一個fieldset元素將三個用來讓用戶為其喜歡的水果投票的input元素編為一組。fieldset元素的習慣樣式效果如下圖所示。

為fieldset元素添加說明標簽

上面的例子中已將input元素分別編組，但是未向用戶提供相關說明。在每一個fieldset元素中添加一個legend元素即可彌補這個缺點，下表概括了這個元素。

legend元素

legend元素必須是fieldset元素的第一個子元素，如代碼清單13所示。

代碼清單13 使用legend元素

<!DOCTYPE HTML>
<html>
    <head>
        <title>黃子涵</title>
        <meta name="作者" content="黃子涵"/>
        <meta name="描述" content="黃子涵是帥哥！"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    </head>
    <body>
        <form method="post" action="http://120.77.46.246/form">
            <fieldset>
                <legend>輸入的相關的信息：</legend>
                <P><label for="fave">籍貫<input id="fave" name="fave"/></label></P>
                <p><label for="name">學校<input id="name" name="name"/></label></p>
            </fieldset>
            <fieldset>
                <legend>輸入三個歌手的名字：</legend>
                <p><label for="fave1">#黃子涵1：<input id="fave1" name="fave1"/></label></p>
                <p><label for="fave2">#黃子涵2：<input id="fave2" name="fave2"/></label></p>
                <p><label for="fave3">#黃子涵3：<input id="fave3" name="fave3"/></label></p>
            </fieldset>
            <button>黃子涵的按鈕</button>
        </form>
    </body>
</html>

legend元素在瀏覽器中的顯示結果如下圖所示。

用fieldset禁用整組input元素

通過設置fieldset元素的disabled屬性，可以一次性地禁用多個input元素。此時fieldset元素中包含的所有input元素都會被禁用，如代碼清單14所示。

代碼清單14 用fieldset元素禁用input元素

<!DOCTYPE HTML>
<html>
    <head>
        <title>黃子涵</title>
        <meta name="作者" content="黃子涵"/>
        <meta name="描述" content="黃子涵是帥哥！"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    </head>
    <body>
        <form method="post" action="http://120.77.46.246/form">
            <fieldset>
                <legend>輸入的相關的信息：</legend>
                <P><label for="fave">籍貫<input id="fave" name="fave"/></label></P>
                <p><label for="name">學校<input id="name" name="name"/></label></p>
            </fieldset>
            <fieldset disabled>
                <legend>輸入三個歌手的名字：</legend>
                <p><label for="fave1">#黃子涵1：<input id="fave1" name="fave1"/></label></p>
                <p><label for="fave2">#黃子涵2：<input id="fave2" name="fave2"/></label></p>
                <p><label for="fave3">#黃子涵3：<input id="fave3" name="fave3"/></label></p>
            </fieldset>
            <button>黃子涵的按鈕</button>
        </form>
    </body>
</html>

這些input元素被禁用后的效果如下圖所示。

使用button元素

button元素其實比它的外表給人的感覺更靈活。該元素有三種用法，這些不同的操作模式通過具有三種值的type屬性設定，其說明見下表。

button元素的type屬性的值

值 | 說明
submit | 表示按鈕的用途是提交表單
reset | 表示按鈕的用途是重置表單
button | 表示按鈕沒有具體語義

下面我們來逐一說明上述三個屬性值及其代表的功能。

用button元素提交表單

如果將button元素的type屬性設置為submit，那么按下該按鈕會提交包含它的表單。這是未設置type屬性的button元素的默認行為。采用這種方法使用該元素時，它還有額外的一些屬性可用，如下表所述。

type屬性設置為submit時button元素的額外屬性

這些屬性主要是用來覆蓋或補充form元素上的設置，指定表單提交的URL、使用的HTTP方法、編碼方式、表單反饋信息的顯示地點，以及控制客戶端數據檢查。它們是HTML5中新增的屬性。代碼清單15示范了這些元素的用法。

代碼清單15 使用button元素的屬性

<!DOCTYPE HTML>
<html>
    <head>
        <title>黃子涵</title>
        <meta name="作者" content="黃子涵"/>
        <meta name="描述" content="黃子涵是帥哥！"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    </head>
    <body>
        <form method="post" action="http://120.77.46.246/form">
            <P>
                <label for="fave">黃子涵是帥哥<input autofocus id="fave" name="fave"/></label>
            </P>
            <p><label for="name">黃子涵是靚仔<input id="name" name="name"/></label></p>
            <button type="submit" formaction="http://120.77.46.246/form" formmethod="post">黃子涵的按鈕</button>
        </form>
    </body>
</html>

此例未設置form元素的action和method屬性，轉而通過設置button元素的formaction和formmethod屬性來達到同樣的目的。

用button元素重置表單

如果將button元素的type屬性設置為reset，那么按下按鈕會將表單中所有input元素重置為初始狀態。這樣使用該元素時，沒有額外的屬性可用。代碼清單16中的例子在HTML文檔中添加了一個重置按鈕。

代碼清單16 用button元素重置表單

<!DOCTYPE HTML>
<html>
    <head>
        <title>黃子涵</title>
        <meta name="作者" content="黃子涵"/>
        <meta name="描述" content="黃子涵是帥哥！"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    </head>
    <body>
        <form method="post" action="http://120.77.46.246/form">
            <P>
                <label for="fave">黃子涵是帥哥<input autofocus id="fave" name="fave"/></label>
            </P>
            <p><label for="name">黃子涵是靚仔<input id="name" name="name"/></label></p>
            <button type="submit">提交給黃子涵</button>
            <button type="reset">黃子涵把它重置了</button>
        </form>
    </body>
</html>

表單的重置效果如下圖所示。

把button作為一般元素使用

如果將button元素的type屬性設置為button，那么該button元素就僅僅是一個按鈕。它沒有特別的含義，在按下時也不會做任何事情。代碼清單17的例子在HTML文檔中添加了這樣一個按鈕。

代碼清單17 使用一般性的button

<!DOCTYPE HTML>
<html>
    <head>
        <title>黃子涵</title>
        <meta name="作者" content="黃子涵"/>
        <meta name="描述" content="黃子涵是帥哥！"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    </head>
    <body>
        <form method="post" action="http://120.77.46.246/form">
            <P>
                <label for="fave">黃子涵是帥哥<input autofocus id="fave" name="fave"/></label>
            </P>
            <p><label for="name">黃子涵是靚仔<input id="name" name="name"/></label></p>
            <button type="submit">提交給黃子涵</button>
            <button type="reset">黃子涵把它重置了</button>
            <button type="button">按下它<strong>不會</strong>做任何事</button>
        </form>
    </body>
</html>

這樣使用該元素看起來似乎沒有什么意義。但我們可以在按下按鈕時可以用JavaScript執行一些操作。通過這種方法即可用button元素實現自定義的行為。

注意，此例對button元素包含的文字設置了一些格式。該元素中的文字可以用各種短語元素進行標記。該例中此處所作標記的效果如下圖所示。

使用表單外的元素

在HTML4中，input、button和其他與表單相關的元素必須放在form元素中。在HTML5中，這條限制不復存在。現在可以將這類元素與文檔中任何地方的表單掛鈎。要將某個這類元素與並非其祖先元素的form元素掛鈎，只消將其form屬性設置為相關form元素的id屬性值即可。代碼清單18即為一例。

代碼清單18 使用form屬性

<!DOCTYPE HTML>
<html>
    <head>
        <title>黃子涵</title>
        <meta name="作者" content="黃子涵"/>
        <meta name="描述" content="黃子涵是帥哥！"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    </head>
    <body>
        <form id="voteform" method="post" action="http://120.77.46.246/form">
            <P>
                <label for="fave">黃子涵是帥哥<input autofocus id="fave" name="fave"/></label>
            </P>
        </form>
        <p>
            <label for="name">黃子涵是靚仔<input form="voteform" id="name" name="name"/>
            </label>
        </p>
        
        <button form="voteform" type="submit">提交給黃子涵</button>
        <button form="voteform" type="reset">黃子涵把它重置了</button>       
    </body>
</html>

此例中只有一個input元素是那個form元素的后代元素。另一個input元素和兩個button元素都位於form元素之外，但是它們都通過設置form屬性與那個form元素關聯在了一起。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 表單表單控件及表單屬性表單及表單新增元素什么是PHP表單和表單的創建 django表單 Bootstrap之表單 HTML 表單 Bootstrap表單表單美化走進AngularJs(九)表單及表單驗證

表單

表單

制作基本表單

代碼清單1 一個簡單的HTML表單

定義表單

form元素

input元素

提示

button元素

查看表單數據

代碼清單2 腳本文件formecho.js

配置表單

配置表單的action屬性

代碼清單3 使用base元素設置表單數據的發送目的地

警告

配置HTTP方法屬性

提示

配置數據編碼

enctype屬性允許的值

代碼清單4 在表單中添加一個input元素

application/x-www-form-urlencoded編碼

multipart/form-data編碼

text/plain編碼

控制表單的自動完成功能

代碼清單5 將form元素的autocomplete屬性設置為禁用

代碼清單6 設置input元素的autocomplete屬性

指定表單反饋信息的目標顯示位置

fonn元素的target屬性值

代碼清單7 使用target屬性

設置表單名稱

代碼清單8 使用form元素的name屬性和id屬性

在表單中添加說明標簽

label元素

代碼清單9 使用label元素

提示

自動聚焦到某個input元素

代碼清單10 使用autofocus屬性

禁用單個input元素

代碼清單11 設置input元素的disabled屬性

對表單元素編組

fieldset 元素

代碼清單12 使用fieldset元素

為fieldset元素添加說明標簽

legend元素

代碼清單13 使用legend元素

用fieldset禁用整組input元素

代碼清單14 用fieldset元素禁用input元素

使用button元素

button元素的type屬性的值

用button元素提交表單

type屬性設置為submit時button元素的額外屬性

代碼清單15 使用button元素的屬性

用button元素重置表單

代碼清單16 用button元素重置表單

把button作為一般元素使用

代碼清單17 使用一般性的button

使用表單外的元素

代碼清單18 使用form屬性

免責聲明！

`multipart/form-data`編碼