表單（二）

阿新 • • 發佈：2021-12-24

1.textarea元素

textarea元素的作用與input控制元件的type屬性值為text時相似，但前者為多行文字輸入框，後者為單行

文字輸入框。基本語法如下：

並且在textarea元素中，cols屬性和rows屬性為必須屬性，除此之外還有以下幾種屬性：

屬性	屬性值	描述
name	自定義	名稱
readonly	readonly	只讀，不能編輯修改
disabled	disabled	第一次載入頁面時禁用

以上就是通過textarea屬性定義的一個多行文字框，且大小可通過拖拽調節，為了格式更加清晰使用<br>進行了換行，

程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>部落格</title>
</head>
<body>
<form action="#" method="post">
    評論：<br>
    <textarea name="" id="" cols="60" rows="10">
        文字內容文字內容文字內容文字內容文字內容文字內容文字內容文字內容文字內容文字內容文字內容文字內容文字內容文字內容
     
</textarea><br>
    <input type="submit" value="提交">
</form>
</body>
</html>

2.select元素

該元素用於製作下拉選單效果，基本語法如下：

</select>

<option>標記巢狀在<select>標記中，用於定義下拉選單中的具體選項，且在<select>中至少含有一對

<option></option>。

select和option的常用屬性如下：

標記名	常用屬性	描述
select	size	指定下拉選單的可見選項引數
select	multiple	下拉選單將具有多項選擇的功能，按住Ctrl進行多選
option	selected	預設選中項

上圖使用select製作了三個下拉選單，第一個是基本的，第二個設定了預設選項，第三個設定了多選

，程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>部落格</title>
</head>
<body>
<form action="#" method="post">
    所在校區<br>
    <select>
        <option>請選擇</option>
        <option>北京</option>
        <option>上海</option>
        <option>廣州</option>
        <option>武漢</option>
        <option>成都</option>
    </select>
    <br>
    特長：
    <br>
    <select>
        <option>唱歌</option>
        <option selected="selected">跳舞</option>
        <option>畫畫</option>
    </select>
    <br>
    愛好：
    <br>
    <select>
    <option>讀書</option>
    <option selected="selected">聽音樂</option>
    <option>踢球</option>
     <option selected="selected">旅行</option>
    </select>
    <br>
    <input type="submit" value="提交">
</form>
</body>
</html>

3.datalist元素

該元素用於定義輸入框選項列表，在該元素內同樣通過option元素進行建立，且也可自行輸入。

datalist元素常用於與input元素進行配合，但需要通過id屬性進行指定標識。

上圖為使用該元素做出的效果，程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>部落格</title>
</head>
<body>
<form action="" method="post">
    輸入使用者名稱：<input type="text" list="namelist">
    <datalist id="namelist">
        <option>aaa</option>
        <option>bbb</option>
        <option>ccc</option>
    </datalist>
</form>
    <input type="submit" value="提交">
</body>
</html>