22 按钮

原创于 2023-12-17 20:10:22 发布 · 187 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

html 专栏收录该内容

30 篇文章

订阅专栏

22按钮

用途

按钮标签根据type属性值不同可实现不同的功能。

submit 提交按钮，点击后可将数据提交到后台

reset 重置按钮，点击后表单控件恢复默认值

button 普通按钮，默认没有功能，一般配合js使用

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 表单控件及按钮需要form标签包裹后，按钮相关功能才能生效，action用于定义发送数据的地址，可为空 -->
    <form action="">
        <!-- 定义用户名输入文本框 -->
        <label>用户名：<input type="text" placeholder="请输入用户名"></label>
        <br><br>
        <!-- 定义密码输入文本框 -->
        <label>密码：<input type="text" placeholder="请输入密码"></label>
        <br><br>
        <!-- button的type属性为submit，定义按钮为提交按钮，点击后可将数据提交到后台 -->
        <button type="submit">提交</button>
        <!-- button的type属性为reset，定义按钮为重置按钮，点击后可重置页面表单控件内容为默认值 -->
        <button type="reset">重置</button>
        <!-- button的type属性为button，普通按钮，默认没有功能，一般配合js使用 -->
        <button type="button">普通按钮</button>
    </form>
</body>

</html>