HTML: как показать форму ввода в таблице? - PullRequest
Новая
       43

HTML: как показать форму ввода в таблице?

0 голосов
/ 25 февраля 2020

Я новичок в HTML и мне интересно, как мне преобразовать входные данные формы в таблицу? Я создал кнопку отображения, чтобы при нажатии на нее информация, представленная пользователем, отображалась в таблице. 

<html>
    <style>
    </style>
    <body>

    <p> Please insert the following information for your Gym Membership.</p>

    <form>
      <br>
      <label for="name">Name:</label>
      <input type="text" id="name">
      <br><br>
  
       <label for="age">Age (between 18-60):</label>
       <input type="number" id="age" min="18" max="60"><br><br>

       <label for="cars">Select your height (feet and inches):</label>
       <select id="feet">
       <option value="4">4'</option>
       <option value="5">5'</option>
       <option value="6">6'</option>
     </select>
      <select id="inches">
      <option value="1">1"</option>
      <option value="2">2"</option>
      <option value="3">3"</option>
      <option value="4">4"</option>
      <option value="5">5"</option>
      <option value="6">6"</option>
      <option value="7">7"</option>
      <option value="8">8"</option>
      <option value="9">9"</option>
      <option value="10">10"</option>
      <option value="11">11"</option>
    </select>
         <br>
         <br>
      <input type="reset" value="Reset">
      <input type="submit" value="Display">
    </form>



    </body>
    </html>

1 Ответ

0 голосов
/ 25 февраля 2020

Обязательно добавить к ней javascript.

Поскольку вы новичок в HTML / javascript, я изменил ваш фрагмент кода в соответствии с вашими потребностями.

HTML: 

<html>
    <style>
    </style>
    <b>

    <p> Please insert the following information for your Gym Membership.</p>

   <form action="#" method="post" name="form_name" id="form_id" class="form_class" >
      <br>
      <label for="name">Name:</label>
      <input type="text" id="name">
      <br><br>

       <label for="age">Age (between 18-60):</label>
       <input type="number" id="age" min="18" max="60"><br><br>

       <label for="cars">Select your height (feet and inches):</label>
       <select id="feet">
       <option value="4">4'</option>
       <option value="5">5'</option>
       <option value="6">6'</option>
     </select>
      <select id="inches">
      <option value="1">1"</option>
      <option value="2">2"</option>
      <option value="3">3"</option>
      <option value="4">4"</option>
      <option value="5">5"</option>
      <option value="6">6"</option>
      <option value="7">7"</option>
      <option value="8">8"</option>
      <option value="9">9"</option>
      <option value="10">10"</option>
      <option value="11">11"</option>
    </select>
         <br>
         <br>
      <input type="reset" value="Reset">
      <input type="button" Value="submit"  onclick="Display()">
    </form>
    </b>
    </html>

<div id="table"  style="display:none;" class="answer_list" > <table id="myTable">
</table></div>

Javascript: 

function Display()
{
  document.getElementById('table').style.display = "block";
  var table = document.getElementById("myTable");
var row = table.insertRow(0);

var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);

cell1.innerHTML = document.getElementById("name").value;
cell2.innerHTML = document.getElementById("age").value;
cell3.innerHTML = document.getElementById("feet").value+"," +document.getElementById("inches").value;

}

или вы можете найти его по ссылке ниже, она отлично работает: https://codepen.io/iliass-coder/pen/jOPBbdz

Потратьте некоторое время, чтобы прочитать это и понять, что я сделал. и попробуйте добавить CSS, на данный момент это немного уродливо.

...