Question

我从网站上获取了此模板，并进行了一些编辑以添加更多文本框，并添加文本区域和下拉列表。我在学习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>

Answer 1

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

这里是一个小提琴，向您展示如何做---> link

对于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;
}

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

1 个答案: