表单的简单应用

最新推荐文章于 2024-09-30 15:42:36 发布

睡到自然醒*

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量352

点赞数 7

文章标签：前端

本文链接：https://blog.csdn.net/csdeshisha/article/details/134802555

版权

HTML提供了一组标签来创建表单，如输入框、复选框、单选按钮、下拉列表等。表单可以用来收集用户输入的数据，并通过提交按钮将数据发送到服务器。

输入框：用于用户输入文本信息，可以是一个单行或多行的文本区域。常见的输入框类型有文本框、密码框、邮箱地址框等。
复选框：允许用户在一组选项中选择一个或多个选项。通常以一个小方框表示，当选中时，方框中会显示一个对勾或叉号。
单选按钮：允许用户在一组选项中选择一个且只能选择一个选项。通常以一个小圆圈表示，当选中时，圆圈会被填充或描边。
下拉列表：提供一个可滚动的选项列表供用户选择。用户可以从下拉列表中选择一个选项，也可以手动输入文本。下拉列表可以包含固定选项和动态加载的选项。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例页面</title>
</head>
<body>
    <form>
        <!-- 输入框 -->
        <label for="input">输入框：</label>
        <input type="text" id="input" name="input">
        <br><br>

        <!-- 复选框 -->
        <label for="checkbox">复选框：</label>
        <input type="checkbox" id="checkbox" name="checkbox">
        <br><br>

        <!-- 单选按钮 -->
        <label for="radio">单选按钮：</label>
        <input type="radio" id="radio1" name="radio" value="option1">
        <label for="radio1">选项1</label>
        <input type="radio" id="radio2" name="radio" value="option2">
        <label for="radio2">选项2</label>
        <br><br>

        <!-- 下拉列表 -->
        <label for="dropdown">下拉列表：</label>
        <select id="dropdown" name="dropdown">
            <option value="option1">选项1</option>
            <option value="option2">选项2</option>
            <option value="option3">选项3</option>
        </select>
    </form>
</body>
</html>