Need To Have A Grid For Input Form With Php!

[saravanataee]

Dear members,

Greetings,

I am new bie to php and having a requirement to make a php form which will have fields and inputs arranged in a grid..

 

Example!

 

Label1 Label2 Label3 Label4

textboxfor texboxfor textboxfor textboxfor

label1 label2 label3 label4

 

 

button1 button2

 

 

 

How can i have such grid table in my form. i can develop a table and have rows and coloums but something like this i dont know. As well button1 and 2 for inserting data's into sql and retrieving!

[Muddy_Funster]

just put the form inside a table?

[Barand]

or the table inside a form

 

<?php
if (isset($_POST['btnSub'])) {
   echo "You entered<br />";
   echo '<pre>'.print_r($_POST, 1).'</pre>';
}
?>

<form method="post">
   <table border='0' >
    <tr>
	    <td><label for="t1">Label1</label></td>
	    <td><label for="t2">Label2</label></td>
	    <td><label for="t3">Label3</label></td>
	    <td><label for="t4">Label4</label></td>
    </tr>
    <tr>
	    <td><input name="t1" id="t1" size="10" value="text1"></td>
	    <td><input name="t2" id="t2" size="10" value="text2"></td>
	    <td><input name="t3" id="t3" size="10" value="text3"></td>
	    <td><input name="t4" id="t4" size="10" value="text4"></td>
    </tr>
    <tr>
	    <td><input type="submit" name="btnSub" value="Button 1"></td>
	    <td><input type="submit" name="btnSub" value="Button 2"></td>
	    <td colspan="2"> </td>
    </tr>
   </table>
</form>

[Muddy_Funster]

that too I just do it the other way because eclipse gets upset about form tags apparently not being alowed to contain table tags (tbody, tr, th and td are all fine, just not table its self for some reason ) even though it renders fine in the browser

[Christian F.]

If the data you're collecting is tabular data, then using an table is the proper way to go. If not then using CSS to position them would be the correct thing to do.

 

Quick example, not necessarily 100% correct:

<form method="post" action="">
<fieldset>
	<div>
		<label for="inp_1">Input 1</label>
		<input id="inp_1" type="text" name="input_1">
	</div>

	<div>
		<label for="inp_2">Input 2</label>
		<input id="inp_2" type="text" name="input_2">
	</div>

	<div>
		<label for="inp_3">Input 3</label>
		<input id="inp_3" type="text" name="input_3">
	</div>

	<div>
		<label for="inp_4">Input 4</label>
		<input id="inp_4" type="text" name="input_4">
	</div>
</fieldset>

<fieldset class="buttons">
	<input type="submit" name="submit" value="Submit form">
</fieldset>
</form>

 

With the following CSS:

 /* Clearfix, to ensure that the fieldset contains all elements. */
form fieldset:after {
content: ".";
height: 0px;
display: block;
visibility: none;
clear: left;
}

/* Make each div float to the left, and take 25% of the width. 
  This will make 4 divs ble placed next to each other, in a row,
  for as many rows as necessary. */
form fieldset div {
width: 25%;
float: left;
}

/* Inputs and labels should take the entire width of the div,
  and be shown as block level elements. */
form fieldset div label,
form fieldset div input {
display: block;
width: 100%;
}