HTML - 9、表单<table> 按钮示例
HTML表单中不同类型的按钮和隐藏域的用法。
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函数。
浙公网安备 33010602011771号