Solved

CSS Form layout - problem with checkboxes

Posted on 2004-08-31
3
674 Views
Last Modified: 2008-02-01
I am trying to layout a simple form without using tables.  I am trying to replicate a two column layout using code based on http://www.themaninblue.com/experiment/InForm/margin_hack.htm.  The main labels and text fields seem to work fine, but I am having problems with the checkbox at the bottom.  I would like this all on one row, checkbox first and then the label.

HTML

            <form>      
            <fieldset>
                        <legend>
                              Contact form</legend>
            <label for="enquiryname" class="first">Name: <strong class="text_red">*</strong>
        <input type="text" name="enquiryname" id="enquiryname" value="" size="32" /></label>
        <label for="enquiryemail">Email Address: <span class="text_red">*</span>
          <input type="text" name="enquiryemail" id="enquiryemail" value="" size="32" /></label>
          <label for="enquirytelephone">Telephone:
          <input type="text" name="enquirytelephone" id="enquirytelephone" value="" size="32" /></label>
          <label for="enquiryaddress1"><strong>Address Line 1:</strong><strong class="text_red"> *</strong>
          <input type="text" name="enquiryaddress1" id="enquiryaddress1" size="32" value="" /></label>
          <label for="enquiryaddress2">Address Line 2:
          <input type="text" name="enquiryaddress2" id="enquiryaddress2" size="32" /></label>
          <label for="enquirytown">Town: <strong class="text_red">*</strong>
          <input type="text" name="enquirytown" id="enquirytown" size="32" /></label>
          <label for="enquirypostcode">Postcode: <span class="text_red">*</span>
          <input type="text" name="enquirypostcode" id="enquirypostcode" value="" size="8" /></label>
          <label for="enquirycomments" class="textarea">Comments or questions <span class="text_red">*</span>
        <textarea name="enquirycomments" id="enquirycomments" cols="50" rows="10"></textarea></label>
          <label for="enquirynewsletter"><input type="checkbox" name="enquirynewsletter" id="enquirynewsletter" value="checkbox" />Tick if you wish to receive David Mundell's email newsletters</label>
          <input type="submit" value="Send" name="submit" class="submit" />
        </fieldset>
</form>


CSS

fieldset
{
      display: block;
      margin: 0 0 1em 0;
      border: 1px solid #D9954C;
      padding: 0 1em 1em 1em;
}

legend
{
      font-size: 110%;
      font-weight: bold;
      color: #D9954C;
}

input
{
      position: relative;
      top: -1.4em;
      left: 10em;
      display: block;
}

input.submit
{
      clear: both;
      top: 0;
}

label
{
      clear: both;
      float: left;
      display: block;
      width: 10em;
      margin-top: -1em;
      font-weight: bold;
}

label.first
{
      margin-top: 1em;
}

label.textarea {
      clear: both;
      top: 0;
      width: 100%;
}
0
Comment
Question by:Orroland
  • 2
3 Comments
 
LVL 31

Accepted Solution

by:
seanpowell earned 500 total points
ID: 11943454
Hi :-)

To be honest, I handle this a little differently. Have a look through the code below, as well as the red asterisks and using the margin on the legend instead of the first 2 items...



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>

<style type="text/css">

body
{
      font: 13px verdana, sans-serif;
}

#myform
{
      margin:0;
      padding:0;
      display:inline;
}

#myform span
{
      color:red;
      font-weight: bold;
}

fieldset
{
      display: block;
      margin: 0 0 1em 0;
      border: 1px solid #D9954C;
      padding: 0 1em 1em 1em;
}

legend
{
      font-size: 110%;
      font-weight: bold;
      color: #D9954C;
      margin-bottom:1em;
}

label
{
      clear: left;
      float: left;
      width: 10em;
      padding: 0px 4px;
      margin:4px 0px 0px 2px;
      font-weight: bold;
}

label.right
{
      text-align:right;
}

input
{
      margin:4px 0px;
}

.comment
{
      margin:10px 0px;
}

.button
{
      width:80px;
      background-color:#CCC;
      border:1px solid #FC9;
}
         
</style>
</head>

<body>
<form id="myform">

      <fieldset>
      <legend>Contact form</legend>

      <label for="enquiryname">Name: <span>*</span></label>
      <input type="text" name="enquiryname" id="enquiryname" value="" size="32" /><br />

      <label for="enquiryemail">Email Address: <span>*</span></label>
      <input type="text" name="enquiryemail" id="enquiryemail" value="" size="32" /><br />

      <label for="enquirytelephone">Telephone:</label>
      <input type="text" name="enquirytelephone" id="enquirytelephone" value="" size="32" /><br />

      <label for="enquiryaddress1"><strong>Address Line 1:</strong> <span>*</span></label>
      <input type="text" name="enquiryaddress1" id="enquiryaddress1" size="32" value="" /><br />

      <label for="enquiryaddress2">Address Line 2:</label>
      <input type="text" name="enquiryaddress2" id="enquiryaddress2" size="32" /><br />

      <label for="enquirytown">Town: <span>*</span></label>
      <input type="text" name="enquirytown" id="enquirytown" size="32" /><br />

      <label for="enquirypostcode">Postcode: <span>*</span></label>
      <input type="text" name="enquirypostcode" id="enquirypostcode" value="" size="8" /><br />

      <label for="enquirycomments" class="textarea">Comments or questions <span>*</span></label>
      <textarea name="enquirycomments" id="enquirycomments" cols="50" rows="10"></textarea><br />

      <label for="enquirynewsletter" class="right"><input type="checkbox" name="enquirynewsletter" id="enquirynewsletter" value="checkbox" /></label>
      <div class="comment">Tick if you wish to receive David Mundell's email newsletters</div>

      <label style="border:none;"></label>
      <input class="button" type="submit" value="Send" name="submit" class="submit" />

      </fieldset>

</form>
</body>
</html>

Thanks,
Sean
0
 

Author Comment

by:Orroland
ID: 11943493
Sean

I realise that nothing is ever perfect, but your code breaks in NN6.

Any other thoughts?
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11943786
Yes, N6 has a bad bug with labels. I didn't include it as I usually don't try and support that browser - there don;t seem to be many people left using it.
You'll need to add some extra semantic markup to get over that problem:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>

<style type="text/css">

body
{
      font: 13px verdana, sans-serif;
}

#myform
{
      margin:0;
      padding:0;
      display:inline;
}

fieldset
{
      display: block;
      margin: 0 0 1em 0;
      border: 1px solid #D9954C;
      padding: 0 1em 1em 1em;
}

legend
{
      font-size: 110%;
      font-weight: bold;
      color: #D9954C;
      margin-bottom:1em;
}

label span
{
      display:block;
      clear: left;
      float: left;
      width: 10em;
      padding: 0px 4px;
      margin:4px 0px 0px 2px;
      font-weight: bold;
}

.red_text
{
      color:red;
      font-weight: bold;
}

label.right
{
      text-align:right;
}

input
{
      margin:4px 0px;
}

.comment
{
      margin:10px 0px;
}

.button
{
      width:80px;
      background-color:#CCC;
      border:1px solid #FC9;
}
         
</style>
</head>

<body>
<form id="myform">

      <fieldset>
      <legend>Contact form</legend>

      <label for="enquiryname"><span>Name: <strong class="red_text">*</strong></span></label>
        <input type="text" name="enquiryname" id="enquiryname" value="" size="32" /><br />

        <label for="enquiryemail"><span>Email Address: <strong class="red_text">*</strong></span></label>
      <input type="text" name="enquiryemail" id="enquiryemail" value="" size="32" /><br />

      <label for="enquirytelephone"><span>Telephone:</span></label>
      <input type="text" name="enquirytelephone" id="enquirytelephone" value="" size="32" /><br />

      <label for="enquiryaddress1"><span><strong>Address Line 1:</strong> <strong class="red_text">*</strong></span></label>
      <input type="text" name="enquiryaddress1" id="enquiryaddress1" size="32" value="" /><br />

      <label for="enquiryaddress2"><span>Address Line 2:</span></label>
      <input type="text" name="enquiryaddress2" id="enquiryaddress2" size="32" /><br />

      <label for="enquirytown"><span>Town: <strong class="red_text">*</strong></span></label>
      <input type="text" name="enquirytown" id="enquirytown" size="32" /><br />

      <label for="enquirypostcode"><span>Postcode: <strong class="red_text">*</strong></span></label>
      <input type="text" name="enquirypostcode" id="enquirypostcode" value="" size="8" /><br />

      <label for="enquirycomments" class="textarea"><span>Comments or questions <strong class="red_text">*</strong></span></label>
        <textarea name="enquirycomments" id="enquirycomments" cols="50" rows="10"></textarea><br />

      <label for="enquirynewsletter" class="right"><span><input type="checkbox" name="enquirynewsletter" id="enquirynewsletter" value="checkbox" /></span></label>
      <div class="comment">Tick if you wish to receive David Mundell's email newsletters</div></p>

      <label style="border:none;"><span></span></label>
      <input class="button" type="submit" value="Send" name="submit" class="submit" />

        </fieldset>

</form>
</body>
</html>
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now