为什么这个选择表单不能在Firefox中工作?

Why does this select form not work in Firefox?

本文关键字：Firefox 工作 不能 选择 表单 为什么      更新时间：2023-09-26

我的网站上有一个使用Bootstrap 3的表单。它在IE, Chrome和Safari中工作得很好，但由于某些原因，表单末尾的下拉选项元素在Firefox中不起作用。我在不同的操作系统上尝试过。选中的选项将不会"停留"在下拉字段中。有人能给我点提示吗?

  <!--------The signup form------->
                <form name="signupform" id="signupform" onsubmit="return false;" class="form-signin">
<div class="form">
                  <div class="form-group">
                    <input id="username" type="text" class="form-control" onblur="checkusername()"
                    onkeyup="restrict('username')" maxlength="16" placeholder="Username">
                    <br>
                    <span id="unamestatus"></span>
<br>
                    <input id="email" type="text" class="form-control" placeholder="Email" onfocus="emptyElement('status')"
                    onkeyup="restrict('email')" maxlength="88">
                   <br>
                    <input id="pass1" type="password" class="form-control" placeholder="Create Password" onfocus="emptyElement('status')"
                    maxlength="100">
                    <br>
                    <input id="pass2" type="password" class="form-control" placeholder="Retype Password" onfocus="emptyElement('status')"
                    maxlength="100">
                  <br>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Choose the type of account you want">
                    <select id="accounttype" class="form-control"  onfocus="emptyElement('status')"></a>
                      <option value="" disabled selected>
                       Choose Account Type
                      </option>
 <option value="b">
                        I am an artist
                      </option>
                      <option value="a">
                       I am looking for artists
                      </option>
                 </select>
</br>
                  <br>
                  <button id="signupbtn" onclick="signup()" class="btn btn-success pull-right">
                    Create Account
                  </button>
                  <br>
                  <span id="status" style="color: white"></span>
                </form>
                <!--------End of form------->

您的select元素的开头嵌套在锚(a)中，这是无效的标记。

在form结束之前，您还缺少两个关闭div标记。

同样，disabled不是option标签的有效属性。

正确格式化代码可以使这些错误更容易被发现

<form name="signupform" id="signupform" onsubmit="return false;" class="form-signin">
    <div class="form">
        <div class="form-group">
            <input id="username" type="text" class="form-control" onblur="checkusername()"
                   onkeyup="restrict('username')" maxlength="16" placeholder="Username">
            <br>
            <span id="unamestatus"></span>
            <br>
            <input id="email" type="text" class="form-control" placeholder="Email" onfocus="emptyElement('status')"
                   onkeyup="restrict('email')" maxlength="88">
            <br>
            <input id="pass1" type="password" class="form-control" placeholder="Create Password" onfocus="emptyElement('status')"
                   maxlength="100">
            <br>
            <input id="pass2" type="password" class="form-control" placeholder="Retype Password" onfocus="emptyElement('status')"
                   maxlength="100">
            <br>
            <a href="#" data-toggle="tooltip" data-placement="bottom" title="Choose the type of account you want">
                <select id="accounttype" class="form-control"  onfocus="emptyElement('status')">
            </a> <!--  ^^ select element inside anchor ^^ -->
            <option value="" disabled selected> <!--  <-- disabled should be on select element, not option -->
                Choose Account Type
            </option>
            <option value="b">
                I am an artist
            </option>
            <option value="a">
                I am looking for artists
            </option>
            </select>
            </br>
            <br>
            <button id="signupbtn" onclick="signup()" class="btn btn-success pull-right">
                Create Account
            </button>
            <br>
            <span id="status" style="color: white"></span>
         </div>
    </div>
</form>

我不确定<a>是什么，但如果是特定问题的原因，更改为以下将使其工作

 <a href="#" data-toggle="tooltip" data-placement="bottom" title="Choose the type of account you want"></a>
      <select id="accounttype" class="form-control"  onfocus="emptyElement('status')">
            <option value="" disabled selected>
                Choose Account Type
            </option>
            <option value="b">
                I am an artist
            </option>
            <option value="a">
                I am looking for artists
            </option>
      </select>
相关文章：