HTML--Boby内标签之多行文本及下拉框

随笔记录方便自己和同路人查阅。

#------------------------------------------------我是可耻的分割线-------------------------------------------

1、多行文本代码是<textarea></textarea>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input系列</title>
</head>
<body>
    <form enctype="multipart/form-data">
        <p>描述</p>
        <textarea></textarea>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置">
    </form>
</body>
</html>

结果展示：

输入内容可以换行

给多行文本增加默认值，在<textarea></textarea>标签内输入文本就是默认值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input系列</title>
</head>
<body>
    <form enctype="multipart/form-data">
        <p>描述</p>
        <textarea>这里填写描述内容</textarea>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置">
    </form>
</body>
</html>

结果展示：

不要忘记加上name属性，因为像后台提交数据都需要

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input系列</title>
</head>
<body>
    <form enctype="multipart/form-data">
        <p>描述</p>
        <textarea name="moe">这里填写描述内容</textarea>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置">
    </form>
</body>
</html>

结果展示：

2、下拉框是<select>标签加 <option>标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input系列</title>
</head>
<body>
    <form enctype="multipart/form-data">
        <p>下拉选项</p>
        <select>
            <option>北京</option>
            <option>上海</option>
            <option>南京</option>
            <option>成都</option>
        </select>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置">
    </form>
</body>
</html>

结果展示：

代码优化，加上name和value属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input系列</title>
</head>
<body>
    <form enctype="multipart/form-data">
        <p>下拉选项</p>
        <select name="city">
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">南京</option>
            <option value="4">成都</option>
        </select>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置">
    </form>

</body>
</html>

结果展示：

现在默认展示为北京，但是我想默认选择为南京，怎么办呢：

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input系列</title>
</head>
<body>
    <form enctype="multipart/form-data">
        <p>下拉选项</p>
        <select name="city">
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3" selected="selected">南京</option>
            <option value="4">成都</option>
        </select>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置">
    </form>
</body>
</html>

结果展示：

这样就可以提交下拉框选择的内容了，但是有一个问题是不能多选，继续优化加上size属性让用户可以都看所有选项，加入multiple属性可以多选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input系列</title>
</head>
<body>
    <form enctype="multipart/form-data">
        <p>下拉选项</p>
        <select name="city" size="10" multiple="multiple">
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3" selected="selected">南京</option>
            <option value="4">成都</option>
        </select>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置">
    </form>
</body>
</html>

结果展示：按上Ctrl键加鼠标点选

3、下拉框分组：<optgroup>

该标签是给下拉框分组，不可选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input系列</title>
</head>
<body>
    <form enctype="multipart/form-data">
        <p>下拉选项</p>
        <select name="city" size="10" multiple="multiple">
            <optgroup label="中国">
                <option value="1">北京</option>
                <option value="2">上海</option>
                <option value="3" selected="selected">南京</option>
                <option value="4">成都</option>
            </optgroup>
        </select>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置">
    </form>
</body>
</html>