在循环表单之前获取“提交”按钮

时间:2017-06-12 13:07:48

标签: javascript php html5 forms

我有一个表单,我需要输入要存储的数据。我使用了while循环,因为我需要使用相同的代码超过4/5次。问题是提交按钮即将出现在表单之前。它正在发挥作用。我查了一下。但是,我需要将提交按钮放在表单下方。

我试着改了几次。它仍然给我相同的输出。 怎么解决这个?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="../sns/bootstrap.min.css">
    <script type="text/javascript" src="../sns/jquery.min.js"></script>
    <script type="text/javascript" src="../sns/bootstrap.min.js"></script>
</head>
<body>
<table>
    <tr>
        <th>Department:</th>
        <th>Year:</th>
        <th>Course:</th>
        <th>Date(dd/mm/yyyy):</th>
        <th>Time:</th>
        <th>Roll:</th>        
    </tr>
    <form method="post" style="width: auto;">
        <?php
        $i=0;
        while ($i<5) {
            echo '<tr id="c1">
                <td>
                    <select name="dept'.$i.'" size="1">
                        <option value="EEE ">EEE</option>
                        <option value="CSE ">CSE</option>
                        <option value="CE ">CE</option>
                        <option value="ME ">ME</option>
                        <option value="IPE ">IPE</option>
                        <option value="GCE ">GCE</option>
                        <option value="ECE ">ECE</option>
                        <option value="ETE ">ETE</option>
                        <option value="MTE ">MTE</option>
                        <option value="URP ">URP</option>
                        <option value="Arch ">Architecture</option>
                    </select> 
                </td>
                <td>
                    <select name="year'.$i.'" size="1">
                        <option value="1">1st</option>
                        <option value="2">2nd</option>
                        <option value="3">3rd</option>
                        <option value="4">4th</option>
                    </select> 
                </td>
                <td>
                    <input type="text" name="course'.$i.'" size="10">
                </td>
                <td>
                    <input type="text" name="date'.$i.'" style="width: auto">
                </td>
                <td>
                    <select name="time'.$i.'" size="1">
                        <option>9:00</option>
                        <option>10:00</option>
                        <option>2:00</option>
                    </select> 
                </td>
                <td>
                    <input type="text" name="Roll'.$i.'"> 
                </td>
            </tr>';
            $i++;
        }
        ?>
        <input class="btn btn-default" type="Submit" value="Submit">
    </form>


</table>

</body>

</html>

2 个答案:

答案 0 :(得分:0)

您还需要将提交按钮放在td中,我还建议将表单完全移出表格,因为某些浏览器(主要是webkit / chrome)会添加或重新排列他们认为不完整的元素:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="../sns/bootstrap.min.css">
    <script type="text/javascript" src="../sns/jquery.min.js"></script>
    <script type="text/javascript" src="../sns/bootstrap.min.js"></script>
</head>
<body>
<form method="post" style="width: auto;">
<table>
    <tr>
        <th>Department:</th>
        <th>Year:</th>
        <th>Course:</th>
        <th>Date(dd/mm/yyyy):</th>
        <th>Time:</th>
        <th>Roll:</th>
    </tr>

        <?php
        $i=0;
        while ($i<5) {
            echo '<tr id="c1">
                <td>
                    <select name="dept'.$i.'" size="1">
                        <option value="EEE ">EEE</option>
                        <option value="CSE ">CSE</option>
                        <option value="CE ">CE</option>
                        <option value="ME ">ME</option>
                        <option value="IPE ">IPE</option>
                        <option value="GCE ">GCE</option>
                        <option value="ECE ">ECE</option>
                        <option value="ETE ">ETE</option>
                        <option value="MTE ">MTE</option>
                        <option value="URP ">URP</option>
                        <option value="Arch ">Architecture</option>
                    </select>
                </td>
                <td>
                    <select name="year'.$i.'" size="1">
                        <option value="1">1st</option>
                        <option value="2">2nd</option>
                        <option value="3">3rd</option>
                        <option value="4">4th</option>
                    </select>
                </td>
                <td>
                    <input type="text" name="course'.$i.'" size="10">
                </td>
                <td>
                    <input type="text" name="date'.$i.'" style="width: auto">
                </td>
                <td>
                    <select name="time'.$i.'" size="1">
                        <option>9:00</option>
                        <option>10:00</option>
                        <option>2:00</option>
                    </select>
                </td>
                <td>
                    <input type="text" name="Roll'.$i.'">
                </td>
            </tr>';
            $i++;
        }
        ?>
        <tr>
            <td colspan="6" align="right">
                <input class="btn btn-default" type="Submit" value="Submit">
            </td>
        </tr>
</table>
</form>
</body>

</html>

渲染: enter image description here

答案 1 :(得分:0)

<form method="post" style="width: auto;" action="">
            <table>
                <?php
                $i = 0;
                while ($i <= 5) {
                    #my form
                    if($i == 5)
                        echo '<button class="btn btn-default" type="Submit" style="margin-left: 18%; width: 14%">Submit0</button>';
                    $i++;
                }
                ?>
                <input class="btn btn-default" type="Submit" value="Submit1">
            </table>
        </form>