I have the following scripts placed in my PHP page:
echo "The file has been successfully read!";
echo "<br>";
echo "<br>";
echo "<form action='displaypurchase.php' method='post' target='_blank' enctype='multipart/form-data'>";
echo "<input type='hidden' name='Password' value='" . $_POST['Password'] . "'>";
echo "<input type='submit' name='displaypurchase' value='Purchases'>";
echo "</form>";
echo "<br>";
echo "<form action='displaygamebucks.php' method='post' target='_blank' enctype='multipart/form-data'>";
echo "<input type='hidden' name='Password' value='" . $_POST['Password'] . "'>";
echo "<input type='submit' name='displaygamebucks' value='Gamebucks'>";
echo "</form>";
echo "<br>";
echo "<form action='main.php' method='post' enctype='multipart/form-data'>";
echo "<input type='hidden' name='Password' value='" . $_POST['Password'] . "'>";
echo "<input type='submit' name='returntomain' value='Back to main'>";
echo "</form>";
echo "<br>";
The page look's like this:
http://s16.postimg.org/6afeiln85/Capture.png
As you can see, the form buttons are far from each other. I wanted them to align vertically and closer to each other. How do I achieve his? I tried float but the result was a mess.
EDIT:
Here's what I have so far. I added CSS style inside the FORM tag as Kel suggested.
now I'm getting this:
http://s30.postimg.org/4fa5mxpxd/Capture2.png
It's almost there, as you can see it's already closed to each other, the only problem left is I want them positioned vertically, meaning from top to bottom. The picture shows they are positioned from top to bottom but each buttons are moving to the right. I needed the
tags since without it, the buttons would line up horizontally.
FINAL EDIT: Got it to work the way I want it to be. I don't know why I haven't thought of it before, but I used a table without borders, and it worked exactly as how I wanted it to be. Posting an answer to help others
Use float inside a div
.rows
{
float:left;
}
<div>The file has been successfully read!</div>
<div class="rows">
<form action='displaypurchase.php' method='post' target='_blank' enctype='multipart/form-data'>
<input type='hidden' name='Password' value=''>
<input type='submit' name='displaypurchase' value='Purchases'>
</form>
</div>
<div class="rows">
<form action='displaygamebucks.php' method='post' target='_blank' enctype='multipart/form-data'>
<input type='hidden' name='Password' value=''>
<input type='submit' name='displaygamebucks' value='Gamebucks'>
</form>
</div>
<div class="rows">
<form action='main.php' method='post' enctype='multipart/form-data'>
<input type='hidden' name='Password' value=''>
<input type='submit' name='returntomain' value='Back to main'>
</form>
</div>
Do you mean horizontally instead of vertically? If so remove the <br>
and add some CSS for the forms to display: inline-block;
Take a look here: http://jsfiddle.net/CVfNx/
I don't know why you use that much echo. Try this code hop your problem will be fixed and the code will be much more cleaner.
<?php
$password=htmlspecialchars($_POST['Password']); // it's your decision how you will get data from user
$forms= <<<DATA
<style>
form{
float:left;
display: inline-block;
}
</style>
<form action='displaypurchase.php' method='post' target='_blank' enctype='multipart/form-data'>
<input type='hidden' name='Password' value="{$password}" />
<input type='submit' name='displaypurchase' value='Purchases'>
</form>
<form action='displaygamebucks.php' method='post' target='_blank' enctype='multipart/form-data'>
<input type='hidden' name='Password' value="{$password}">
<input type='submit' name='displaygamebucks' value='Gamebucks'>
</form>
<form action='main.php' method='post' enctype='multipart/form-data'>
<input type='hidden' name='Password' value="{$password}">
<input type='submit' name='returntomain' value='Back to main'>
</form>
DATA;
echo $forms;
?>
I don't know why I haven't thought of it before, but I used a table without borders, and it worked exactly as how I wanted it to be. Posting an answer to help others