Размещение меток проверки формы HTML.

Question

Размещение меток проверки формы HTML.

Нет. Поскольку PowerShell использует .NET под ним, он имеет те же требования. Вы не можете выгружать DLL из .NET AppDomain без выгрузки самого AppDomain. Поскольку пользовательский интерфейс PowerShell живет в том же AppDomain, это невозможно.

2

javascript jquery html css

задан Tommy 13 July 2018 в 09:24

2 ответа

, пожалуйста, используйте следующий код, я внес изменения в ваш HTML, обернув элементы в DIVs и изменив ваш CSS

 <!DOCTYPE html>
  <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery- 
 validation@1.17.0/dist/jquery.validate.js"></script>
     <style>

     </style>
   </head>

 <body>
 <form class="form-panel" id="signupForm">
 <div class="form-fname">
  <input type="text" name="fname" placeholder="First Name">
  </div>

 <div class="form-lname">
  <input type="text" name="lname" placeholder="Last Name">
  <br>
</div>
<div class="form-email">
  <input type="email" name="email" placeholder="Email Address">
  <br>
</div>
<div class="form-password">
  <input type="password" name="password" placeholder="Password">
  </div>
<div class="form-password-confirm"> 
  <input type="password" name="cpassword" placeholder="Comfirm Password">
</div>
<input type="submit" class="btn btn-default submit-button" value="Sign up!">
</form>
<script>
</script>
</body>
</html>

Код CSS

    .form-panel {
      margin-left: auto;
      margin-right: auto;
      width: 60%;
      position : relative;
      display : block;
     }

     input[type="text"],
     input[type="password"] {
     padding: 4px 7px;
     height: 35px;
     border: 1px solid black;
     border-radius: 3px;
     position: relative;
     width: 89%;
     display: block;
     }

     input[type="email"]{
     padding: 4px 0px 4px 5px;
     height: 35px;
     border: 1px solid black;
     border-radius: 3px;
     width: 98%;
     display: block;
     position: relative;
     }

    /*First name row*/
   .form-fname{
    display : inline-block;
    position : relative;
    width : 45%;
    }

    /*Last name row*/
    .form-lname{
    display : inline-block;
    position : relative;
    width : 45%;
    float : right; 
    }

    /*Email row*/
   .form-email{
   display : block;
   position : relative;
   width : 100%; 
   }

   /*Password row*/
   .form-password{
   display : inline-block;
   position : relative;
   width : 45%; 
   }

   /*Password Confirm row*/
   .form-password-confirm{
   display : inline-block;
   position : relative;
   width : 45%;
   float : right;
   }

   label{
   display : block;
   position : relative;
   width : 100%;
   margin-top : 2px;
   margin-bottom : 5px
   }

   .submit-button{
   margin-top : 6px
   }

0

ответ дан Shathiso Ntibi 17 August 2018 в 13:17

Другие вопросы по тегам:

javascript jquery html css

Похожие вопросы:

score 2 · Accepted Answer

Просто оберните ваши входы в div:

$().ready(function() {
  // validate the comment form when it is submitted
  $("#commentForm").validate();

  // validate signup form on keyup and submit
  $("#signupForm").validate({
    rules: {
      fname: "required",
      lname: "required",
      password: {
        required: true,
        minlength: 8
      },
      cpassword: {
        required: true,
        minlength: 8,
        equalTo: "#password"
      },
      email: {
        required: true,
        email: true
      },
      topic: {
        required: "#newsletter:checked",
        minlength: 2
      },
      agree: "required"
    },
    messages: {
      firstname: "Your first name is required.",
      lastname: "Please enter your lastname",
      username: {
        required: "Please enter a username",
        minlength: "Your username must consist of at least 2 characters"
      },
      password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 8 characters long"
      },
      cpassword: {
        required: "Please provide a password",
        minlength: "Your password must be at least 8 characters long",
        equalTo: "Please enter the same password as above"
      },
      email: "Please enter a valid email address",
    }
  });
});

* {
    box-sizing:border-box;
}
input[type="text"],
input[type="email"],
input[type="password"] {
  padding: 4px 20px;
  height: 35px;
  border: 1px solid black;
  border-radius: 3px;
  width:100%;
}

.form-row {
  flex-direction: row;
  display: flex;
}

.form-row > div {
  margin: 10px;
  flex-grow:1;
}

.form-panel {
  margin-left: auto;
  margin-right: auto;
  width: 60%;
}

input {
  display: block;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script>
  <style>

  </style>
</head>

<body>
  <form class="form-panel" id="signupForm">
    <div class="form-row form-name">
      <div><input type="text" name="fname" placeholder="First Name"></div>
      <div><input type="text" name="lname" placeholder="Last Name"></div>
    </div>
    <div class="form-row form-email">
      <div><input type="email" name="email" placeholder="Email Address"></div>
    </div>
    <div class="form-row form-password">
      <div><input type="password" name="password" placeholder="Password"></div>
      <div><input type="password" name="cpassword" placeholder="Comfirm Password"></div>
    </div>
    <input type="submit" class="btn btn-default submit-button" value="Sign up!">
  </form>
  <script>
  </script>
</body>

</html>

Хорошо, вы идете, думайте, что это лучше, чем ваша версия - по крайней мере, входы теперь выстраиваются в линию, и это похоже на вашу картину. Также исправлено сообщение об ошибке подтверждения пароля :) — Pete, 13 July 2018 в 09:38