Adding css to a form

Question

I am trying to add CSS to my form but not sure how to do this. The form is created in php and MySQL, in browser it looks like: http://gyazo.com/5d099ead9bd6ea83859a5114b2438748

I need to allign the text and drop downs so they are in the equal throughout and add some spacing. Anyone help with CSS for this?

html currently:

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

css currently:

.wrap {
                position: relative;
                }

The form is produced with this:

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>"; 
            }

Yash Thakur · Accepted Answer · 2015-02-12 07:29:30Z

2

Use

<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>

This will give you a better layout of the form.

answered Feb 12, 2015 at 7:29

Yash Thakur

1,2018 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

cbaker Over a year ago

will do that, just to confirm, table tags go outside the form tags? and how about the tr and td tags? where would they go within the form

Forien Over a year ago

@cbaker only <tr>, <thead>, <tbody> and <tfoot> tags are allowed inside <table> element. Thus, <form> should wrap entire <table>

cbaker Over a year ago

just tried adding the table, producing wrong output, can you see where its wrong? gyazo.com/3630123d3be2c6962d658a7231c932d2 thanks, having problem getting correct table

Yash Thakur Over a year ago

@cbaker can you put the code somewhere from where i can use it..? And put form tag outside of table and not inside see my above code

cbaker Over a year ago

I don't know of anywhere to edit like you are asking :( current code: gyazo.com/8e33ca69396d0a9138a22ae08680ae09 and the output looks like: gyazo.com/cfd6b1c7e393a284fde82e982dcfc62b (the names should be in the drop down)

|

Yash Thakur · Accepted Answer · 2015-02-12 08:19:45Z

This should work i did not try as i dont have the database

        //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>";

                        }





?>

Forien · Accepted Answer · 2015-02-12 08:17:18Z

0

you can directly write in css

form {
  ⋮ declare css
}

or give name to form

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

or add any class or id on form

#formid{
    ⋮ declare css
}

.formclass{
       ⋮ declare css
}

edited Feb 12, 2015 at 8:17

Forien

2,7632 gold badges15 silver badges31 bronze badges

answered Feb 12, 2015 at 7:38

Aditya Joshi

12 bronze badges

Comments

MONTS_MIND_Hacker · Accepted Answer · 2015-02-12 08:48:31Z

0

First , check your database... May be there is Another Issue not related to Tabular Output.

So , First remove Table Tag..and check whether its working ?

Then try in HTML TABLE TAG

Otherwise give me sample database .sql File and complete PHP code in google drive or on shared drive.

So that I can check and identify where is problem ?

answered Feb 12, 2015 at 8:48

MONTS_MIND_Hacker

1,7272 gold badges9 silver badges9 bronze badges

Collectives™ on Stack Overflow

Adding css to a form

4 Answers 4

9 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

9 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related