文章导航

HTML input submit和reset按钮

2018-2-13 18:21| 作者: admin| 查看: 4811| 评论: 1|来自: 蚂蚁部落

一.submit提交按钮:

将<input>标签的type属性值设置为"submit"即可创建一个提交按钮。

点击提交按钮可以触发表单提交事件。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  账号:<input type="text"/><br/>
  密码:<input type="text"/><br/>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>
    </form>
</body>
</html>

点击提交按钮,可以提交表单,value属性规定按钮显示文本。

二.reset重置按钮:

将<input>标签的type属性值设置为"reset"即可创建一个重置按钮。

点击此按钮可以重置它所在form元素内所有表单元素的value属性值。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  账号:<input type="text"/><br/>
  密码:<input type="text"/><br/>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>
    </form>
</body>
</html>

点击重置按钮,可以重置表单元素的value属性值。

特别说明:重置不是清空,很多初学者想当然认为点击重置按钮即可清空value值,重置是将表单元素的value属性值重置为它最初的默认状态。

两种类型按钮还具有其他属性,下面分别做做一下介绍:

(1).autofocus(HTML5):规定在页面加载时,域自动地获得焦点。

(2).disabled:设置按钮为不可用。

(3).value:设置按钮的显示文本内容;如果在表单中,数据也会被提交。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  账号:<input type="text"/><br/>
  密码:<input type="text"/><br/>
        <input type="submit" autofocus value="提交"/>
        <input type="reset" value="重置"/>
    </form>
</body>
</html>

autofocus属性可以设置对应的按钮,在页面加载完毕后自动获取焦点。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  账号:<input type="text"/><br/>
  密码:<input type="text"/><br/>
        <input type="submit" disabled value="提交"/>
        <input type="reset" value="重置"/>
    </form>
</body>
</html>

设置对应的按钮不可用,所以也就无法完成它既有任务,比如提交表单或者重置,value数据也不会被发送。


鲜花
2

握手

雷人

路过

鸡蛋

刚表态过的朋友 (2 人)

发表评论

最新评论

引用 没有最好 2018-6-3 12:26
挺好的教程

查看全部评论(1)

返回顶部