Блог

Главная - Вопросы по программированию - Добавление еще одной формы в html

Добавление еще одной формы в html

#javascript #html #css

Вопрос:

Это мой код. Я хочу добавить еще одно лекарство, когда я нажимаю на кнопку , Как я могу выполнить эту задачу?

 <html>
<body style="color:black; font-size:20px;">
<form>
    <label style="margin-right:95px;"> Medicine </label> 
    <label style="margin-right:135px;"> Qty. </label>
    <label> Timing-Freq-Duration </label> <br>
    <input type="text" id="medicine" name="medicine" placeholder="Medicine Name">
    <input type="text" id="quantity" name="quantity">
    <input type="text" id="duration" name="duration">
    <input type="submit" style="margin-left:30px;" value=" ">
</form>
</body>
</html>

введите описание изображения здесь

Комментарии:

1. вам нужно изучить javascript, или Vue, или Angular, или какой — либо другой язык интерфейса. Я рекомендую Javascript jQuery, если вы новичок в этом.

Ответ №1:

Не уверен, что вы можете/не можете делать за пределами того, что вы упомянули, но я бы, вероятно, сделал что-то подобное.

 $(document).ready(function(){
  var i = 0;
  
  $('#add-row').click(function(){
    $('#init-group').first().clone(true).attr('id','med-' i).insertAfter('form .form-group:last');
    i  ;
  });
}); 
 form .form-group {
  float: left;
  margin-top: 5px;
}

form span {
    background: #EFEFEF;
    border: 1px solid #767676;
    font-size: 0.9rem;
    position: relative;
    top: 5px;
    padding: 0px 6px 3px;
    cursor: pointer;
    float: left;
    margin-left: 5px;
}

input[type="submit"]{
  margin-top: 2rem;
}
.form-row::after,
input[type="submit"]::after{
  content:"";
  clear: both;
  display: table;
  position: relative;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <div class="form-headers">
    <label style="margin-right:95px;"> Medicine </label> 
    <label style="margin-right:135px;"> Qty. </label>
    <label> Timing-Freq-Duration </label>
  </div>
  
  <div class="form-row">
    <div id="init-group" class="form-group">
      <input type="text" id="medicine" name="medicine" placeholder="Medicine Name">
      <input type="text" id="quantity" name="quantity">
      <input type="text" id="duration" name="duration">
    </div>
    <span id="add-row"> </span>
  </div>
  
  <input type="submit" value="Submit">
</form>

Ответ №2:

введите описание изображения здесь

Вам нужно использовать Javascript.
Это простой пример с библиотекой jQuery и начальной загрузкой (в основном для получения стиля).
https://getbootstrap.com/docs/5.1/getting-started/introduction/
https://jquery.com/

Проверьте ДЕМОНСТРАЦИЮ ниже:

 $(function(){
    $('#add-row').click(function(){
       $(".row:first-child").clone().prependTo(".container-fluid"); 
    });
}); 
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div class="container-fluid p-4">
  <div class="row mb-3">
    <div class="col">
      <label for="" class="form-label">Medicine</label>
      <input type="text" class="form-control" id="" placeholder="Medicine Name">
    </div>
    <div class="col-2">
      <label for="" class="form-label">Qty.</label>
      <input type="text" class="form-control" id="">
    </div>
    <div class="col-2">
      <label for="" class="form-label">Timing</label>
      <input type="text" class="form-control" id="">
    </div>
  </div>
  <button class="btn btn-outline-primary" id="add-row">Add Medicine</button>
</div>
Метки: