HTML中的input type="reset"标签失效(不起作用)的可能原因。

本文解释了HTML中<input type=reset>标签的工作原理,它不是清空输入框,而是将输入框的值恢复到value属性指定的默认值。文中还提供了一种替代方案,使用button标签结合JavaScript来实现清空输入框的功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

使用<html:reset>标签,有时候我们会发现reset按钮失效,点击该按钮并不能清空输入框。

原因在此:

    w3c网站有这样的描述(http://www.w3school.com.cn/htmldom/dom_obj_reset.asp)
"在 HTML 表单中 <input type="reset"> 标签每出现一次,一个Reset对象就会被创建。当重置按钮被点击,包含它的表单中所有输入元素的值都重置为它们的默认值。默认值由 HTML value 属性或 JavaScript 的 defaultValue 属性指定。"

    意思就是如果这个textarea如果设置了value属性的值,那么reset按钮就会恢复textarea到这个value属性的值,而不是空。

 

结论如下:

    reset并不是清空输入框的值,而是将输入框的值恢复到value属性所指定的值。
    看以下的例子就清楚了。将下面的HTML代码保存为一个.html文件,用浏览器打开,修改输入框的内容后,点击reset按钮,即可看到效果。

 

<form>
<input type="textarea" value="defaultValue"/>
<input type="reset" />
</form>

 

    但是查询的结果页面我们有时候又希望value属性是有值的(上次查询的输入条件),那么我们就不能使用reset标签来实现清空功能了,注意是清空。

 

    模拟的办法如下:使用button标签替代reset标签,利用js将该textarea的值置空。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <form id="formal" name="formal" method="post" enctype="multipart/form-data" action="upfile_ok.php"> <table width="356" border="1" align="center"> <tr> <td width="184">请上传您的个人形象</td> <td width="263"><label> <input type="file" name="upfiles" id="upfiles" /> </label></td> <td width="125"><label> <input type="submit" name="submit" id="submit" value="上传" /> <input type="reset" name="reset" id="reset" value="重置" /> </label></td> </tr> </table> </form> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <?php if($_POST["submit"]=="上传"){ $f_path="./upload\\"; $f_name=$_FILES['upfiles']['name']; $c_name=strstr($f_name,"."); if($c_name!=".jpg"){ echo "文件格式不符合要求"; }else if($_FILES['upfiles']['tmp_name']){ move_uploaded_file($_FILES['upfiles']['tmp_name'],$f_path.$_FILES['upfiles']['name']); echo "图片上传成功!"; echo "<br>"; echo "您的个人形象是:"."<img src'".$f_path.$_FILES['upfiles']['name']."'>"; }else{ echo "上传图片失败!"; } } ?> </body> </html> 我这两个文件代码生成之后在html网页中能显示上传文件,上传后显示上传成功,但是不能显示出我上传的图片,帮我分析一下原因
03-22
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值