HTML fieldset元素

admin發表於2018-07-30
HTML

<fieldset>元素可以對錶單元素進行分組。

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<form>
  <fieldset>
    <legend>使用者登入</legend>
    姓名：<input type="text" />
    密碼：<input type="text" />
  </fieldset>
</form>
</body>
</html>

<legend>元素用來規定分組的標題。

一.disabled屬性:

設定此屬性後，<fieldset>元素將不可用，程式碼如下: 

[HTML] 純文字檢視 複製程式碼
<form>
  <fieldset disabled>
    <legend>使用者登入</legend>
    姓名：<input type="text" />
    密碼：<input type="text" />
  </fieldset>
</form>

內部的表單元素也將會被禁用，所以即便表單元素有預設value值，也不會被提交。

二.form屬性（HTML5）:

規定<fieldset>所屬的一個或多個表單 

[HTML] 純文字檢視 複製程式碼
<form name="myform" id="ant" method="post" action="do.php">
  <input type="submit" value="提交表單"/>
</form>
<fieldset form="ant">
  <legend>使用者登入</legend>
  姓名：<input type="text" />
  密碼：<input type="text" />
</fieldset>

form屬性引用所屬表單的id，即便<fieldset>在<form>之外，但依然是該表單的一部分。

三.name屬性（HTML5）:

用於在JavaScript中引用元素，或者在表單提交之後引用表單資料。

程式碼例項: 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload = function () {
  document.forms[0].do.setAttribute("disabled",true);
}
</script>
</head>
<body>
<form name="myform" id="ant" method="post" action="do.php">
  <input type="submit" value="提交表單"/>
</form>
<fieldset name="do" form="ant">
  <legend>使用者登入</legend>
  姓名：<input name="txt" type="text" />
  密碼：<input type="text" />
</fieldset>
</body>
</html>

通過name屬性將<fieldset>設定為不可用。

相關文章