如何使復選標記出現在同一行中的input元素之后？

Question

我寫了一個簡單的注冊網頁，想要確認密碼並檢查電子郵件地址格式，並在同一行中的輸入元素后顯示一個復選標記或叉號。

在將Bootstrap添加到html文件之前，復選標記或十字符號出現在同一行中的輸入元素之后。 但是，在我將Bootstrap添加到我的html文件之后（尤其是在添加class="form-control" ），檢查或叉號出現在下一行。 我想知道如何解決我的問題？ 謝謝。

這是我的html文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Registration</title>
    <style>
      html, body{
      height: 100%;
      width: 100%;
      /* border: 1px solid black; */
      background: linear-gradient(to top, #f2f6fb, #b3cae3);
      }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script
       src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script
       src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script language="javascript" type="text/javascript" src="../js/register.js" defer></script>
  </head>
  <body>


    <div class="container">

      <div class="row">
        <div class="col-lg-offset-5">

          <form class="form-horizontal" action="RegisterProcess" method="post">

            <div class="form-group">
              <div class="col-lg-5">
                <input type="password" class="form-control" name="password" id="password" placeholder="Password" style="border-color: grey; background-color: white">
                <span width="5" name="passwordResult" id="passwordResult"></span>
              </div>
            </div>

            <div class="form-group">
              <div class="col-lg-5">
                <input type="password" class="form-control" name="passwordConfirm" id="passwordConfirm" placeholder="Confirm Password" style="border-color: grey; background-color\
: white">
                <span width="5" name="passwordConfirmResult" id="passwordConfirmResult"></span>
              </div>
            </div>
           <div class="form-group">
              <div class="col-lg-5">
                <input type="email" class="form-control" name="email" id="email" placeholder="Email" style="border-color: grey; background-color: white">
                <span width="5" name="emailResult" id="emailResult"></span>
              </div>
            </div>

            <div class="form-group">
              <div class="col-lg-offset-3 col-lg-5">
                <input type="submit" id="register" name="register" value="Sign Up">
              </div>
            </div>
          </form>


        </div>
      </div>
    </div>


  </body>

</html>

這是我的javascript

function arePasswordsSame() {
    input = this; // document.getElementById("passwordConfirm");                                                                                                                   
    if (input.value != document.getElementById("password").value) {
        input.setCustomValidity("Password Must be Matching.");
    document.getElementById("passwordConfirmResult").innerHTML = "&times;";
    } else {
        input.setCustomValidity("");
    document.getElementById("passwordConfirmResult").innerHTML = "&#10004;";
    }
}
document.getElementById("passwordConfirm").addEventListener("change",arePasswordsSame);

function validateEmail(){
    input = this; // document.getElementById("email");                                                                                                                             
    var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    if(! input.value.match(mailformat)){
    input.setCustomValidity("Email is invalid.");
        document.getElementById("emailResult").innerHTML = "&times;";
    }else{
        input.setCustomValidity("");
        document.getElementById("emailResult").innerHTML = "&#10004;";
    }
}
document.getElementById("email").addEventListener("change",validateEmail);

Answer 1

您可以使用bootstrap隨附的內置input-group-addon

<div class="input-group">
  <div class="col-lg-5">
    <input type="password" class="form-control" name="password" id="password" placeholder="Password" style="border-color: grey; background-color: white">
    <span width="5" class="input-group-addon" name="passwordResult" id="passwordResult"></span>
  </div>
</div>

https://getbootstrap.com/docs/4.0/components/input-group/

編輯

這應該是標記；

<div class="form-group">
  <div class="col-lg-5">
    <div class="input-group">
      <input type="password" class="form-control" name="password" id="password" placeholder="Password" style="border-color: grey; background-color: white">
      <span class="input-group-addon" name="passwordResult" id="passwordResult">&nbsp;</span>
    </div>
  </div>
</div>

Answer 2

在Bootstrap中， form-control類使inputs display:block; 以100％的寬度。 您將必須覆蓋默認樣式以防止這種情況（請注意，只要在加載Bootstrap之后添加此CSS，就可以刪除!important規則）：

 function arePasswordsSame() { input = this; // document.getElementById("passwordConfirm"); if (input.value != document.getElementById("password").value) { input.setCustomValidity("Password Must be Matching."); document.getElementById("passwordConfirmResult").innerHTML = "&times;"; } else { input.setCustomValidity(""); document.getElementById("passwordConfirmResult").innerHTML = "&#10004;"; } } document.getElementById("passwordConfirm").addEventListener("change",arePasswordsSame); function validateEmail(){ input = this; // document.getElementById("email"); var mailformat = /^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$/; if(! input.value.match(mailformat)){ input.setCustomValidity("Email is invalid."); document.getElementById("emailResult").innerHTML = "&times;"; }else{ input.setCustomValidity(""); document.getElementById("emailResult").innerHTML = "&#10004;"; } } document.getElementById("email").addEventListener("change",validateEmail);

 .form-control { display:inline-block!important; width:95%!important; }

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Registration</title> <style> html, body{ height: 100%; width: 100%; /* border: 1px solid black; */ background: linear-gradient(to top, #f2f6fb, #b3cae3); } </style> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script language="javascript" type="text/javascript" src="../js/register.js" defer></script> </head> <body> <div class="container"> <div class="row"> <div class="col-lg-offset-5"> <form class="form-horizontal" action="RegisterProcess" method="post"> <div class="form-group"> <div class="col-lg-5"> <input type="password" class="form-control" name="password" id="password" placeholder="Password" style="border-color: grey; background-color: white"> <span width="5" name="passwordResult" id="passwordResult"></span> </div> </div> <div class="form-group"> <div class="col-lg-5"> <input type="password" class="form-control" name="passwordConfirm" id="passwordConfirm" placeholder="Confirm Password" style="border-color: grey; background-color\\ : white"> <span width="5" name="passwordConfirmResult" id="passwordConfirmResult"></span> </div> </div> <div class="form-group"> <div class="col-lg-5"> <input type="email" class="form-control" name="email" id="email" placeholder="Email" style="border-color: grey; background-color: white"> <span width="5" name="emailResult" id="emailResult"></span> </div> </div> <div class="form-group"> <div class="col-lg-offset-3 col-lg-5"> <input type="submit" id="register" name="register" value="Sign Up"> </div> </div> </form> </div> </div> </div> </body> </html>

如何使復選標記出現在同一行中的input元素之后？

問題描述

2 個解決方案

解決方案1
3 2018-01-05 18:52:45

解決方案2
2 2018-01-05 18:48:12

如何使復選標記出現在同一行中的input元素之后？

問題描述

2 個解決方案

解決方案1 3 2018-01-05 18:52:45

解決方案2 2 2018-01-05 18:48:12

解決方案1
3 2018-01-05 18:52:45

解決方案2
2 2018-01-05 18:48:12