textarea和label和button和下拉框

m0_47146894

已于 2022-10-14 10:00:17 修改

阅读量296

点赞数

分类专栏： Java前端HTML 文章标签：前端 javascript html

于 2022-09-06 09:47:25 首次发布

本文链接：https://blog.csdn.net/m0_47146894/article/details/126718684

版权

Java前端HTML 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML中的textarea标签用于文本输入，配合label实现便捷操作；各种input按钮类型及其功能，如提交与重置；以及select下拉框的使用，包括多选和单选选项。展示了如何构建交互式表单元素。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>textarea和label和button和下拉框</title>
</head>
<!--
    textarea
        定义可输入多行文本的控件
        cols    文本的可见宽度
        rows    文本的可见行数
    label标签
        for属性
        当for属性与元素id属性值一致时，点击label标签，会自动给元素聚焦

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

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

    下拉框
        select  下拉框标签
        option  下拉框选项标签

        select常用属性
            multiple    设置下拉框可多选
            size        设置下拉框可见选项数
            disabled    禁用元素（多达数标签均有）
        option常用属性
            selected    默认选中项
            disabled    禁用某个选项
            value       提交给服务器的选项值
                如果设置了value属性值，则提交的是value的值；
                如果未设置value属性值，则提交的是option双标签中的文本值

-->
<body>
    <textarea cols="50" rows="5" typeof="text" name="uname"></textarea><br/>
    <label for="uname">text</label>：<input type="text" id="uname"/>
    <form action="www.baidu.com">
        <input type="button" value="普通按钮"/>
        <input type="submit" value="提交按钮"/>
        <input type="reset" value="重置按钮"/>
        <hr/>
        <button type="button">普通按钮</button>
        <button type="submit">提交按钮</button>
        <button type="reset">重置按钮</button>
    </form>
    <select>
        <option value="uname">辉</option>
        <option>辉</option>
        <option disabled="disabled">辉</option>
    </select>
    <select size="2" multiple="multiple">
        <option value="uname">辉</option>
        <option>辉</option>
        <option disabled="disabled">辉</option>
    </select>
</body>
</html>