Question

我想设置一个允许用户重置联系表单的按钮，有什么方法可以吗？

这是我对文本字段的编码

            <div style="float:left;width:600px;"><!--textfield-->
                    <div style="float:left;">
                       <div style="float:left;width:90px;padding-top:5px">
                       NAME
                       </div>
                       <div style="float:left;padding-top:4px">
                       :
                            <input type="text" class="textfield"/>
                       </div>
                    </div>
                    <div style="float:left;padding-top:8px;">
                       <div style="float:left;width:90px;padding-top:5px">
                       EMAIL ADDRESS
                       </div>
                       <div style="float:left;padding-top:2px">
                       :
                            <input type="text" class="textfield"/>
                       </div>
                    </div>
                    <div style="float:left;padding-top:8px;">
                       <div style="float:left;width:90px;padding-top:5px">
                       CONTACT NUMBER
                       </div>
                       <div style="float:left;padding-top:2px">
                       :
                            <input type="text" class="textfield"/>
                       </div>
                    </div>
                    <div style="width:120p;float:left;padding-top:8px;">
                       <div style="float:left;width:90px;padding-top:5px">
                       MESSAGE
                       </div>
                       <div style="float:left;padding-top:2px">
                       :
                       </div>
                       <div style="float:left;margin-left:3px;padding-top:2px;">
                            <textarea cols="48" rows="6" class="textfield"></textarea>
                       </div>
                    </div>
            </div><!--textfield-->
        </div><!--end leave your personal details-->
        <div style="clear:both"></div>
        <div>
            <div id="buttonreset"><!--buttonreset-->
                <a href="#"><img src="img/buttonreset1.png" width="54" height="24" alt="reset" /></a>
            </div><!--end.buttonreset-->
            <div id="buttonsend"><!--buttonsend-->
                <a href="#"><img src="img/buttonsend1.png" width="54" height="24" alt="send" /></a>
            </div><!--end.buttonsend-->
        </div>

的CSS

    .textfield {
        font-family: CenturyGothic;
        font-size: 12px;
        color: #231F20;
        resize: none;
        text-align: left;
    }

    textarea {
        border: thin solid #221F1F;
        border-radius: 5px;
        width: 430px;
        height: 160px;
        opacity: 0.8;
    }

    input {
        border: thin solid #221F1F;
        border-radius: 4px;
        width: 430px;
        height: 21px;
        opacity: 0.7;
    }

    #buttonreset {
        margin-top: 5px;
        background-image: url(../img/buttonreset.png);
        background-repeat: no-repeat;
        height: 24px;
        width: 54px;
        margin-top: 10px;
        margin-left: 410px;
        float:left;
    }

    #buttonreset img {
        -webkit-transition: opacity .5s ease-in-out;
        -moz-transition: opacity .5s ease-in-out;
        -o-transition: opacity .5s ease-in-out;
        transition: opacity .5s ease-in-out;    
        opacity:0;
    }

    #buttonreset img:hover {
        opacity:1;
        cursor:pointer;
        -webkit-animation-duration: 1s; 
        -webkit-animation-timing-function: linear;  
        Chrome, and Safari */
    }

我还没有为我的按钮添加任何编码，适合我按钮的代码是什么？

这是我的小提琴： http://jsfiddle.net/K5CJ4/

Answer 1

<input type='reset'>

是最简单的方法。

[编辑]

由于您尝试使用图片重置表单，因此最简单的方法是在Javascript中使用reset()方法。（不需要像jQuery这样的库）。为实现此目的，我只需在表单中的<a>标记中添加一些javascript，并将整个示例包装在<form></form>标记中，并将其ID设为contactForm。< / p>

DEMO

Answer 2

使用jQuery方式解决它。像这样：

$("#buttonreset").click(function() { // div's id
                $("#txtField1").val("");
                $("#txtField2").val("");
});

Answer 3

尝试使用：

  <button type="reset" id="btnreset" value="Reset">Reset</button>

该按钮是一个重置按钮（将表单数据重置为其初始值）

#btnreset {
    background-image: url("http://www.ricksdailytips.com/wp-content/uploads/2013/11/reset-button.gif");
    border: 0 none;
    height: 204px;
    width: 200px;
}

Answer 4

如果要自动执行此操作，可以将其设置为使页面在给定的秒数后刷新整个页面。使用元标记：

<meta http-equiv="refresh" content="(enter number of seconds before refresh);url=thispage.html" />

重置文本字段表单的代码是什么？

4 个答案: