HTML表单元素详解-优快云博客

本文介绍了HTML中的常用表单元素，包括input的text类型、placeholder占位符、button按钮、radio单选框、checkbox复选框、textarea文本域以及form表单的使用。特别是label标签的用法，通过for属性与表单控件关联，提供更好的用户体验。

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

另一篇博客介绍常用表单标签，：https://blog.youkuaiyun.com/whpu1234/article/details/81364840

1.

2.

3.

4.

5.

6.

7.

8.显式关联是通过label标签的for属性，显式与另一个表单控件关联。需要注意的是，

for属性的值必须是与label标签在同一文档中的可标记表单元素的id，注意是id而不是name。

8.的例子：

注意：label标签　
　　　　label标签为input元素定义标注(标记)，它不会向用户呈现任何特殊效果，
　　　　为了实现点击文字也能选中/取消checkbox或radio。
　　　　常用于与checkbox（复选框）或radio（单选框）关联，

demo：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用的表单元素</title>
</head>
<body>

    <h1>登录</h1>
    <hr>
    <!-- input标签  type="text"为输入框 -->
    <!-- placeholder 占位符 -->
    <input type="text" placeholder="帐号">
    <br><br>
    <input type="password" placeholder="密码">
    <br><br>
    <!-- button是按钮 -->
    <button>提交</button>
<!-- **************************************************************** -->
    <!-- input type="radio",表示单选框，设置同样的name属性，使其成为一组 -->
    <br><br><hr>
    <input type="radio" id="man" name="sex">
    <label for="man">男</label>
    <input type="radio" id="woman" name="sex">
    <label for="woman">女</label>
<!-- **************************************************************** -->
    <br><br><hr>
    <input type="button">
    <label for="text">姓名:</label>
    <input type="text" placeholder="姓名">
<!-- **************************************************************** -->
    <br><hr>
    <!-- input   type="checkbox"时，显示为复选框 -->
    <input type="checkbox" id="movie">
    <label for="movie">电影</label>
<!-- **************************************************************** -->
    <br><hr>
    <!-- textarea为文本域 -->
    <textarea ></textarea>

<!-- **************************************************************** -->
    <br><br><hr>
    <div>
        <!-- form为表单，表单里的数据全部提交给服务器 -->
        <form action="">
            <input type="text" placeholder="帐号">
            <br><br>
            <input type="password" placeholder="密码">
            <br><br>
            <button type="submit">submit</button>
        </form>
    </div>
</body>
</html>

运行结果：