HTML教程
HTML5教程
HTML参考手册

Html中Button有哪些类型?

HTML <Button>类型

类型 <button> 元素的属性,该元素设置了按钮,如以下语法所述:
<button type="button|submit|reset">
以下是type属性的三个值:
button:按钮的值用于可单击的按钮。 submit::提交值用于提交表单数据。 reset:重置值用于将表单的值重置为其初始值。

示例:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
按钮类型示例
</title>
<style>
/* 以下标记选择器主体将font-family和background-color属性用于页面主体 */
body {
font-family: Calibri, Helvetica, sans-serif;
background-color: pink;
}
/* 在容器类之后,使用填充来在其周围生成空间,还使用background-color将浅蓝色指定为背景 */
.container {
padding: 50px;
background-color: lightblue;
}
/* 以下标记选择器输入对文本字段使用不同的属性。 */
input[type=text] {
  width: 100%;
  padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
 border: none;
 background: #f1f1f1;
}
input[type=text]:focus {
background-color: orange;
outline: none;
}
 div {
            padding: 10px 0;
}
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}
/* 以下标记选择器按钮为Button使用不同的属性。 */
button {
  background-color: #4CAF50;
  padding: 16px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  color: white;
  width: 100%;
  opacity: 0.9;
}
/* 下面的标签选择器悬停在Button上使用opacity属性,当您将鼠标悬停在其上时,它会选择按钮。 */
button:hover {
opacity: 1;
}
</style>
</head>
<body>
<form>
<div class="container">
<center> <h1> 注册表</h1> </center>
<hr>
<label > 姓名 </label>
<input type="text" name="firstname" placeholder= "Firstname" size="15" required />
<label> 邮箱: </label>
<input type="text" name="email" placeholder="email" size="30" required />
<label> 地址: </label>
<input type="text" name="address" placeholder="address" size="80" required />
<div>
<label>
性别 :
</label><br>
<input type="radio" value="1" name="gender" checked > 男
<input type="radio" value="2" name="gender"> 女
<input type="radio" value="3" name="gender"> 保密
</div>
<label>
电话 :
</label>
<input type="text" name="country code" placeholder="国家代码" value="+86" size="3"/>
<input type="text" name="phone" placeholder="电话号码" size="10"/ required>
<label for="weixin"><b>微信</b></label>
<input type="text" placeholder="weixin" id="weixin" name="weixin" required>
下面的按钮显示为提交按钮,用于提交表单。
<button type="submit" value="submit">Submit</button>
下面的按钮显示重置按钮,该按钮用于将表单重置为其初始值。
<button type="reset" value="reset">Reset</button>
单击下面的按钮可在网页上显示一条消息。单击按钮后,从脚本标签调用一个函数。
<button type="button" onclick="sfun()"> print a Simple Message </button>
<script>
function sfun()
{
document.write("Hello LIDIHUO!");
}
</script>
</form>
</body>
</html>
输出:
 HTML按钮类型

浏览器支持

元素  chrome浏览器 浏览器  firefox浏览器 Opera浏览器  Safari浏览器
<Button type="">
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4