Member Avatar for pbrookee

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>

  • 6 Contributors
  • 8 Replies
  • 136 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by cereal
Member Avatar for pbrookee

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

Member Avatar for MidiMagic

You can apply CSS styles to it too.

Member Avatar for 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

Member Avatar for brotherZ

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????

Member Avatar for MidiMagic

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

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

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.

<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.

Member Avatar for ¤| battousai |¤

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

<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>
Member Avatar for MidiMagic

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.

Member Avatar for cereal

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:

<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:

* { 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;
 }

This way if css fails or is disabled, the form will still mantain a good appearance and usability.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.