您的位置:首页> 前端教程> HTML教程
文章导航

HTML input reset 重置按钮

2019-10-3 21:02| 作者: admin| 查看: 2501| 评论: 0|来自: 蚂蚁部落

将input标签type属性值设置为"reset"即可生成一个重置按钮。

此按钮一般和提交按钮配合使用,当然不是硬性标准。

首先看一段代码实例:

[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>

可以根据如下步骤进行测试:

(1).首先,在文本框和密码框填写一定内容。

(2).然后,点击重置按钮,发现填写的内容被清空。

有可能很多初学者会得出这样的结论,重置按钮会清空表单元素值,实质并非如此。

reset翻译成汉语具有"重置"或者"恢复"意思,也就是点击此按钮会将表单元素之恢复到默认值

[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" value="蚂蚁部落"/><br/>
  密码:<input type="text"/><br/>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>
    </form>
</body>
</html>

账号的默认值是"蚂蚁部落",您可以将其修改为其他任意值。

然后点击reset按钮观察效果,它并不是将账号值清空,而是重置为"蚂蚁部落"。

重置按钮具有的主要属性如下:

(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" value="蚂蚁部落"/><br/>
  密码:<input type="text"/><br/>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置" autofocus/>
    </form>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201910/03/210305n1v00sm383zc22m1.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

为按钮设置autofocus属性,页面加载后,按钮自动获取焦点。

disabled属性可以将按钮设置为不可用状态,比较简单,本文不再演示。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部