Indenting form fields

[WarKirby]

Hi all. I'm trying my hand at making a simple input form. The formatting isn't going so well though. It looks like this:

 

 

There are a few problems with this:

 

1. The textarea next to Contents isn't aligned with the one above it.

2. Contents is at the bottom of the textarea, not the top

3. The lower button is left aligned

 

My HTML for this is:

<form action="<?php echo $PHP_SELF;?>" method="post">
Package Article: <input type="text" name="pArticle" size="9" maxlength="9" /><br />
Contents:<textarea cols="9" name="cArticles" rows="10" wrap="hard"></textarea><br />
<input type="submit" value="Add Package">
</form>

 

The limits are deliberate. I'll be using this for inputting strings which are exactly 9 characters long, no more and no less. I want the bottom box to force a linebreak every 9 chars and as far as I'm aware, the above code should do that.

 

I am using a CSS, so I figured I'd take a crack at fixing it. I added these two lines to my CSS:

textarea { text-indent: 80px; }
input { text-indent: 80px; }

 

And that failed miserably. The result was:

 

 

I don't understand why the textarea or upper box didn't even move at all. Or why the button at the bottom didn't entirely offset, instead just enlarging itself,

 

Here is roughly how I want it to look (done in photoshop)

 

 

Can anyone tell me what I need to do to my CSS to make it look like the third picture ?

[vinpkl]

if you want your inputs aligned then you need to use <label>.

 

see the below link

 

http://www.cssdrive.com/index.php/examples/exampleitem/tableless_forms/

 

vineet

[WarKirby]

if you want your inputs aligned then you need to use <label>.

 

see the below link

 

http://www.cssdrive.com/index.php/examples/exampleitem/tableless_forms/

 

vineet

 

That looks perfect, excellent thank you.

I'll mark solved once I've tested it thoroughly.

[WarKirby]

Sadly, this has not solved it

 

I tried using all the CSS lines it suggested and changing the HTML appropriately. Also for good measure of testing, I tried using the html provided in that example. Neither part worked. It looks like this:

 

Here's the HTML I'm using

<form action="<?php echo $PHP_SELF;?>" method="post">
<label for="pArticle">Package Article:</label>
<input type="text" name="pArticle" size="9" maxlength="9"/><br />
<label for="cArticles">Contents:</label>
<textarea name="cArticles"></textarea><br />
<input type="submit" name="submitbutton" id="submitbutton" value="Add Package">
</form>


<form>

<label for="user">Name</label>
<input type="text" name="user" value="" /><br />

<label for="emailaddress">Email Address:</label>
<input type="text" name="emailaddress" value="" /><br />

<label for="comments">Comments:</label>
<textarea name="comments"></textarea><br />

<label for="terms">Agree to Terms?</label>
<input type="checkbox" name="terms" class="boxes" /><br />

<input type="submit" name="submitbutton" id="submitbutton" value="Submit" />

</form>

 

 

And the CSS:

 

body, body table {
font-family: "Times New Roman", Times, serif;
font-size: small;
}
.xsmall {
font-size: x-small;
}

label{
float: left;
width: 120px;
font-weight: bold;
}

#submitbutton{
margin-left: 120px;
margin-top: 5px;
width: 90px;
}


input, textarea{
width: 180px;
margin-bottom: 5px;
}

textarea{
width: 250px;
height: 150px;
}

br{
clear: left;
}

 

Any idea what I've done wrong ?

[WarKirby]

Agh. It just worked. I have no idea why. I'm editing some PHP farther up the file.  I'm thought I didn't do anything that would change this, but the forms just suddenly started working.

 

And of course, if I don't know how I fixed it, I'll probably break it again just as easily

[vinpkl]

good to know that it worked for you

 

vineet