为调查创建HTML表单

时间:2017-03-17 13:49:28

标签: html

我对html很新,但同意用一个项目帮助一个朋友(对他来说更新) - 创建一个调查来收集一些数据。我已经做了我能做的事,但有几个问题我还没有解决。由于这个项目需要加快一点,所以在我学到更多知识并且必须寻求帮助之前,我没有等待的余地。

以下是我遇到问题的部分(调查内容已被删除,因为信息不是我要提供的):

 <!DOCTYPE html>
    <html>
    <body>

    <h1>Survey form</h1>

    <form action="action_page.php" method="post">

    <p>Yes or no question 1</p>
      <input type="radio" name="Success" value="Yes" checked> Yes
      <input type="radio" name="Success" value="No"> No

    <p>PLease provide details of each individual.</p>
     <table id="t01">
    <tr>
     <th>Id #</th>
     <th>Year</th>
     <th>Detail 2</th> 
     <th>Detail 3</th>
     <th>County</th>
     <th>Detail 5</th> 
     <th>Detail 6</th>
     <th>Detail 7</th>
     <th>Detail 8</th> 
     <th>Detail 9</th>
     <th>Detail 10</th>
     <th></th>
    </tr>
    <tr>
    <td>1</td>
    <td>
     <input list="Year", name="Year">
      <datalist id="Year">
        <option value="2015">
        <option value="2014">
        <option value="2013">
        <option value="2012">
        <option value="2011">
        <option value="2010">
        <option value="2009">
        <option value="2008">
        <option value="2007">
        <option value="2006">
        <option value="2005">
        <option value="2004">
        <option value="2003">
        <option value="2002">
        <option value="2001">
        <option value="2000">
        <option value="1999">
        <option value="1998">
        <option value="1997">
        <option value="1996">
        <option value="1995">
        <option value="1994">
        <option value="1993">
        <option value="1992">
        <option value="1991">
        <option value="1990">
        <option value="Before 1990">
      </datalist>
    </td>
    <td>
      <input list="Detail 2", name="Detail 2">
      <datalist id="Detail 2">
        <option value="1">
        <option value="2">
        <option value="3">
        <option value="4">
        <option value="5">
      </datalist>
    </td> 
    <td>
      <input list="Detail 3", name="Detail 3">
      <datalist id= "Detail">
        <option value="1">
        <option value="2">
        <option value="3">
      </datalist>
    </td>
    <td>
      <input list="County", name="County">
      <datalist id="County">
        <option value="Antrim">
        <option value="Armagh">
        <option value="Carlow">
        <option value="Cavan">
        <option value="Clare">
        <option value="Cork">    
        <option value="Derry">
        <option value="Donegal">
        <option value="Down">
        <option value="Dublin">
        <option value="Fermanagh">
        <option value="Galway">  
        <option value="Kerry">
        <option value="Kildare">
        <option value="Kilkenny">
        <option value="Loais">
        <option value="Leitrim">
        <option value="Limerick">    
        <option value="Longford">
        <option value="Lough">
        <option value="Mayo">
        <option value="Meath">
        <option value="Monaghan">
        <option value="Offaly">    
        <option value="Roscommon">
        <option value="Sligo">
        <option value="Tipperary (North)">
        <option value="Tipperary (South)">  
        <option value="Tyrone">
        <option value="Waterford">
        <option value="Westmeath">
        <option value="Wexford">
        <option value="Wiclow">
      </datalist>
    </td>
    <td>
      <input list="Detail 5", name="Detail 5">
      <datalist id="Detail 5">
        <option value="Yes">
        <option value="No">
      </datalist>
    </td>
    <td>
      <input list="Detail 6", name="Detail 6">
      <datalist id="Detail 6">
        <option value="Yes">
        <option value="No">
      </datalist>
    </td>
    <td>
      <input list="Detail 7", name="Detail 7">
      <datalist id="Detail 7">
        <option value="Yes">
        <option value="No">
      </datalist>
    </td>
    <td>
      <input list="Detail 8", name="Detail 8">
      <datalist id="Detail 8">
        <option value="Yes">
        <option value="No">
      </datalist>
    </td>
    <td>
      <input list="Year", name="Year">
    </td>
    <td>
      <input list="Detail 9", name="Detail 9">
      <datalist id="Detail 9">
        <option value="1">
        <option value="2">
        <option value="3">
        <option value="4">
        <option value="5">
        <option value="6">
        <option value="7">
        <option value="8">
        <option value="9">
        <option value="10">
        <option value="11">
        <option value="12">
        <option value="13">
        <option value="14">
        <option value="15">
        <option value="16">     
        <option value="Other (Please specify)">
      </datalist>
    </td>
    <td>
      <textarea name="message" rows="1" cols="30">
        Please detail other here:
      </textarea>
    </td>
    </tr>
    
    <button onclick="addRowFunction()">Add Row</button>

    <script>
    function addRowFunction() {
    var table = document.getElementById("t01");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    var cell5 = row.insertCell(4);
    var cell6 = row.insertCell(5);
    var cell7 = row.insertCell(6);
    var cell8 = row.insertCell(7);
    var cell9 = row.insertCell(8);
    var cell10 = row.insertCell(9);
    var cell11 = row.insertCell(10);
    var cell12 = row.insertCell(11);
    
    cell1.innerHTML = "NEW CELL1";
    cell2.innerHTML = "NEW CELL2";
    cell3.innerHTML = "NEW CELL2";
    cell4.innerHTML = "NEW CELL2";
    cell5.innerHTML = "NEW CELL2";
    cell6.innerHTML = "NEW CELL2";
    cell7.innerHTML = "NEW CELL2";
    cell8.innerHTML = "NEW CELL2";
    cell9.innerHTML = "NEW CELL2";
    cell10.innerHTML = "NEW CELL2";
    cell11.innerHTML = "NEW CELL2";
    cell12.innerHTML = "NEW CELL2";    
    }
    </script>

    <input type="submit" value="Submit">

    </form>					

    </body>
    </html>

正如你所看到的,这是一个伟大的,丑陋的东西,但除了风格,它几乎做我想要的。唯一的例外是:

  1. 我在我的表中添加行的功能 - 理想情况下,我希望将行添加到表格底部(而不是顶部),复制上面行的内容(每个细节的选项 - 不是只是“新单元格”)但每行的Id#加1。我尝试过这几种方法,但还没有破解它。

  2. 提交数据 - 这里我真的不够深入。我对于如何使数据进入某个地方只有最模糊的想法,而且目前还不确定它有什么地方可去。我知道它在线,但设置“action_page.php”是一个谜,实际存储数据的格式也是如此。任何关于这样做的简单方法的建议,或者指向某个地方的建议,都将非常感激。

  3. 感谢阅读。如果我能让问题更容易理解,请告诉我。

1 个答案:

答案 0 :(得分:0)

要回答问题的第一部分,您可以使用以下内容在表格的末尾插入:

var table = document.getElementById("myTable");
var row = table.insertRow(table.rows.length);

请确认您是否希望通过PHP发送电子邮件的数据,我稍后会添加一个示例。

- 编辑 -

请查看此页面以使用PHP发送电子邮件:PHP Mail function

此外,您还需要阅读表单数据以构建邮件消息。为帮助您完成此操作,请查看此页面:PHP Forms