Ad:

HTML and CSS Discussion Thread
Unsolved
Views: 2075

Jun 6th, 2007

Web Form

Expand Post »

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>

Similar Threads

Web form that places input into document in ASP.NET
Web Form Submission difficulties in HTML and CSS
vb to web form in Visual Basic 4 / 5 / 6
How to code "tab control' in the web form in ASP.NET / VB.NET ? in ASP.NET
Can Visio files be converted into web-form for visual studio ? in VB.NET

pbrookee

Reputation Points: 10

Solved Threads: 0

Light Poster

Offline

34 posts
since Apr 2007

Permalink

Jun 6th, 2007

Re: Web Form

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

pbrookee

Reputation Points: 10

Solved Threads: 0

Light Poster

Offline

34 posts
since Apr 2007

Permalink

Jun 8th, 2007

Re: Web Form

You can apply CSS styles to it too.

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

Permalink

Jul 11th, 2007

Re: Web Form

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

Mrtony

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

5 posts
since Jun 2006

Permalink

Jul 12th, 2007

Re: Web Form

Click to Expand / Collapse Quote 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????

brotherZ

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

8 posts
since Jul 2007

Permalink

Jul 13th, 2007

Re: Web Form

Quote ...

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.

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.

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

Permalink

Jul 13th, 2007

Re: Web Form

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

¤| battousai |¤

Reputation Points: 17

Solved Threads: 1

Light Poster

Offline

37 posts
since Sep 2006

Permalink

Jul 17th, 2007

Re: Web Form

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.

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

Permalink

Aug 3rd, 2007

Re: Web Form

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:

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:

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

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

cereal

Reputation Points: 201

Solved Threads: 85

Posting Pro

Offline

524 posts
since Aug 2007

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: ntergrating audio to a site?

Next Thread in HTML and CSS Forum Timeline: The div method for columns doesn't always work

DaniWeb Message

Cancel Changes

User Name
Password