Placing 'Submit' button right next to 'Form'

[Substance]

I'm trying to place my submit button to the right of my form. I've floated, I've tweaked, I've hacked, yet I cannot get this going.

The only thing that works is placing my submit button in it's own form, which makes it worthless since it has no data to submit at that point.

I would include my site files, but they're just going to return tons of php errors. Here is the code though:

HTML

<div id="useravatar">
</div>
<div id="userctrl">
<form class="login" method="post">
<span class="logtag">U/N:</span><input type="text" name="user" class="login" title="username" value="username"><br>
<span class="logtag">P/W:</span><input type="password" name="pass" title="password" value="password" class="login">
<input name="submit" type="submit" value="Login" class="loginbtn">
</form>
<center>
<h1 class="logintext">You must <b>Login</b> or <b>Register</b> to access the UserCP.<br>Need to reset <b>Username</b> or <b>Password</b>?</h1>
</center>
</div>

CSS

#useravatar {
	width: 94px;
	height: 94px;
	background: url('images/av_back.gif') no-repeat;
	float: left;
	margin: 9px 0px 0px 9px;
	padding: 2px 0px 0px 2px;
}

#userctrl {
	float: right;
	margin: 0px;
	padding: 0px 5px 0px 0px;
}

a.welcome {
	color: #fff;
}

a.userbutton {
	text-align: center;
	text-decoration: none;
	color: #fff;
	background-color: #757575;
	border-radius: 5px;
	-moz-border-radius: 5px;
	border: 2px solid #575757;
	float: right;
	padding: 3px 7px 3px 7px;
	margin: 0px 5px 0px 0px;
}

a.userbutton:hover {
	background-color: #575757;
	color: #d9aa7c;
}

h1.pminfo, a.pminfo {
	text-align: right;
	font-size: 11px;
	font-weight: normal;
	color: #282421;
	margin: 7px 5px 15px 0px;
}

form.usertools {
	margin: 0px 5px 5px 0px;
}

form.login {
	margin: 13px 0 0 0;
}	

input.login {
	width: 160px;
	margin: 5px 0 0 0;
	padding: 0 5px 0 5px;
	font-family: Arial, Verdana, Tahoma, sans-serif;
	font-size: 12px;
}

input.login:hover {
	background-color: #f6f1ed;
	border: 1px solid #abadb3;
	padding: 1px 6px 1px 6px;
}

input.loginbtn {
	height: 45px;
	margin: 0px 10px 0 15px;
}

span.logtag {
	margin: 7px 15px 0 0;
	display: block;
	width: 15px;
	color: #66625f;
	float: left;
}

h1.logintext {
	font-size: 10px;
	font-weight: normal;
	color: #66625f;
	margin: 10px 0 0 0;
}

The following code produces this:



As you can see, it looks like the submit button just gets forced down by the text area. I don't know how to work around this.

[C. Ankerstjerne]

I took the liberty of improving your code in terms of syntax and accessibility:

• Your form was lacking the fieldset tag for the form fields, which is mandatory.
• Your form fields were lacking the label tags, which, while not mandatory, is highly recommended, and improves accessibility.
• Using U/N and P/W may not be obvious to screen reader users, who will hear it as u forward-slash n and p forward-slash w.
• Adding a title attribute to your input fields in superflous at best (as the label is already there), and poor accessibility at worst, as the tooltip might obscure the input field.
• When you use Javascript to remove the text in an input field, you must always also add it using Javascript. Otherwise, if a user has Javascript disabled, and the user does not see this, the input will be incorrect. This can especially be frustrating to users with screen readers and users whose passwords are longer than the input field.
• Don't use headers for regular text - it's reserved for headers, and headers only.
• Don't use center. Period.
• To emphasize text, use em or strong, not b.

<div id="userctrl">
 <form method="post">
  <fieldset>
   <label>
    <abbr title="Username">U/N</abbr>
    <input type="text" name="username">
   </label>
   <label>
    <abbr title="Password">P/W</abbr>
    <input type="password" name="password">
   </label>
  </fieldset>
  <div class="submit">
   <input type="submit" value="submit">
  </div>
 </form>
 <div class="formtext">
  <p>You must <em>Login</em> or <em>Register</em> to access the <abbr title="user control panel">UserCP</abbr>.</p>
  <p>Need to reset <em>Username</em> or <em>Password</em>?</p>
 </div>
</div>

#userctrl {
 background: url('avatar.gif') no-repeat;
 min-height: 94px;
 padding: 0 0 0 94px;
 width: 400px;
}
 
form {
 width: 400px;
}
 
fieldset {
 border: 0;
 float: left;
 width: 60%;
}
 
label {
 display: block;
}
 
.submit {
 float: right;
 text-align: center;
 width: 30%;
}
 
.formtext {
 clear: both;
 text-align: center;
}

[Substance]

While I appreciate your work, it caused way more problems than it fixed. Since this is a only a module of a much larger website.

Thank you for your tips, I'll try to keep them in mind, however, I'm not going to stop running jQuery for the 1% that doesn't have Jscript enabled, and I'm certainly not going to modify my site to accommodate people who don't understand what a login box is. I'd much rather them stop wasting my server resources.

Edit: I've uploaded my working directory code, in case you want to get a better idea of what I'm going for, but It's running a forum hook, so there will be php errors galore if you try to open it.

[C. Ankerstjerne]

If you can't do an onload form field value change using JQuery, then JQuery is a pretty lousy Javascript framework.

Also, you are not just preventing people without Javascript. You are preventing screen reader users from properly using your website. That is currently five percent of all web users and rising, on top of the two percent who can't use Javascript. If seven percent of your potential users isn't enough to make your site accessible, then the fact that it's possibly illegal not to should.

Also, try reading my code. Even if you don't implement my HTML changes, you will still find the solution to your problem in it.

[Substance]

then the fact that it's possibly illegal not to should.

This is blatantly false information, I can assure everyone that this is without a doubt a complete lie. This only applies to government funded systems which must be accessible to all. If this was applicable outside of government funded websites, SitePoint.com would be shut down, due to people with severe learning disabilities not having the ability to process large amounts of information.

[Mittineague]

You forget that the SitePoint forums are not US only.

In some countries it is illegal.

[Substance]

You forget that the SitePoint forums are not US only.

In some countries it is illegal.

Thank you for reinforcing my original point. I've modified your quote to emphasize the important part.

Also, according to Australian Law, the DDA requires that any website developed or hosted in Australia to be accessible to all people regardless of disability. Isn't this website hosted / maintained in Australia?

[Mittineague]

AFAIK SitePoint Pty Ltd. offices are located in Melbourne, Australia but the site's servers are in the United States.

I agree the current forum has issues, hopefully the coming vBulletin upgrade will improve things.

But we digress, those topics better belong in Accessibility and Usability or Business and Legal Issues

[xhtmlcoder]

I know what a form is, and I know what form controls are and what form labels are designed for. Also strangely enough what form control values the INPUT elements may contain and what the grouping of thematically related controls involves. I can see evidence of them in #2 quite clearly and that is a good basic example of how to create a form.

Assuming we are referring to some FORM allowing the acceptance credentials via user INPUT then obviously the original example is lacking in the good practice of form structure. Within #2 I saw what looked similar the answer to the question - in absence of the contextual attachment, i.e. #3.