表单元素 - input标签 - 按钮类型及作用

表单元素 - input 标签 - 按钮类型及作用

在 HTML5 中，<input> 标签是构建表单不可或缺的一部分，它有多种类型，其中按钮类型为用户与网页交互提供了重要的途径。本文将详细介绍 <input> 标签中不同按钮类型的作用，并通过实际代码演示其使用方法。

1. `<input type="button">`

作用

<input type="button"> 用于创建一个普通按钮，它本身没有默认的行为，需要配合 JavaScript 来实现特定的功能，例如提交表单、弹出提示框等。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input type="button"</title>
</head>
<body>
    <input type="button" value="点击我" onclick="alert('你点击了按钮！')">
</body>
</html>

在上述代码中，当用户点击 “点击我” 按钮时，会弹出一个提示框显示 “你点击了按钮！”。

2. `<input type="submit">`

作用

<input type="submit"> 用于创建一个提交按钮，通常放在表单中。当用户点击该按钮时，表单数据会被发送到服务器进行处理，处理的目标地址由表单的 action 属性指定。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input type="submit"</title>
</head>
<body>
    <form action="submit.php" method="post">
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username"><br>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password"><br>
        <input type="submit" value="提交">
    </form>
</body>
</html>

在这个例子中，当用户填写用户名和密码后点击 “提交” 按钮，表单数据会以 POST 方式发送到 submit.php 文件进行处理。

3. `<input type="reset">`

作用

<input type="reset"> 用于创建一个重置按钮，放在表单中。当用户点击该按钮时，表单中的所有输入字段会被重置为初始值。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input type="reset"</title>
</head>
<body>
    <form>
        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email" value="example@example.com"><br>
        <label for="phone">电话：</label>
        <input type="tel" id="phone" name="phone" value="123456789"><br>
        <input type="reset" value="重置">
    </form>
</body>
</html>

当用户点击 “重置” 按钮时，邮箱和电话输入框会恢复到初始值。

总结表格

按钮类型	作用	示例代码
`<input type="button">`	创建普通按钮，需配合 JavaScript 实现功能	`<input type="button" value="点击我" onclick="alert('你点击了按钮！')">`
`<input type="submit">`	创建提交按钮，用于提交表单数据到服务器	`<input type="submit" value="提交">`
`<input type="reset">`	创建重置按钮，用于重置表单输入字段为初始值	`<input type="reset" value="重置">`

通过以上介绍，我们了解了 <input> 标签中不同按钮类型的作用和使用方法。在实际开发中，可以根据具体需求选择合适的按钮类型，以实现良好的用户交互体验。

表单元素 - input标签 - 按钮类型及作用