重置表单上发送的HTML表单

Question

我对html表单有疑问。

这是我的代码：

<form name="contactform" method="post" action="send_form_email.php">
  <input id="first_name"  type="text" name="first_name" size="30"/>
  <input id="company_name"  type="text" name="company_name" size="30"/>
  <input id="email"  type="text" name="email" size="30"/>
  <input type="image" align="middle" src="images/accept.png" alt="Submit" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input id="reset" type="image" src="images/reset.png" alt="Reset" align="middle" />
</form>

当我单击任何此图像时，将发送我的表格。 如何使此重置图片仅重置而不发送表格。

Answer 1

您的重置按钮不是重置按钮。 它具有type="image" ，它是服务器端图像映射。

当您单击服务器端图像地图时，将提交表单，并且您单击的坐标将包含在数据中。

如果您想使用图像重置按钮，请使用：

<button type="reset"><img src="..." alt="..."></button>

Answer 2

图像类型就像一个提交按钮 。

您必须使用type="reset"并使用CSS type="reset"按钮样式。

Answer 3

采用

<input type = "reset" value = "" class = "btnResetClass" />

您的btnResetClass将具有Css设置，供您设置背景图像。

Answer 4

您必须使用type="reset" 。

这个jsFiddle示例会更好。

HTML：

<form id="contactform" method="post" action="send_form_email.php">
    <div>
        <label>
            First Name: <input id="first_name" name="first_name" type="text" size="30" />
        </label>
    </div>
    <div>
        <label>
           Company Name: <input id="company_name" name="company_name" type="text" size="30" />
        </label>
    </div>
    <div>
        <label>
            Email: <input id="email"  type="text" name="email" size="30" />
        </label>
    </div>
    <input id="submit" type="submit" value="" title="Submit" />
    <input id="reset" type="reset" value="" title="Reset" />
</form>

CSS：

#submit, #reset {
    border: none;
    width: 64px;
    height: 48px
}
#submit {
    background: url('images/submit.png')
}
#reset {
    background: url('images/reset.png')
}