Form Validation ???

**Stewarty-Boy** · Dec 23, 2003, 13:07

Hi Folks.

I was wondering if anyone could help me? I'm trying to get my pages validated to XHTML 1.1 and can't get an email form validated. This is what I get.

Line 204, column 57: document type does not allow element "input" here; missing one of "a", "span", "em", "strong", "dfn", "code", "samp", "kbd", "var", "cite", "abbr", "acronym", "q", "tt", "i", "b", "bdo" start-tag

<pre> Name: <input type="text" name="name" size="30" /></pre>

I also get this element problem with the "textarea" element too.

My Code is:

<div id="middlecolumn">

<br /> <br />

<h3> Please fill in your details below and we will reply to you as soon as possible! </h3>
<br />
<form method="post" action="mailer">
<pre> Name: <input type="text" name="name" size="30" /></pre>
<pre> Email: <input type="text" name="email" size="30" /></pre>
<pre> Subject: <input type="text" name="subject" size="30" /></pre>
<pre> Message: <textarea name="Message" rows="8" cols="50" /></textarea></pre>

<pre> <input type="submit" value="Send Email" /> </pre>

</form>

<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />

<br />
</div>

What am I doing wrong here. Can anyone offer advice please?

Stewarty-boy.

**John Colby** · Dec 23, 2003, 13:29

This validates:

Code:

<div id="middlecolumn">

<br /> <br />

<h3> Please fill in your details below and we will reply to you as soon as possible! </h3>
<br />
<form method="post" action="mailer">
<p>Name: <input type="text" name="name" size="30" /></p>
<p>Email: <input type="text" name="email" size="30" /></p>
<p>Subject: <input type="text" name="subject" size="30" /></p>
<p>Message: <textarea name="Message" rows="8" cols="50"></textarea></p>

<p> <input type="submit" value="Send Email" /> </p>

</form>

<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />

<br />
</div>

Some questions:

Why are you using <pre> - strange usage? I've replaced <pre> with <p> and taken out the false ending on <textarea>

Why are you using so many <br /> tags at the bottom?

**Stewarty-Boy** · Dec 23, 2003, 16:03

Hi John Colby.

Thanks for that. It does validate. However, My text boxes are out of line with each other. Is there anyway I could fix this. For example adding spaces within a line without the <pre> element as XHTML 1.1 doesn't like this.

Thanks in Advance.

Stewarty-boy.

**r937** · Dec 23, 2003, 16:16

your text boxes are out of line because your P font is proportional

now it makes sense why you were using PRE

you could try assigning a monospace font to the P's within the form, but then you'd have to add   spaces, and it could get messy

you could try the ALA method (see http://www.alistapart.com/articles/practicalcss/ part way down the page) but if you ask me, it's clunky and the code is ugly

or you could try (shock! horror!) a table

**John Colby** · Dec 23, 2003, 16:26

Originally Posted by r937

or you could try (shock! horror!) a table

What's wrong with a table for tabular data - a form arranges question and response in order - and a table is IMHO the correct way of presenting them.

Tables are designed for ease of viewing and presenting data - and this is one of those instances.

**r937** · Dec 23, 2003, 16:26

forgot one: a DL

see http://www.clagnut.com/blog/241/

**r937** · Dec 23, 2003, 16:31

nothing's wrong with a table in this instance

it's what i use myself

the "shock! horror!" was aimed at css purists

your last comment "Tables are designed for ease of viewing and presenting data" is a bit too general, though, because it could be used to rationalize/justify presenting the typical web site 2- or 3-column layout in a table, and clearly, that's not tabular data, even though it's data, and even though the web d3zign3rs might claim that a 2- or 3-column layout enhances "ease of viewing" (which in my mind it clearly does not)

rudy

**John Colby** · Dec 23, 2003, 16:35

Originally Posted by r937

the "shock! horror!" was aimed at css purists

I will not use tables only for layout - therefore a bit of a CSS purist.

Originally Posted by r937

your last comment "Tables are designed for ease of viewing and presenting data" is a bit too general, though, because it could be used to rationalize/justify presenting the typical web site 2- or 3-column layout in a table, and clearly, that's not tabular data, even though it's data, and even though the web d3zign3rs might claim that a 2- or 3-column layout enhances "ease of viewing" (which in my mind it clearly does not)

rudy

Yes agree with your qualifcations - phraseology at this time of night after imbibation of festive spirit is not too exact

**r937** · Dec 23, 2003, 16:47

imbibation !!

**Stewarty-Boy** · Dec 23, 2003, 18:06

Hi there John Colby & r937.

Thanks for your help. I had a look at the links you both posted. I decided to place the title of each text field above their respective text boxes as opposed to the left of them. I then put each title and textbox into a seperate <p class="#"> and give it a margin-left of 70px. I then simply used a <br /> to have a title and textbox on seperate lines. Phew...it validates nicely.

Thanks for your help. I managed to avoid using tab... ta.. t.. I can't bring myself to say the word. That tabular data thingy. You know the one I mean.

Thank you and have a Very Merry Christmas Y'all.

Stewarty-boy.

**Stewarty-Boy** · Dec 23, 2003, 19:12

Sorry Folks.

One last thing. How do you get images to align to the center when inside a div which has its text-align: left; ...and get it validated?

I tried using <h3> <img...> </h3> . It worked but didn't validate. I also tried a <p class="#"> and a <span class="#">. None of these validated to XHTML 1.1 either. What am I doing wrong here? I just don't understand it. Here's what I get:

Line 224, column 5: document type does not allow element "h3" here; missing one of "button", "map", "object", "ins", "del", "noscript" start-tag

<h3> <img src="/images/jute-city/tutorial-screenshots/mta-client-v03b.jpg" alt...</h3>

Here's some of my code:

<br /><br />
<h3> <img src="/images/jute-city/tutorial-screenshots/mta-client-v03b.jpg" alt="MTA Client-v0.3b" /> </h3>
<br /><br />

h3 {
color: #8E0090;
font-weight: normal;
font-size: 13px;
text-align: center;
font-family: tahoma, verdana, sans-serif;
margin-top: 0px; margin-bottom: 3px;
}

I do hope someone knows where I'm going wrong here or it's Christmas in the funny farm with a cork on the fork.

Stewarty-boy.

**r937** · Dec 23, 2003, 19:49

tsk tsk, please ditch <br /> tags used for spacing purposes

and please don't even think of using an H3 merely to achieve something so unsemantic (if that's a word) as centering

if the div you want to place your images into has text-align:left, may i ask why you couldn't just change that?

and if for some reason you cannot, then just nest another div with width:100% and text-align:center

i am a firm opponent of divitis but sometimes you just gotta, you know?

rudy

**Stewarty-Boy** · Dec 23, 2003, 20:35

Hi Rudy.

The validator doesn't allow the div element here either:

Line 224, column 17: document type does not allow element "div" here; missing one of "button", "map", "object", "ins", "del", "noscript" start-tag

<div id="image">

I'm gonna have a few pages with a few centred images on them so I was initially compelled to use a div class. That didn't validate. I then attempted an div id. The 2 methods centred the image okay but didn't validate. Here's the deal:

#image {
width: 580px;
padding: 0;
text-align: center;
background-color: #FFFFFF;
}

<div id="image">
<img src="/images/jute-city/tutorial-screenshots/mta-client-v03b.jpg" alt="MTA Client-v0.3b" />
</div>

How could this be???

Incidentally. Referring back to your last post. How could I get round not using <br /> tags?

Stewarty-boy.

**vgarcia** · Dec 23, 2003, 20:36

Originally Posted by r937

forgot one: a DL

see http://www.clagnut.com/blog/241/

That's not a bad way to lay forms out, and it actually comes out cleaner than the ALA form example.

**r937** · Dec 23, 2003, 20:58

when the validator says a div is not allowed somewhere, i would have to see the context to interpret it for you

got url?

how to get around not coding <br /> tags? easy, just apply margin and/or padding in your style sheet to whatever comes before and/or after wherever the <br /> tags used to be

again, can't tell you much more without context

got url?

**Stewarty-Boy** · Dec 23, 2003, 21:25

Hi again Rudy.

Here's the URL to one of the pages I used the div on: http://www.gta-jutecity.pwp.blueyond...gta-3-03b.html
You'll find the offending <div id="image"> about 2 thirds of the way down at about line 224. Thanks a lot I really appreciate this.

Hello also Vgarcia.

I decided to go with the form layout on the link Rudy recommended. However, I don't think I used the same code. I feel a touch of <br itis /> coming on. Getting rid of <br/> tags will be a Sunday job over the holiday sometime. I'll cross that <bridge /> when I come to it. No more jokes. Honest!!!

Stewarty-boy.

**r937** · Dec 23, 2003, 21:30

piece of cake when you see the context

you cannot nest a DIV inside a P

you'll have to use SPAN instead, or else -- and this is my recommendation -- don't bother centering the image at all!! i mean, what's a few pixels this way or that way?

**r937** · Dec 23, 2003, 21:37

as for your <br /> tags, let's take this snippet of code for instance:

HTML Code:

 266: 	<p class="normal">
 267: 		<span class="underbold"> Note:</span> Pressing <b>Alt</b>+<b>Tab</b> on your key board ...
 268: 	</p>
 269: 
 270: 		<br />
 271: 
 272: 		<hr class="bigthin" />
 273: 
 274: 		<br />
 275: 
 276: 		<span class="underbold">For Your Information:</span>
 277: 
 278: 		<br />
 279: 		<br />
 280: 
 281: 	<p class="normal">
 282: 		When you press escape during ...

first of all, if you find yourself coding class="normal" on most P tags, then you are not taking best advantage of css

but let's say for the sake of argument that you actually need to define your Ps with the "normal" class

just add margin-top: 2em; to the style definition, and you can remove all those <br /> tags

tip: use a text editor with search/replace

as for <span class="underbold"> that is an abomination and should be recoded as H4 or something

rudy

**Stewarty-Boy** · Dec 23, 2003, 21:51

Hey Rudy.

Pure genuis. It works. It validates. Hell it even made me smile too.

However, I think you're absolutely correct about thoses pesky <br /> tags being kept to a minimum. As you'll be aware from looking at my code, that page was absolutely riddled with them. You learn something new every day I guess.

<edit> just noticed your last post. I now intend spending a day next week implementing your margin suggestion. Cheers. </edit>

Thank you ever so much. I really appreciate your help with what I can only say was the final showdown in terms of me getting my site finished. It only leaves me now to wish you a Wonderful Merry Christmas and a Happy New Year and to also extend my Best Wishes to anyone reading this.

Thanks Again.

Stewarty-boy.