3-7. 表单-非input标签

2017-11-10 本文已影响11人一Left一

1、select标签
用于定义下拉列表
格式:

<select>
    <optgroup label="分组名称">
        <option>列表数据</option>
    </optgroup>
</select>

注意点:

下拉列表不能输入内容, 但是可以直接在列表中选择内容
可以通过给option标签添加一个selected属性来指定列表的默认值
可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类

2、textarea标签
定义一个多行输入框
格式:<textarea> </textarea>
注意点:

默认情况下输入框可以无限换行
默认情况下输入框有自己的宽度和高度
可以通过cols和rows来指定输入框的宽度和高度, 但是虽然指定了列数和行数, 但是还是可以无限往下输入
默认情况下输入框是可以手动拉伸的,可以利用css中的resize:none设置不可以拉伸

<body>
<!--
1. 输入框: 是多行输入框,可以换行,有默认的宽高
    属性:
        cols: 规定默认的列数
        rows: 规定默认的行数
        宽高依然可以更改
    格式:  <textarea cols="2" rows="4"></textarea>
2. 下拉列表
    不可以进行输入
    selected : 写在哪一个option中,这个option选项就会成为默认值.
    selected="selected" 当属性名和属性值一样的时候,可以只写属性名,最好写全
    <select>
        <option>苹果1</option>
        <option>苹果2</option>
    </select>

     <optgroup label="水果"> 被分组的选项 </optgroup>
     optgroup: 把一些选项分组
     label: 指定分组的名字
-->
<form action="">
    <input type="text">
    <textarea cols="2" rows="4"></textarea>

    请选择喜欢的食物
    <select>

        <optgroup label="水果">
        <option>苹果1</option>
        <option>苹果2</option>
        <option>苹果3</option>
        <option>苹果4</option>
        </optgroup>

        <optgroup label="蔬菜">
        <option >白菜</option>
        <option >萝卜</option>
        <option >黄瓜</option>
        </optgroup>
    </select>
</form>
</body>

图片.png

http://www.w3school.com.cn/tags/tag_select.asp
http://www.w3school.com.cn/tags/tag_textarea.asp
http://www.w3school.com.cn/tags/tag_option.asp
http://www.w3school.com.cn/html/html_form_elements.asp

3-7. 表单-非input标签

猜你喜欢

热点阅读