HTML select下拉選單

admin發表於2018-10-30
HTML

select下拉選單由<select>和<option>標籤配合使用生成。

程式碼例項如下: 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  <select name="sel">
    <option value="1">螞蟻部落一</option>
    <option value="2">螞蟻部落二</option>
    <option value="3">螞蟻部落三</option>
    <option value="4">螞蟻部落四</option>
  </select>
</form>
</body>
</html>

下拉的選單項是由<option>標籤定義，當提交表單，選中的option的value屬性值會被髮送。

特別說明:name屬性是必須的，否則後臺無法接收提交的表單資料。

<select>標籤還有兩個重要屬性:

（1）.multiple：規定select下拉選單可以選擇多項，預設情況下下拉選單只能選擇一項。

（2）.size:規定下拉選單展開之後可見列表項的數目。

程式碼例項: 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  <select name="sel" multiple size="3">
    <option value="1">螞蟻部落一</option>
    <option value="2">螞蟻部落二</option>
    <option value="3">螞蟻部落三</option>
    <option value="4">螞蟻部落四</option>
  </select>
</form>
</body>
</html>

select下拉選單還具有一些其他屬性，下面分別做一下介紹:

（1）.form（HTML5）:規定輸入域所屬的一個或多個表單。

（2）.autofocus（HTML5）：規定在頁面載入時，域自動地獲得焦點。

（3）.disabled：設定文字域為只讀。

（4）.selected：設定option項為選中狀態（此屬性不屬於<select>，由於關係密切，這裡一併介紹）。

程式碼例項: 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  <select name="sel" autofocus>
    <option value="1">螞蟻部落一</option>
    <option value="2">螞蟻部落二</option>
    <option value="3">螞蟻部落三</option>
    <option value="4">螞蟻部落四</option>
  </select>
</form>
</body>
</html>

通過autofocus設定select下拉選單載入完畢後自動獲取焦點。 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  <select name="sel" disabled>
    <option value="1">螞蟻部落一</option>
    <option value="2">螞蟻部落二</option>
    <option value="3">螞蟻部落三</option>
    <option value="4">螞蟻部落四</option>
  </select>
</form>
</body>
</html>

設定select下拉選單為不可用狀態。 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" id="ant" method="post" action="do.php">

</form>
<select name="sel" form="ant">
  <option value="1">螞蟻部落一</option>
  <option value="2">螞蟻部落二</option>
  <option value="3">螞蟻部落三</option>
  <option value="4">螞蟻部落四</option>
</select>
</body>
</html>

form屬性引用所屬表單的id，於是，雖然下拉選單在<form>之外，但依然是該表單的一部分。 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  <select name="sel">
    <option value="1">螞蟻部落一</option>
    <option selected value="2">螞蟻部落二</option>
    <option value="3">螞蟻部落三</option>
    <option value="4">螞蟻部落四</option>
  </select>
</form>
</body>
</html>

上面的程式碼設定第二項為選中狀態。

相關文章