免費AI編程助手
HTML 表單元素分組
2018-09-23 10:39 更新
HTML fieldset
要將一些元素組合在一起，您可以使用 fieldset 元素。它具有局部屬性: name，form，disabled 。
您可以在以下代碼中了解如何應用fieldset元素。
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<fieldset>
<p>
<label for="name">Name: <input id="name" name="name" /></label>
</p>
<p>
<label for="city">City: <input id="city" name="city" /></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>Submit Vote</button>
</form>
</body>
</html>legend - fieldset元素的描述性標簽
您可以向每個fieldset元素添加legend元素以提供更多信息。
legend元素必須是fieldset元素的第一個子元素。
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<fieldset>
<legend>Enter Your Details</legend>
<p>
<label for="name">Name: <input id="name" name="name" /></label>
</p>
<p>
<label for="name">City: <input id="city" name="city" /></label>
</p>
</fieldset>
<fieldset>
<legend>Vote For Your Three Favorite Fruits</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>
<fieldset>
<legend accesskey="y">
About <u>Y</u>ou (ALT + Y)
</legend>
<p><label for="userName">User name:</label>
<input type="text" name="txtUserName" size="20" id="userName" />
</p>
</fieldset>
<fieldset>
<legend accesskey="u">
About <u>U</u>s (ALT + U)
</legend>
<p>
<label for="referrer">How did you hear about us?</label>:<br/>
<select name="selReferrer" id="referrer">
<option selected="selected" value="">Select answer</option>
<option value="website">Another website</option>
<option value="printAd">Magazine ad</option>
<option value="friend">From a friend</option>
<option value="other">Other</option>
</select>
</p>
</fieldset>
<button>Submit Vote</button>
</form>
</body>
</html>上面的代碼還顯示了如何設置長度標簽的訪問鍵。
fieldset disable - 禁用輸入組
通過將disabled屬性應用于fieldset 元素，可以在一個步驟中禁用多個輸入元素。
以下代碼顯示如何使用fieldset元素禁用輸入元素。
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<fieldset>
<legend>Enter Your Details</legend>
<p>
<label for="name">Name: <input id="name" name="name" /></label>
</p>
<p>
<label for="name">City: <input id="city" name="city" /></label>
</p>
</fieldset>
<fieldset disabled>
<legend>Vote For Your Three Favorite Fruits</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>Submit Vote</button>
</form>
</body>
</html>以上內(nèi)容是否對您有幫助：
更多建議：