2025-02-18 14:18阅读: 4评论: 0推荐: 0

HTML - 9、表单<table> 按钮示例

HTML表单中不同类型的按钮和隐藏域的用法。以下是对每部分的详细解析：

1. 隐藏域（`<input type="hidden">`）

 <input type="hidden" name="from" value="toutiao">

type="hidden"：表示这是一个隐藏域，用户在页面上看不到这个输入框。
name="from"：隐藏域的名称，用于在表单提交时标识该字段。
value="toutiao"：隐藏域的值，表单提交时会将这个值发送到服务器。
用途：隐藏域通常用于存储一些不需要用户输入或修改的数据，例如来源页面的标识、用户ID等。

2. 确认按钮

第一种写法：使用`<button>`标签

 <button type="submit">确认</button>

type="submit"：表示这是一个提交按钮，点击后会触发表单的提交操作。
用途：用于提交表单数据到服务器。

第二种写法：使用`<input>`标签

 <input type="submit" value="确认">

type="submit"：表示这是一个提交按钮，点击后会触发表单的提交操作。
value="确认"：按钮显示的文本内容。
用途：与<button>标签类似，用于提交表单数据到服务器。

3. 重置按钮

第一种写法：使用`<button>`标签

 <button type="reset">重置</button>

type="reset"：表示这是一个重置按钮，点击后会将表单中的所有字段重置为初始值。
用途：用于清空表单中的所有输入内容。

第二种写法：使用`<input>`标签

 <input type="reset" value="点我重置">

type="reset"：表示这是一个重置按钮，点击后会将表单中的所有字段重置为初始值。
value="点我重置"：按钮显示的文本内容。
用途：与<button>标签类似，用于清空表单中的所有输入内容。

4. 普通按钮

第一种写法：使用`<input>`标签

 <input type="button" value="检测账户是否被注册">

type="button"：表示这是一个普通按钮，点击后不会触发表单的提交或重置操作。
value="检测账户是否被注册"：按钮显示的文本内容。
用途：通常用于触发JavaScript函数，执行某些操作（如检测账户是否被注册）。

第二种写法：使用`<button>`标签

 <button type="button">检测账户是否被注册</button>

type="button"：表示这是一个普通按钮，点击后不会触发表单的提交或重置操作。
用途：与<input>标签类似，通常用于触发JavaScript函数，执行某些操作。

完整示例

以下是一个完整的HTML表单示例，包含隐藏域、提交按钮、重置按钮和普通按钮：

 <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单按钮示例</title>
</head>
<body>
    <h2>用户注册表单</h2>
    <form action="https://example.com/submit" method="POST">
        <!-- 隐藏域 -->
        <input type="hidden" name="from" value="toutiao">
        <br>
 
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" required placeholder="请输入用户名">
        <br><br>
 
        <label for="password">密码：</label>
        <input type="password" id="password" name="password" required placeholder="请输入密码">
        <br><br>
 
        <!-- 确认按钮_第一种写法 -->
        <button type="submit">确认</button>
        <br><br>
 
        <!-- 重置按钮_第二种写法 -->
        <input type="reset" value="点我重置">
        <br><br>
 
        <!-- 普通按钮_第一种写法 -->
        <input type="button" value="检测账户是否被注册" onclick="checkUsername()">
        <br><br>
 
        <!-- 普通按钮_第二种写法 -->
        <button type="button" onclick="checkUsername()">检测账户是否被注册</button>
    </form>
 
    <script>
        function checkUsername() {
            alert("正在检测用户名是否被注册...");
            // 这里可以添加实际的检测逻辑
        }
    </script>
</body>
</html>

解析

隐藏域：用于存储不需要用户输入或修改的数据。
提交按钮：用于触发表单的提交操作。
重置按钮：用于清空表单中的所有输入内容。
普通按钮：用于触发JavaScript函数，执行某些操作。

总结

隐藏域：<input type="hidden">，用于存储隐藏数据。
提交按钮：<button type="submit"> 或 <input type="submit">，用于提交表单。
重置按钮：<button type="reset"> 或 <input type="reset">，用于清空表单。
普通按钮：<input type="button"> 或 <button type="button">，用于触发JavaScript函数。

上一篇HTML - 8、表单<table> 特定搜索功能

下一篇HTML - 10、框架标签

本文作者：别晃我的可乐

本文链接：https://www.cnblogs.com/lwehne/p/18721894

posted @ 2025-02-18 14:18 别晃我的可乐阅读(4) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

别晃我的可乐

HTML - 9、表单<table> 按钮示例

1. 隐藏域（`<input type="hidden">`）

2. 确认按钮

第一种写法：使用`<button>`标签

第二种写法：使用`<input>`标签

3. 重置按钮

第一种写法：使用`<button>`标签

第二种写法：使用`<input>`标签

4. 普通按钮

第一种写法：使用`<input>`标签

第二种写法：使用`<button>`标签

完整示例

解析

总结

公告

最新随笔

我的标签

随笔分类

随笔档案

	<!DOCTYPE html>
	<html lang="zh-CN">
	<head>
	<meta charset="UTF-8">
	<title>表单按钮示例</title>
	</head>
	<body>
	<h2>用户注册表单</h2>
	<form action="https://example.com/submit" method="POST">
	<!-- 隐藏域 -->
	<input type="hidden" name="from" value="toutiao">
	<br>

	<label for="username">用户名：</label>
	<input type="text" id="username" name="username" required placeholder="请输入用户名">
	<br><br>

	<label for="password">密码：</label>
	<input type="password" id="password" name="password" required placeholder="请输入密码">
	<br><br>

	<!-- 确认按钮_第一种写法 -->
	<button type="submit">确认</button>
	<br><br>

	<!-- 重置按钮_第二种写法 -->
	<input type="reset" value="点我重置">
	<br><br>

	<!-- 普通按钮_第一种写法 -->
	<input type="button" value="检测账户是否被注册" onclick="checkUsername()">
	<br><br>

	<!-- 普通按钮_第二种写法 -->
	<button type="button" onclick="checkUsername()">检测账户是否被注册</button>
	</form>

	<script>
	function checkUsername() {
	alert("正在检测用户名是否被注册...");
	// 这里可以添加实际的检测逻辑
	}
	</script>
	</body>
	</html>

别晃我的可乐

HTML - 9、表单<table> 按钮示例

1. 隐藏域（<input type="hidden">）

2. 确认按钮

第一种写法：使用<button>标签

第二种写法：使用<input>标签

3. 重置按钮

第一种写法：使用<button>标签

第二种写法：使用<input>标签

4. 普通按钮

第一种写法：使用<input>标签

第二种写法：使用<button>标签

完整示例

解析

总结

公告

最新随笔

我的标签

随笔分类

随笔档案

1. 隐藏域（`<input type="hidden">`）

第一种写法：使用`<button>`标签

第二种写法：使用`<input>`标签

第一种写法：使用`<button>`标签

第二种写法：使用`<input>`标签

第一种写法：使用`<input>`标签

第二种写法：使用`<button>`标签