...

View Full Version : Help with a form design



stfc_boy
11-21-2008, 11:38 AM
Hi,

I'm completely stuck on a form design. I'd like it to look like the following:

http://www.inspireaway.co.uk/like.jpg

However, I can't seem to get it right and it's doing my head in, can anyone help?



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Form test</title>
<style type="text/css">
body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}

/* ----------- My Form ----------- */
.myform{
margin:0 auto;
width:400px;
padding:14px;
}

/* ----------- basic styles ----------- */
#basic{
border:solid 2px #DEDEDE;
}

#basic label{
display:inline;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}

#basic p.heading {
float:left;
font-weight:bold;
color:#cc0000;
font-size:15px;
}

#basic.radio{
/* - Radio buttons only - */
clear:left;
display:inline;
}

#basic input{
/* - All other input elements - */
clear:left;
font-weight:bold;
}

</style>
</head>

<body>
<div id="basic" class="myform">
<form id="form1" name="form1" method="post" action="">

<p class="heading">Heading One</p>
<input type="radio" name="the_answer" value="Yes" class="radio">
<label>Yes</label>
<input type="radio" name="the_answer" value="No" class="radio">
<label>No</label>

<p class="heading">Heading Two</p>
<input type="radio" name="the_answer2" value="Yes" class="radio">
<label>Yes</label>
<input type="radio" name="the_answer2" value="No" class="radio">
<label>No</label>

<p class="heading">Heading Three (textbox)</p>
<input type="text" name="textfield" />
<label>Password</label>

</form>
</div>

</body>
</html>

abduraooft
11-21-2008, 11:46 AM
See Pretty accessible forms (http://www.alistapart.com/articles/prettyaccessibleforms).

Btw, a heading should be inside any one of the tag h1-h6, to make it semantic.

Rowsdower!
11-21-2008, 03:01 PM
Not sure if anyone else is having this issue in this thread, but your linked image appears to be protected. Every time I navigate into this thread I am prompted to provide a log-in:



The server www.inspireaway.co.uk at site requires a username and password.

Warning: This server is requesting that your username and password be sent in an insecure manner (basic authentication without a secure connection).

I can't really help you without being able to see the example... :(

moss2076
11-22-2008, 01:51 PM
[QUOTE=Rowsdower!;752256]Not sure if anyone else is having this issue in this thread, but your linked image appears to be protected. Every time I navigate into this thread I am prompted to provide a log-in:



Yes I keep having the log-in appearing aswell.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum