Input box line up

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
frosty16
Forum Newbie
Posts: 19
Joined: Sat Jan 26, 2008 6:58 am

Input box line up

Post by frosty16 »

heya everyone

I was wondering if there is any way in which you can get the input boxes to line up so that the edge of them are all the same?

frosty
User avatar
Zoxive
Forum Regular
Posts: 974
Joined: Fri Apr 01, 2005 4:37 pm
Location: Bay City, Michigan

Re: Input box line up

Post by Zoxive »

Client side.

Code: Select all

<input><input><input>
 
I guess I don't understand your question.

They looked lined up to me.

Unless you mean

Code: Select all

<style>
input{
 border:none;
}
</style>
<input><input><input>
 
frosty16
Forum Newbie
Posts: 19
Joined: Sat Jan 26, 2008 6:58 am

Re: Input box line up

Post by frosty16 »

i have got the following code:

Code: Select all

     <?php
    
    echo "<form action='Save_User.php' method='POST'>\n<br>
            <span class='style5'>First Name:     <input type='Text' name='firstname'></span>\n<br>
            <span class='style5'>Surname:        <input type='Text' name='surname'></span>\n<br>
            <br>
            <span class='style5'>Username:       <input type='text' name='username'></span>\n<br>
            <span class='style5'>Password:       <input type='text' name='password'></span>\n<br>
            <br>
            <input type='submit' value='Add User'>\n
            </form>\n";
?>
and what it display's is in the attached. If you look the surname box is out of line with the others. How can i align all these together.
Attachments
php line up.JPG
php line up.JPG (78.57 KiB) Viewed 484 times
User avatar
Zoxive
Forum Regular
Posts: 974
Joined: Fri Apr 01, 2005 4:37 pm
Location: Bay City, Michigan

Re: Input box line up

Post by Zoxive »

First off, thanks for showing the code, and a picture helps a lot when trying to help others.

Code: Select all

<style>
.style5{
    display:block;
    width:300px;
}
.style5 span{
    float:left;
}
.style5 input{
    clear:none;
    float:right;
}
</style>
 <form action='Save_User.php' method='POST'><br>
<span class='style5'><span>First Name:</span><input type='Text' name='firstname'></span><br>
<span class='style5'><span>Surname:</span><input type='Text' name='surname'></span><br>
<br>
<span class='style5'><span>Username:</span><input type='text' name='username'></span><br>
<span class='style5'><span>Password:</span><input type='text' name='password'></span><br>
<br>
<input type='submit' value='Add User'>
</form>
Quick example. Not the best syntax, but you should get the idea.

All I did to the html is added <span> around the text, so we can tell it to stay to the left.
frosty16
Forum Newbie
Posts: 19
Joined: Sat Jan 26, 2008 6:58 am

Re: Input box line up

Post by frosty16 »

so i dont need to put it as an echo in php i can just do it in html?
User avatar
Zoxive
Forum Regular
Posts: 974
Joined: Fri Apr 01, 2005 4:37 pm
Location: Bay City, Michigan

Re: Input box line up

Post by Zoxive »

frosty16 wrote:so i dont need to put it as an echo in php i can just do it in html?
All echo does it output the text to the browser.

Wither that text is Html/Javascript/CSS, It does not matter.

You can still do it in an echo, But its still html. Its just being output by php.

Code: Select all

<?php
// Some php code
?>
<b>Hi there<b>
<!-- Other Html Code -->
<?php
// More php code
?>
 
You can even do it like above.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Input box line up

Post by pickle »

This has nothing to do with PHP - moving to Client-Side.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Re: Input box line up

Post by matthijs »

Code: Select all

 
            <form action='Save_User.php' method='POST'><br>
                        <p><label for="firstname">First Name:     </label><input type='Text' name='firstname'></p>
                        <p><label >Surname:        </label><input type='Text' name='surname'></p>
                        <br>
                        <p><label>Username:       </label><input type='text' name='username'></p>
                        <p><label>Password:       </label><input type='text' name='password'></p>
                        <br>
                        <input type='submit' value='Add User'>
            </form>
 

Code: Select all

 
        * { margin:0;padding:0;}
        form p { padding:5px 0; }
        label { display:block;float:left;width:200px; }
 
The * {} is there to reset the default styles. There are better ways to do that (search css reset), but for now it'll do. The p is there to have a nice semantic wrapper for the labels and inputs. You could also use divs, or something like a list.
Post Reply