HTML select下拉選單

admin發表於2018-10-30

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>

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

相關文章