将css添加到表单

Question

我正在尝试将 CSS 添加到我的表单中，但不知道如何执行此操作。表单是在 php 和 MySQL 中创建的，在浏览器中看起来像：http://gyazo.com/5d099ead9bd6ea83859a5114b2438748

我需要对齐文本和下拉菜单，使它们始终相等并添加一些间距。有人为此提供 CSS 帮助吗？

目前的html：

  <div class="wrap">
              <img src="/images/logo.png" alt="Highdown logo" />
              <h1>Entry form</h1> 
            </div>

目前的css：

.wrap {
                position: relative;
                }

表格是这样产生的：

if ($event_result = $con->query("SELECT Event.Name FROM event")) {  
                echo "<form method =\"POST\" action=\"save.php\"> ";
                            while ($row = $event_result->fetch_assoc()) {               
                            echo $row['Name']. ' ';

                                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.Username = '" . $_SESSION['Username'] . "'")) {

                                    if ($student_result->num_rows) {                                                                                
                                                echo "<select name ='". $row['Name']."'>";  
                                                    while ($row1 = $student_result->fetch_assoc()) {
                                                    echo '<option value="" style="display:none;"></option>';
                                                    echo "<option value ='" . $row1['Student_ID'] . "'>" . $row1['Forename'] . ' ' . $row1['Surname'] . "</option>";
                                                }
                                                echo "</select> <br />";                    
                                    }                                                                   
                                }
                            }   
                        echo '<input type="submit" value ="Submit">';
                        echo '<input type="reset" value ="Reset">';

                        echo '<input type="button" value = "Add student" onclick="location.href=\'http://localhost/sportsday/addstudent.php\'">';
                        echo '<input type="button" value = "Delete student">';
                echo "</form>"; 
            }

Answer 1

首先，检查您的数据库... 可能存在与表格输出无关的另一个问题。

所以，首先删除Table Tag..并检查它是否工作？

然后在 HTML TABLE TAG 中尝试

否则给我示例数据库 .sql 文件并在谷歌驱动器或共享驱动器上完成 PHP 代码。

这样我就可以检查并确定问题出在哪里？

Answer 2

这应该可行，因为我没有数据库，所以我没有尝试

        //Query to display all events                                                  
                if ($event_result = $con->query("SELECT Event.Name FROM event")) {                     
                        echo "<form method =\"POST\" action=\"save.php\"> ";
                                echo '<table>';
                                        echo '<tr>';
                                        echo '<td>';
                                                while ($row = $event_result->fetch_assoc()) {                          

                                                        echo $row['Name']. ' ';
                                        echo '</td>';          

                                                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.Username = '" . $_SESSION['Username'] . "'")) {


                                                        if ($student_result->num_rows) {                                                                                                                                                                                                                                       

                                                                echo '<td>';
                                                                echo "<select name ='". $row['Name']."'>";     

                                                                        while ($row1 = $student_result->fetch_assoc()) {


                                                                        echo "<option value ='" . $row1['Student_ID'] . "'>" . $row1['Forename'] . ' ' . $row1['Surname'] . "</option>";       

                                                                }              

                                                                echo "</select> <br />";
                                                                echo '</td>';          
                                                                echo '</tr>';                                                                          
                                                        }                                                                                                                                      
                                                }
                                        }
                                        echo '</table>';                                               
                                        echo '<input type="submit" value ="Submit">';
                                        echo '<input type="reset" value ="Reset">';

                                        echo '<input type="button" value = "Add student" onclick="location.href=\'http://localhost/sportsday/addstudent.php\'">';
                                        echo '<input type="button" value = "Delete student">';                                         
                        echo "</form>";

                        }





?>

Answer 3

你可以直接用css写

form {
  ⋮ declare css
}

或为表格命名

form[name="value"]{
    ⋮ declare css
}

或在表单上添加任何类或 id

#formid{
    ⋮ declare css
}

.formclass{
       ⋮ declare css
} 

Answer 4

使用

<form>
    <table>
      <tr> //1st Table row
        <td></td> //Table column data
        <td></td> //table column data
      </tr> //1st row ends

      <tr> // 2nd Table row
        <td></td> //Table column data
        <td></td> //table column data
      </tr> //2nd row ends
    </table>
</form>

这将为您提供更好的表单布局。