前端入坑第十天

Brittany____

已于 2022-11-02 23:36:57 修改

阅读量72

点赞数

分类专栏：前端文章标签：前端

于 2022-11-02 23:34:59 首次发布

本文链接：https://blog.csdn.net/Brittany____/article/details/127660489

版权

前端专栏收录该内容

19 篇文章 1 订阅

订阅专栏

（十三）textarea标签

定义可输入多行文本的控件
cols 文本的可见宽度
rows 文本的可见行数

（十四）label标签

for属性
当for属性与元素的id属性值一致时，点击label标签，会自动元素聚焦

代码块：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>textarea</title>
</head> 
<body>
    姓名：<input type="text" name="uname"><br><br>
    简介：<textarea id="" cols="30" rows="10"></textarea>

    <hr>

    <label for="uname">姓名</label>：<input type="text" name="uname" id="uname"><br><br>
</body>
</html>

（十五）button标签

input标签
-type="button"——普通按钮
-type="submit"——提交按钮
-type="reset"——重置按钮
button标签
-type="button"——普通按钮
-type="submit"——提交按钮（默认）
-type="reset"——重置按钮

双标签，标签之间可以添加内容（文本或标签等）

在这里插入图片描述
代码块：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>botton标签</title>
</head>
<body>
    <form action="http://www.baidu.com">
        <input type="text" name="uname">
        <input type="button" value="普通按钮">
        <input type="submit" value="提交按钮">
        <input type="reset" value="重置按钮">

        <hr>

        <button type="button">普通按钮</button>
        <button type="button">提交按钮</button>
        <button type="button">重置按钮</button>

        <hr>
        <button>按钮</button>

    </form>
</body>
</html>

（十六）下拉框

`select`下拉框标签

select常用属性
-multiple 设置下拉框可多选
-size 设置下拉框可见选项数
-disabled 禁用元素

`option` 下拉框的选项标签

option常用属性
-selected 默认选中项
-disabled 禁用某个选项
-value 提交给服务器的选项值
（如果设置了value属性值，则提交的是value的值；如果未设置value属性值，则提交option双标签中的文本值。value=""也是设置了属性值。）

在这里插入图片描述
代码框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉框</title>
</head>
<body>
    <select name="city">
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
    </select>

    <select name="city" disabled="disabled">
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
    </select>
    
    <select name="city" multiple="multiple" size="2">
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
    </select>

    <select name="city">
        <option value="">请选择城市</option>
        <option>北京</option>
        <option>上海</option>
        <option value="gz">广州</option>
        <option>深圳</option>
    </select>

</body>
</html>