时间戳

首页 > 解决方案 > html重置按钮在文本区域不起作用

html - html重置按钮在文本区域不起作用

问题描述

我从一个网站上获取了这个模板并进行了一些编辑以添加更多文本框以及添加文本区域和下拉列表。我仍然是学习 html 的新手。

我添加了文本区域，当我使用重置按钮时，它不适用于文本区域以及下拉列表。

重置应该在表格之前的底部？

 <form method="POST">
                        <div class="row row-space">
                            <div class="col-2">
                                <div class="input-group">
                                    <label class="label">Name</label>
                                    <input class="input--style-4" type="text" name="name">
                                </div>
                            </div>
                            <div class="col-2">
                                <div class="input-group">
                                    <label class="label">IC Number</label>
                                    <input class="input--style-4" type="text" name="ic">
                                </div>
                            </div>
                        </div>
                        <div class="row row-space">
                            <div class="col-2">
                                <div class="input-group">
                                    <label class="label">Username</label>
                                    <input class="input--style-4" type="text" name="username">
                                </div>
                            </div>
                            <div class="col-2">
                                <div class="input-group">
                                    <label class="label">password</label>
                                    <input class="input--style-4" type="password" name="password">
                                </div>
                            </div>
                        </div>
                        <div class="row row-space">
                            <div class="col-2">
                                <div class="input-group">
                                    <label class="label">Home Address</label>
                                    <textarea class="input--style-4" id="myTextarea" rows="2" cols="25" form="myform"></textarea>
                                </div>
                            </div>
                            <div class="col-2">
                                <div class="input-group">
                                    <label class="label">Gender</label>
                                    <div class="p-t-10">
                                        <label class="radio-container m-r-45">Male
                                            <input type="radio" checked="checked" name="gender">
                                            <span class="checkmark"></span>
                                        </label>
                                        <label class="radio-container">Female
                                            <input type="radio" name="gender">
                                            <span class="checkmark"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row row-space">
                            <div class="col-2">
                                <div class="input-group">
                                    <label class="label">Class</label>
                                        <div class="rs-select2 js-select-simple select--no-search">
                                <select name="state">
                                    <option disabled="disabled" selected="selected">Choose class</option>
                                    <option value="M3CS2464A">M3CS2464A</option>
                                    <option value="M3CS2464B">M3CS2464B</option>
                                    <option value="M3CS2464C">M3CS2464C</option>
                                </select>
                                <div class="select-dropdown"></div>
                                        </div>
                                </div>
                            </div>
                            <div class="col-2">
                                <div class="input-group">
                                    <label class="label">age</label>
                                    <input class="input--style-4" type="text" name="age">
                                </div>
                            </div>
                        </div>
                        <div class="row row-space">
                            <div class="col-2">
                                <div class="input-group">
                                    <label class="label">Telephone</label>
                                    <input class="input--style-4" type="text" name="phone">
                                </div>
                            </div>
                            <div class="col-2">
                                <div class="input-group">
                                    <label class="label">Interest</label>
                                    <input class="input--style-4" type="text" name="ic">
                                </div>
                            </div>
                        </div>
                        <div class="p-t-15">
                            <button class="btn btn--radius-2 btn--blue" type="submit">Register</button>
                            <button class="btn btn--radius-2 btn--blue" type="reset">Reset</button>
                        </div>
                    </form>

标签： html

解决方案

您可能必须使用 Javascript 来重置您的输入。

这是一个向您展示如何做到这一点的小提琴--->链接

对于 HTML：

<button class="btn btn--radius-2 btn--blue" onclick="clearInputs()">Reset</button>

对于 Javascript ：

function clearInputs() {
   document.getElementById('myTextarea').value = '';
   document.getElementById('mySelect').selectedIndex  = 0;
}

推荐阅读