HTML and CSS

Web Form

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Apr 2007

Posts: 34

Reputation: pbrookee is an unknown quantity at this point

Solved Threads: 0

pbrookee

Offline

Light Poster

Web Form

Jun 6th, 2007

Hello all!
I created a web form, but it isnt I guess to say attractive?
Its a form to enter some information, but the alignment is horrible lookg. Can any one help me?

Thanks!!!!!!!!!

Here is the code...

<html>
<head>
<title>Welcome</title>
</head>
<body>

<h1>??? Welcomes You!</h1>
<br>
<br>
<form action="feedback.php" method="post">
<p>Title:
<select name="title">

<option selected>" "</option>
<option>Prof</option>
<option>Mr</option>
<option>Mrs</option>
<option>Ms</option>
<option>Dr</option>
<option>Miss</option>
</select>
</p>

First Name:
<input type="text" name="FirstName"><br>
Last Name:
<input type="text" name="LastName"><br>
Address:
<input type="text" name="Address"><br>
Apt/Unit:
<input type="text" name="Apt/Unit"><br>
<br>
City:
<input type="text" name="City"><br>
State:
<input type="text" name="State"><br>
Zip:
<input type="text" name="Zip"><br>
<br>
Email:
<input type="text" name="email"><br>
<br>
Memo:
<textarea name="memo"></textarea>
<br>
<br>
<input type="submit" name="submit" value="submit">

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

•

Join Date: Apr 2007

Posts: 34

Reputation: pbrookee is an unknown quantity at this point

Solved Threads: 0

pbrookee

Offline

Light Poster

Re: Web Form

Jun 6th, 2007

I got it!
I just put it in a table format! Works beautifully!

•

Join Date: Jan 2007

Posts: 3,203

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 165

MidiMagic

Offline

Nearly a Senior Poster

Re: Web Form

Jun 8th, 2007

You can apply CSS styles to it too.

Daylight-saving time uses more gasoline

•

Join Date: Jun 2006

Posts: 5

Reputation: Mrtony is an unknown quantity at this point

Solved Threads: 0

Mrtony

Offline

Newbie Poster

Re: Web Form

Jul 11th, 2007

please before you learn bad habits, tables are for data, divs are for layout. you will benefit greatelly from using the right approach from the start. All designers and advanced developers use divs

•

Join Date: Jul 2007

Posts: 8

Reputation: brotherZ is an unknown quantity at this point

Solved Threads: 0

brotherZ

Offline

Newbie Poster

Re: Web Form

Jul 12th, 2007

•

Originally Posted by Mrtony

please before you learn bad habits, tables are for data, divs are for layout. you will benefit greatelly from using the right approach from the start. All designers and advanced developers use divs

I never knew that. So you can not use tables for layout????

Cheap Custom Web Design and Programming freelancers
Computer and Electronics Forum | Video Games Forum

•

Join Date: Jan 2007

Posts: 3,203

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 165

MidiMagic

Offline

Nearly a Senior Poster

Re: Web Form

Jul 13th, 2007

•

So you can not use tables for layout????

(You can, but the big baddies at W3C don't want you to.)

The problem is that divs don't always work exactly the way you want them to, especially when they are inside other layout tags. I gave up after SIX hours of trying to get a simple three-column set of divs
to line up correctly inside a pair of li tags. It always either dropped one div to a lower area, or took some of the text below the ending li tag and put it on the right of the three divs, or failed to display correctly on one browser while working on the others.

Here is code that fails. Somebody please tell me why. You will note that the set of divs inside the li pair fails, but the ones down below the ul pair work correctly. And IE messes it up differently than FF does. The ONLY difference between the two is that one set is inside the ul list's li pair.

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<html>
<head>
<style>
 
.x3col {float: left; margin: none; border: none; padding: none; width: 33%;}
</style>
</head>
<body>
<ul>
 <li><p>Here is the list:</p>
  <div class="x3col">
   <ol>
    <li>one</li>
    <li>two</li>
    <li>three</li>
   </ol>
  </div>
  <div class="x3col">
   <ol>
    <li>four</li>
    <li>five</li>
    <li>six</li>
    <li>seven</li>
   </ol>
  </div>
  <div class="x3col">
   <ol>
    <li>eight</li>
    <li>nine</li>
    <li>ten</li>
    <li>eleven</li>
   </ol>
  </div>
 </li>
 <li>Here's the end of the list</li>
</ul>
<p>Here is the next line</p>
<p>And down here, it works.</p>
<div class="x3col">
 <ol>
  <li>one</li>
  <li>two</li>
  <li>three</li>
 </ol>
</div>
<div class="x3col">
 <ol>
  <li>four</li>
  <li>five</li>
  <li>six</li>
  <li>seven</li>
 </ol>
</div>
<div class="x3col">
 <ol>
  <li>eight</li>
  <li>nine</li>
  <li>ten</li>
  <li>eleven</li>
 </ol>
</div>
<p>Here is the next line</p>
</body>
</html>
<html>
<head>
<style>

.x3col {float: left; margin: none; border: none; padding: none; width: 33%;}
</style>
</head>
<body>
<ul>
 <li><p>Here is the list:</p>
  <div class="x3col">
   <ol>
    <li>one</li>
    <li>two</li>
    <li>three</li>
   </ol>
  </div>
  <div class="x3col">
   <ol>
    <li>four</li>
    <li>five</li>
    <li>six</li>
    <li>seven</li>
   </ol>
  </div>
  <div class="x3col">
   <ol>
    <li>eight</li>
    <li>nine</li>
    <li>ten</li>
    <li>eleven</li>
   </ol>
  </div>
 </li>
 <li>Here's the end of the list</li>
</ul>
<p>Here is the next line</p>
<p>And down here, it works.</p>
<div class="x3col">
 <ol>
  <li>one</li>
  <li>two</li>
  <li>three</li>
 </ol>
</div>
<div class="x3col">
 <ol>
  <li>four</li>
  <li>five</li>
  <li>six</li>
  <li>seven</li>
 </ol>
</div>
<div class="x3col">
 <ol>
  <li>eight</li>
  <li>nine</li>
  <li>ten</li>
  <li>eleven</li>
 </ol>
</div>
<p>Here is the next line</p>
</body>
</html>

Until they get their ducks in a row and make it work for all browsers and when nested inside other items, I say go ahead and make tables. The parts of a form can be considered table entries anyway.

Last edited by MidiMagic; Jul 13th, 2007 at 5:56 am.

Daylight-saving time uses more gasoline

•

Join Date: Sep 2006

Posts: 37

Reputation: ¤| battousai |¤ is an unknown quantity at this point

Solved Threads: 1

¤| battousai |¤ ¤| battousai |¤ is offline

Offline

Light Poster

Re: Web Form

Jul 13th, 2007

The reason the first list gets screwed is because 'none' is not a valid property for the margin and padding attributes, use 0px or just 0 instead

My gues is that the floated divs in the unordered list cause the 'end of the list' to stick behind it, rather than drop below, so i aplied clear: left to it. Lasty i got rid of the list bullets for the unordered list.

here is the code, it works in both FF and IE

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<html>
<head>
  <style>
    .x3col {
      float: left;
      margin: 0px;
      padding: 0px;
      border: none;
      width: 33%;
    }
 
    .endline {
      clear:left;
    }
 
    ul {
      padding: 0px;
      margin: 0px;
      list-style: none;
    }
  </style>
</head>
<body>
  <ul>
    <li>
      <p>Here is the list:</p>
      <div class="x3col">
        <ol>
          <li>one</li>
          <li>two</li>
          <li>three</li>
        </ol>
      </div>
      <div class="x3col">
        <ol>
          <li>four</li>
          <li>five</li>
          <li>six</li>
          <li>seven</li>
        </ol>
      </div>
      <div class="x3col">
        <ol>
          <li>eight</li>
          <li>nine</li>
          <li>ten</li>
          <li>eleven</li>
        </ol>
      </div>
    </li>
    <li class="endline">Here's the end of the list</li>
  </ul>	
  <p>Here is the next line</p>
  <p>And down here, it works.</p>
  <div class="x3col">
    <ol>
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ol>
  </div>
  <div class="x3col">
    <ol>
      <li>four</li>
      <li>five</li>
      <li>six</li>
      <li>seven</li>
    </ol>
  </div>
  <div class="x3col">
    <ol>
      <li>eight</li>
      <li>nine</li>
      <li>ten</li>
      <li>eleven</li>
    </ol>
  </div>
  <p>Here is the next line</p>
</body>
</html>
<html>
<head>
  <style>
    .x3col {
      float: left;
      margin: 0px;
      padding: 0px;
      border: none;
      width: 33%;
    }
    
    .endline {
      clear:left;
    }
    
    ul {
      padding: 0px;
      margin: 0px;
      list-style: none;
    }
  </style>
</head>
<body>
  <ul>
    <li>
      <p>Here is the list:</p>
      <div class="x3col">
        <ol>
          <li>one</li>
          <li>two</li>
          <li>three</li>
        </ol>
      </div>
      <div class="x3col">
        <ol>
          <li>four</li>
          <li>five</li>
          <li>six</li>
          <li>seven</li>
        </ol>
      </div>
      <div class="x3col">
        <ol>
          <li>eight</li>
          <li>nine</li>
          <li>ten</li>
          <li>eleven</li>
        </ol>
      </div>
    </li>
    <li class="endline">Here's the end of the list</li>
  </ul>	
  <p>Here is the next line</p>
  <p>And down here, it works.</p>
  <div class="x3col">
    <ol>
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ol>
  </div>
  <div class="x3col">
    <ol>
      <li>four</li>
      <li>five</li>
      <li>six</li>
      <li>seven</li>
    </ol>
  </div>
  <div class="x3col">
    <ol>
      <li>eight</li>
      <li>nine</li>
      <li>ten</li>
      <li>eleven</li>
    </ol>
  </div>
  <p>Here is the next line</p>
</body>
</html>

Last edited by ¤| battousai |¤; Jul 13th, 2007 at 7:53 am.

•

Join Date: Jan 2007

Posts: 3,203

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 165

MidiMagic

Offline

Nearly a Senior Poster

Re: Web Form

Jul 17th, 2007

There are several problems with your "solution":

1. The books that I use say that "none" is always allowed as a way to remove a style.

2. Changing "none" to "0px" didn't change anything.

3. The clear style is clearly a kludge. The contents of a list element should not have the power to change the way the list itself renders.

4. The clear style fixed the FF display, but not the IE display. But we shouldn't have to do that.

5. I want the bullets in my page.

6. Doing your whole thing still doesn't fix the IE display. The third column still drops under the first.

7. Setting the margin and padding on the ul to 0px removes the bullets on both browsers, even with the list-style part removed. I want the bullets.

The problem is that the div method of making columns is not yet perfected.

Last edited by MidiMagic; Jul 17th, 2007 at 6:04 pm.

Daylight-saving time uses more gasoline

•

Join Date: Aug 2007

Posts: 42

Reputation: cereal is an unknown quantity at this point

Solved Threads: 4

cereal

Offline

Light Poster

Re: Web Form

Aug 3rd, 2007

For my forms I use definition lists (<dl>) instead of tables or divs. I put labels in <dt> and input, textarea, option and select in <dd>. And then I use stylesheets to improve it.

This way:

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<div id="form">
<form method="post" action="check.php">
<dl>
 
  <dt><label for="user">User:</label></dt>
  <dd><input name="user" type="text" class="text" /></dd>
 
  <dt><label for="pass">Pass:</label></dt>
  <dd><input name="pass" type="password" class="text" />
      <input type="submit" name="submit" value="login" class="button" /></dd>
 
</dl>
</form>
</div>
<div id="form">
<form method="post" action="check.php">
<dl>

  <dt><label for="user">User:</label></dt>
  <dd><input name="user" type="text" class="text" /></dd>

  <dt><label for="pass">Pass:</label></dt>
  <dd><input name="pass" type="password" class="text" />
      <input type="submit" name="submit" value="login" class="button" /></dd>

</dl>
</form>
</div>

The CSS part:

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

 * { margin: 0; padding: 0; }
 
 body {
  font: 12px/17px Verdana, Arial, sans-serif;
  color: #111;
  background-color: #fff;
 }
 
 #form {
  display: block;
  margin: 0px auto;
  width: 320px;
 }
 
 dl {
  width: 300px;
 }
 
 dt label {
  font-weight: bold;
  margin: 10px 0 5px;
 }
 
 input.text {
  width: 100%;
  font-size: 14px;
  color: #000;
  background: #eee;
  border: 1px dotted #666;
 }
 
 input.button {
  float: right;
  font-size: 14px;
  color: #000;
  background: #eee;
  border: 1px dotted #777;
  width: 50px;
  padding: .1em;
  margin: 15px 0 0;
 }