Web全棧-表單標籤-非input標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表單標籤--非input標籤</title>
    <style type="text/css">
        textarea{
            resize: none;   /*使不能手動拉伸*/
        }
    </style>
</head>
<body>
<!--
1.select標籤
做用: 用於定義下拉列表

格式:
<select>
    <optgroup label="分組名稱">
        <option>列表數據</option>
    </optgroup>
</select>

注意點:
1.下拉列表不能輸入內容, 可是能夠直接在列表中選擇內容
2.能夠經過給option標籤添加一個selected屬性來指定列表的默認值
3.能夠經過給option標籤包裹一層optgroup標籤來給下拉列表中的數據分類

2.textarea標籤
做用: 定義一個多行輸入框

格式:
<textarea>
</textarea>

注意點:
1.默認狀況下輸入框能夠無限換行
2.默認狀況下輸入框有本身的寬度和高度
3.能夠經過cols和rows來指定輸入框的寬度和高度, 可是雖然指定了列數和行數, 可是仍是能夠無限往下輸入
4.默認狀況下輸入框是能夠手動拉伸的
-->

<!--<select>-->
    <!--<option>北京</option>-->
    <!--<option>上海</option>-->
    <!--<option>廣州</option>-->
    <!--<option>廣西</option>-->
    <!--<option selected="selected">武漢</option>-->
<!--</select>-->

<select>
    <optgroup label="北京">
        <option>朝陽區</option>
        <option>昌平區</option>
        <option>通州區</option>
    </optgroup>
    <optgroup label="廣州">
        <option>天河區</option>
        <option>越秀區</option>
        <option>黃浦區</option>
    </optgroup>
</select>

<hr>

<textarea cols="20" rows="5">
</textarea>
</body>
</html>
相關文章
相關標籤/搜索