HTML中表单的各类按钮（新手）

77 阅读 0 评论 51 点赞

我是靠谱客的博主任性豆芽，这篇文章主要介绍HTML中表单的各类按钮（新手），现在分享给大家，希望可以做个参考。

表单中的各类按钮：

1.普通类型的按钮( button）:

添加的文字<input type="button" value="按钮的名称" οnclick="alert(数字)">添加的文字

οnclick="alert(数字)" 提示是否成功设置按钮，alert中必须是数字，否则不提示。

2.图片按钮（image）

添加文字<input type="image" src="图片地址(相对地址或绝对地址)"οnclick="alert(数字)" value="xxx">添加文字

3.清空按钮（reset）

添加文字<input type="reset" value="名称" οnclick="alert(123)">添加文字

作用：清空输入框中的内容

4.提交按钮（submit）

添加文字<input type="submit" value="名称" οnclick="alert(123)">添加文字

作用：将输入框中的内容提交到服务器里面。

5.隐藏域（hidden）

将一些数据悄悄的提交给服务器。这些数据不提供给用户查看。

浏览器的地址栏上面显示隐藏的内容（name与value的值在地址的最后面显示）。

6.想要把数据提交到服务器上需要满足两个条件：

1. 在<form> 标签中添加action属性，通过action指明服务器地址。

2. 需要给需要提交到服务器的表单元素添加一个name属性。

账号：<input type="text" name="xxx(随便写)">

密码：<input type="password" name="xxxx(随便写)">

</form>

在服务器浏览器地址栏上有提交的数据（地址上面有xxx=输入的账号，xxxx=输入的密码（账号与密码的name属性的值在地址中显示））

7. 提交到服务器上面，地址上面有提交的数据信息，如：xxx="输入的账号"，xxxx="输入的密码"，隐藏域<input type="hidden" name="xxxxxx" value="xxxxxxx"> 的内容 xxxxxxx=xxxxxxx。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单中的按钮</title>
<base target="_self">
</head>
<body>
<form>
账号：<input type="text">
<br>
密码：<input type="password">
<br>
<br>
<!--普通类型的按钮（以后结合js使用）-->
<input type="button" value="普通" οnclick="alert(123)">
<br>
<!--图片按钮-->
<input type="image" src="web作业/实验题1/红楼梦书籍.jpg" value="图片按钮" width="100px" height="90px" οnclick="alert(123)">
<br>
<!--清空按钮(作用：清空在输入框中输入的内容)-->
<input type="reset" value="清空">
<br>
<!--提交按钮-->
<input type="submit" value="提交" οnclick="alert(123)">
<input type="hidden" name="cc" value="dd">
</form>
</body>
</html>