I am looking to add a form that only contains the following:
I want it to the text box is wide on the left and a large submit button inline to the textbox on the right.
Anyone able to help code some to make that work?
I can code the back end no problem.
<form action=“asdf.php” method=“post”>
<textarea name=“textarea”></textarea>
<input type="submit value=“Submit” name=“submit” />
</form>
textarea,input{float:left;}
Work from there. I assume you can style it on your own :).
What would I add for the submit button so it appears just to the left of the textbox?
You’d make the input come first in the HTML.
Though that’s not a standard look, and also how you worded your post, made me put hte textbox first.
Ryan, glad to see you’re back in the saddle.
Thanks :). I plan to stay a while. Developing a personal website now. Getting back into the groove of things. Rubiks cubes is getting slightly boring. I’m not progressing much anymore. My finger speed is limiting me :(.
Alternatively, you could also float both the texarea and the input right and give the form (or the containing element within the form, as both should be wrapped in a block element in order to validate) overflow:hidden;
Yes, if you float them both to the right, the visual order will change without altering the HTML. But it’s a little odd to have the submit button to the left. At least in ‘left-to-right’ cultures, that’s not very intuitive.
Exactly, although it will also (in the case of a blank document with only this stuff) it will cause it to be all the way over on the other side of the parent, in this case, the other side of the browser.
I got them lined up, and I put the submit button on the right. Which is what I meant, not sure why I said left in my previous posts.
Thanks guys.
I agree it’s not good UI for Western cultures. I was just trying to say it can bed done w/o messing the source order. It is , after all, more semantic for the submit button to come AFTER the textfield in the source , no matter what culture.
I also wonder if our western mindset might be at issue here. Maybe the whole thing would be fine with: form {direction:rtl;}
(also see that’s not the issue… blah)
Simplest solution EVER, as both elements are inline ( am assuming you want the submit button aligned to the top of the text area): textarea {vertical-align: top} and that’s it.
Well if the submit button is first, then that also means the tab order is screwed up. The submit button will be first in the tab order and THEN the textarea, unless of course you set hte tab index.
I don’t think our culture is to blame, unless you intend to blame the direction we read things in 
The float right solution doesn’t change the order of the HTML, just the display, so the tab order remains the same.
Oh derp, right. Brain fart.
<form action=“contact.php” method=“post”>
<input name=“text” class=“inputbox” />
<input type=“submit” value=“Submit” class=“button” name=“submit” />
</form>
Style Sheet
.inputbox
{
float:left;
width:200px;
size:20;
height:20px;
font-family:arial;
color:#333;
padding-left:10px;
}
.button
{
float:right;
background-color:red;
color:#fff;
}