Solved

CSS Form layout - problem with checkboxes

Posted on 2004-08-31
3
680 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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Max-width on individual images in grid 4 55
Angular JS Route 3 69
Change CSS to show Notification Bar 9 28
two div layout one vertical other horizontal. 5 24
Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

776 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