標籤:tle doctype type nbsp 沒有 address 瀏覽器 orm 預設
fieldset 元素可將表單內的相關元素分組。
<fieldset> 標籤將表單內容的一部分打包,產生一組相關表單的欄位。
當一組表單元素放到 <fieldset> 標籤內時,瀏覽器會以特殊方式來顯示它們,它們可能有特殊的邊界、3D 效果,或者甚至可建立一個子表單來處理這些元素。其預設格式是設定邊框,可通過設定style屬性來改變。
<fieldset> 標籤沒有必需的或唯一的屬性,一個表單元素form裡可能有好幾個<fieldset>。
其結構一般如下:
<fieldset>
<legend>fieldset 元素定義的標題</legend>
<!-- 正常表單元素 -->
</fieldset>
下面是樣本1
<!doctype html><html><head><meta charset="utf-8"><title>fieldset樣本</title></head><body><form method="post" action="submit.html"> <fieldset> <label for="name">Name:</label> <input type="text" id="name" name="name" placeholder="Your name" required="required" /> <label for="email">Email:</label> <input type="email" id="email" name="email" placeholder="Your email address" required="required" /> </fieldset></form></body></html>
相當於將fieldset中的表單元素打包在了一起,並加了一個外邊框。下面是代碼跑出來的結果圖1。
樣本2
<!doctype html><html><head><meta charset="utf-8"><title>fieldset樣本</title></head><body><form method="post" action="submit.html"> <fieldset> <label for="name">Name:</label> <input type="text" id="name" name="name" placeholder="Your name" required="required" /> </fieldset> <fieldset> <label for="email">Email:</label> <input type="email" id="email" name="email" placeholder="Your email address" required="required" /> </fieldset> <fieldset> <label for="message">Message:</label> <textarea cols="45" rows="7" id="message" name="message" required placeholder="Write your message here."></textarea> <fieldset> <input type="submit" value="Send" /> </fieldset></form></body></html>
一個表單元素form裡可能有好幾個<fieldset>,每一個都加邊框。結果圖2
樣本3
<!doctype html><html><head><meta charset="utf-8"><title>fieldset樣本</title></head><body><form method="post" action="submit.html"> <fieldset> <p> <label for="name">Name:</label> <input type="text" id="name" name="name" placeholder="Your name" required="required" /> </p> <p> <label for="email">Email:</label> <input type="email" id="email" name="email" placeholder="Your email address" required="required" /> </p> <p> <label for="message">Message:</label> <textarea cols="45" rows="7" id="message" name="message" required placeholder="Write your message here."></textarea> </p> <input type="submit" value="Send" /> </fieldset></form></body></html>
與樣本2的區別,表單元素form裡只有一個<fieldset>,只加一個大邊框。結果圖3
fieldset ----- 不常用的HTML標籤