更改我的 HTML 表单的输出

Question

我正在尝试使用来自 MySQL 的数据创建一个表单，但我当前的输出看起来不像预期的那样，所以我只需要对我当前的表单进行一些简单的更改

我当前在浏览器中的输出：http://gyazo.com/f4668ca59586ec0d4d1500ea6f7b6257

我想做的是

解决了名为 'Long Jump A' 的第一列的问题，因此它在下拉菜单旁边，你可以看到最下面的旁边没有什么。
其次，如何调换下拉菜单和事件？所以事件在左边，然后下拉菜单在对吗？
将表格从顶部向下移动，因此有 space

代码：

<?php

    require_once 'db/connect.php';

        //Query to display all events                           
            if ($event_result = $con->query("SELECT Event.Name FROM event")) {  
                echo "<form method =\"POST\">";
                            while ($row = $event_result->fetch_assoc()) {               
                            echo $row['Name'] . ' <br> ';

                                if ($student_result = $con->query("SELECT Student.Form, Teacher.Form, Student.Forename, Student.Surname, Student_ID " .
                                    "FROM Student, Teacher " .
                                        "WHERE Student.Form = Teacher.Form AND Teacher.Form = 'C'")) {

                                    if ($student_result->num_rows) {                
                                                echo "<select name ='Student_ID'>";                     
                                                    while ($row1 = $student_result->fetch_assoc()) {                                        
                                                    echo "<option value ='" . $row1['Student_ID'] . "'>" . $row1['Forename'] . ' ' . $row1['Surname'] . "</option>";
                                                }
                                                echo "</select>";                   
                                    }                                                                   
                                }
                            }   

                echo "</form>"; 
            }

?>

Answer 1

当您回显该行的名称时，您有一个空缺 <br />。这意味着回显标题，然后在显示 <select> 组之前中断。您应该在关闭 while 循环之前将 <br /> 向下移动。

或者只删除顶部 <Br /> 并在结束后添加回来，这样它看起来像这样：

 echo "</select> <br />";

编辑：这将解决您的最后两个问题，因为现在每个 select 组都将与行的标题正确对齐。如果你想在表单顶部添加更多 space，你有很多选择：添加更多分隔符、添加边距或填充，或者将元素定位为相对元素并使用 css top 属性或 CSS 变换移动它。

更改我的 HTML 表单的输出

Changing the output of my HTML form

html

php

mysqli