fieldset ----- 不常用的HTML标签
生活随笔
收集整理的這篇文章主要介紹了
fieldset ----- 不常用的HTML标签
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
?fieldset 元素可將表單內的相關元素分組。
<fieldset> 標簽將表單內容的一部分打包，生成一組相關表單的字段。
當一組表單元素放到 <fieldset> 標簽內時，瀏覽器會以特殊方式來顯示它們，它們可能有特殊的邊界、3D 效果，或者甚至可創(chuàng)建一個子表單來處理這些元素。其默認格式是設置邊框，可通過設置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的區(qū)別，表單元素form里只有一個<fieldset>，只加一個大邊框。結果圖3
更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com
總結
以上是生活随笔為你收集整理的fieldset ----- 不常用的HTML标签的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Ajax应用查询员工信息
- 下一篇： Es6学习笔记(7)----数组的扩展