day14-Html的body内标签之多行文本以及下拉框

一、多行文本

1.1、多行文本标签textarea

作用：多行文本向后台提交时，需要加上name属性，默认值不是在标签内添加value属性，而是在中间添加

<form>
        <div>
            <textarea name="gao">默认值</textarea> #多行文本
        </div>
 </form>

二、下拉框select标签

2.1、普通下拉框

 作用：普通下拉框，然后selected属性是默认选择哪个值

<body>
    <form>
        <div>
            <select name="city"> #select标签
                <option value="1">上海</option>  #选项用option标签
                <option value="2" selected="selected">南京</option>  #selected属性是默认选中谁
                <option value="3">北京</option>
            </select>
        </div>
        <input type="submit"/>
    </form>
</body>

效果图：

2.2、有宽度的下拉框

说明：需要在select标签内添加size属性

<body>
    <form>
        <div>
            <select name="city" size="3">  #添加size属性，设置宽度
                <option value="1">上海</option>
                <option value="2" selected="selected">南京</option>
                <option value="3">北京</option>
            </select>
        </div>
        <input type="submit"/>
    </form>
</body>

效果图：

2.3、多选下拉框中的值

说明：multiple属性来设置下拉框多选，当然你多选的时候需要按住ctrl，才能多选

<body>
    <form>
        <div>
            <select name="city" size="3" multiple="multiple">  #mutiple属性设置多选
                <option value="1">上海</option>
                <option value="2" selected="selected">南京</option>
                <option value="3">北京</option>
            </select>
        </div>
        <input type="submit"/>
    </form>
</body>

效果图：

2.4、设置分组选项

说明：通过optgroup标签来实现分组选项，但是组名是不可以选择的

<body>
    <form>
        <div>
            <select name="city">
                <optgroup label="江苏省">  #设置分组
                    <option value="1" selected="selected">南京</option>
                </optgroup>
                <optgroup label="浙江省">
                    <option value="2">杭州</option>
                </optgroup>
            </select>
        </div>
        <input type="submit"/>
    </form>
</body>

效果图：

三、总结

  1. textarea标签        - name属性 ，<textarea>默认值</textarea>
  2. select标签            -name属性 ，内部option value,提交到后台，size，muiltiple
posted @ 2017-12-07 13:51  帅丶高高  阅读(307)  评论(0)    收藏  举报