HTML进阶- 4.2 表单元素

最新推荐文章于 2025-03-13 20:00:00 发布

夏赞恩

最新推荐文章于 2025-03-13 20:00:00 发布

阅读量369

点赞数

分类专栏：前端学习文章标签： html 前端 javascript

原文链接：https://www.bilibili.com/video/BV1yx411d7Rc?p=39&spm_id_from=pageDriver

版权

前端学习专栏收录该内容

49 篇文章

订阅专栏

本文详细介绍了HTML表单中的关键元素，包括input（文本、密码、日期、滑块等）、select（下拉列表）、textarea（多行文本框）、按钮以及表单状态控制。此外，还涵盖了label、datalist和form、fieldset的使用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

表单元素

表单元素

一系列元素，主要用于收集用户数据

1. input元素

input元素是一个输入框，它具有type属性（输入框的类型），value属性（输入框的值），placeholder属性（显示提示的文本）等

type属性：输入框类型
type: text，普通文本输入框
type：password，密码框
type: date, 日期选择框，兼容性问题
type: search, 搜索框，兼容性问题
type：range，滑块
type：color，颜色选择框
type: number，数字输入框
type: checkbox，多选框
type: radio，单选框
type: file，文件选择框
当type值为reset、button、submit时，input表示按钮。
value属性：输入框的值
placeholder属性：显示提示的文本，文本框没有内容时显示

<body>
    <p>
        <!-- 普通文本输入框 -->
        <input type="text" placeholder="请输入账号">
    </p>
    <p>
        <!-- 密码框 -->
        <input type="password" placeholder="请输入密码">
    </p>
    <p>
        <!-- 日期选择框 -->
        <input type="date">
    </p>
    <p>
        <!-- 搜索框 -->
        <input type="search">
    </p>
    <p>
        <!-- 滑块 -->
        <input type="range" min="0" max="5">
    </p>
    <p>
        <!-- 颜色选择 -->
        <input type="color">
    </p>
    <p>
        <!-- 数字输入框 -->
        <input type="number" min="0" max="100" step="20">
    </p>
    <p>
        <!-- 多选框 -->
        爱好：
        <input name="loves" type="checkbox">
        音乐
        <input checked name="loves" type="checkbox">
        电影
        <input name="loves" type="checkbox">
        阅读
        <input name="loves" type="checkbox">
        其他
    </p>
    <p>
        <!-- 单选框 需要用name来指定哪些单选框是一组的-->
        性别：
        <input name="gender" type="radio">
        男
        <input checked name="gender" type="radio">
        女
    </p>
    <p>
	    <!-- 文件选择框 -->
        <input type="file">
    </p>
    <p>
        <input type="submit" value="这是一个提交按钮">
    </p>
</body>

在这里插入图片描述

2. select元素

select元素是下拉列表选择框，通常和option元素（表示下拉列表的选项）配合使用。

<body>
    <p>
        请选择城市：
        <select>
            <option>成都</option>
            <option>北京</option>
            <!-- 默认选项 -->
            <option selected>哈尔滨</option>
        </select>
    </p>

    <p>
        请选择你最喜欢的人：
        <select>
            <optgroup label="歌手">
                <option>胡夏</option>
            </optgroup>
            <optgroup label="游戏主播">
                <option>潘北真香</option>
                <option>阿三解说</option>
                <option>猫萌</option>
            </optgroup>
        </select>
    </p>

    <p>
        请选择你喜欢的人呢：
        <select multiple>
            <optgroup label="歌手">
                <option>胡夏</option>
            </optgroup>
            <optgroup label="游戏主播">
                <option>潘北真香</option>
                <option>阿三解说</option>
                <option>猫萌</option>
            </optgroup>
        </select>
    </p>
</body>

在这里插入图片描述

3. textarea元素

textarea元素是文本域，多行文本框，内容中的空白会显示

<body>
    <p>
        请填写简介：
        <!-- 默认情况用行列 -->
        <!-- <textarea  cols='30' rows='10'></textarea> -->
        <textarea style="width:500px;height:300px;" placeholder="请输入简介"></textarea>
    </p>
</body>

在这里插入图片描述

4. 按钮元素

虽然input可以做按钮元素，但一般按钮用button元素（更灵活，可加其他元素，如p元素）。button中的type属性指定按钮的类型：reset、submit、button，默认值submit。

<body>
    <p>
        <button type="button">这是一个按钮</button>
    </p>

    <p>
        <input type="image" src="hashiqi.jpg">
        <button>
            <img src="hashiqi.jpg" alt="" style="width:150px;">
            <p>Lorem ipsum dolor sit.</p>
        </button>
    </p>
</body>

在这里插入图片描述

5. 表单状态

readonly属性：布尔属性，是否只读，不会改变表单显示样式

disabled属性：布尔属性，是否禁用，会改变表单显示样式

6. 配合表单元素的其他元素

6.1 label

label是普通元素，通常配合单选和多选框使用。

显示关联

可以通过for属性，让label元素关联某一个表单元素，for属性书写表单元素id的值。

<body>
    <!-- 显示关联 -->
    <p>
        请选择性别：
        <input id='radMale' name='gender' type="radio">
        <!-- for关联的是表单元素的id -->
        <label for="radMale">男</label>
        <input id='radFemale' name='gender' type="radio">
        <label for="radFemale">女</label>
    </p>
</body>

隐式关联

<body>
	<!-- 隐式关联 -->
    <p>
        请选择性别：
        <label>
            <input name="gender" type="radio">
            男
        </label>
        <label>
            <input name="gender" type="radio">
            女
        </label>
    </p>
</body>

6.2 datalist

datalist是数据列表，该元素本身不会显示到页面，通常用于和普通文本框配合。
在这里插入图片描述

<body>
    <p>
        请输入你常用的浏览器：
        <input list="userAgent" type="text">
    </p>

    <datalist id="userAgent">
        <option value="Chrome">谷歌浏览器</option>
        <option value="IE">IE浏览器</option>
        <option value="Opera">欧鹏浏览器</option>
        <option value="Safari">苹果浏览器</option>
        <option value="Fire fox">火狐浏览器</option>
    </datalist>
</body>

6.3 form元素

通常，会将整个表单元素，放置form元素的内部，作用是当提交表单时，会将form元素内部的表单内容以合适的方式提交到服务器。form元素对开发静态页面没有什么意义。

form元素中action属性指明将内容提交给谁进行验证。
method属性表示提交方式GET或POST。
不写name属性，无法将内容传到服务器。

<body>
    <form action="https://www.baidu.com/" method="GET">
        <p>
            账号：
            <input type="text" name="loginid">
        </p>
        <p>
            密码：
            <input type="password" name="loginpwd">
        </p>
        <p>
            城市：
            <select name="city">
                <option value="1">成都</option>
                <option value="2">重庆</option>
                <option value="3">北京</option>
                <option value="4">哈尔滨</option>
            </select>
        </p>
        <p>
            <button type="submit">提交</button>
        </p>
    </form>
</body>

在这里插入图片描述

6.4 fieldset元素

fieldset元素可以将表单元素进行分组。

<body>
    <div>
        <h1>修改用户信息</h1>
        <fieldset>
            <!-- 标题 -->
            <legend>账号信息</legend>
            <p>
                用户账号：
                <input type="text" value="20220215" readonly>
            </p>
            <p>
                用户密码：
                <input type="password">
            </p>
        </fieldset>

        <fieldset>
            <legend>基本信息</legend>
            <p>
                用户姓名：
                <input disabled value="夏小水" type="text">
            </p>
            <p>
                城市：
                <select disabled name="" id="">
                    <option value="">上海</option>
                    <option value="">北京</option>
                    <option value="">广州</option>
                    <option value="">深圳</option>
                    <option value="">武汉</option>
                    <option value="">成都</option>
                    <option value="">云南</option>
                    <option value="">西安</option>
                    <option value="">西藏</option>
                    <option value="">漠河</option>
                </select>
            </p>
        </fieldset>
        <p>
            <button disabled>提交修改</button>
        </p>
    </div>
</body>

在这里插入图片描述