How do I define in CSS a web login form in PHP and move it around with CSS

brandon

New member
or what do i do to move it? How do I define in CSS or anything a web login form made in PHP and have it moved around the page...Like I know how to make a login form but what if I want to move it to the right..or to the left..Do i do that in CSS or do i do that in PHP or HTML or wat?
 
1. In PHP you don't do anything, you can't make a login form in PHP since PHP is a processing language that runs on the server.Everything that has tags (<form>,<input>,<div>,<select>) is only HTML. The extension of the file is irrelevant. a PHP extension tells the server that the file *may( have PHP code that needs to be run before the output is sent to the browser, but it may as well have only HTML, case in which nothing happens and the file is eventually sent directly to the browser.

2. The answers is that you need to make your login form normally in HTML but wrap it in a div. On that div, use some CSS styles to position it however you want. Sample code below:

<div class="form_wrapper">
<form i="login_form" name="login_form" action="..." method="POST">
<input type="text" name="username" value="">
<input type="password" name="pass" value="">
</form>
</div>

then in an external CSS file (or defined inline in the head tag), define the class form_wrapper like this (note the dot in front):

.form_wrapper {
width:111px;
align:left;
text-align:center;

}

the rest is up to you.
 
Here's a quick starter for you if you want to use it. This will give you a form with cascading styles and you'll be able to submit it and it will display the submitted information. It's just a quick template you can edit it as you need.

HERE'S YOUR CSS
<style type="text/css">
#form { width:100%; }
#form .text { float:left;width:25%;clear:left; }
#form .input { float:left;width:70%;clear:right; }
#form .submit { width:100%;clear:both;text-align:left; }

fieldset { width:100%; }
legend { font-weight:bold;font-size:16px; }

input { border:1px solid #000000;font-family:inherit;background-color:#777777;color:#444444; }
</style>

HERE'S YOUR CODE

<?php if(!isset($_POST['submit'])) { ?>
<div id="form">
<form method="post" action="#">
<fieldset> <legend> Form </legend>
<div class="text"> Name: </div>
<div class="field"> <input type="text" name="name" /> </div>
<div class="text"> Age: </div>
<div class="field"> <input type="text" name="age" /> <div>
<div class="text"> E-Mail: </div>
<div class="field"> <input type="text" name="email" /> </div>
<div class="submit"> <input type="submit" value="Submit" name="submit"> </div>
</fieldset>
</form>
</div>
<?php } ?>

<?php if(isset($_POST['submit'])) { ?>
Thank you for filling out this awesome form.
<p />
<b> Name: </b> <?php echo $_POST['name']; ?> <br />
<b> Age: </b> <?php echo $_POST['age']; ?> <br />
<b> E-Mail: </b> <?php echo $_POST['email']; ?> <br />
<?php } ?>
 
Back
Top