SitePoint Sponsor |
|
User Tag List
Results 1 to 19 of 19
Thread: Form Validation ???
-
Dec 23, 2003, 13:07 #1
- Join Date
- Dec 2003
- Location
- Dundee, Scotland.
- Posts
- 37
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Form Validation ???
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>
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>
Stewarty-boy.
-
Dec 23, 2003, 13:29 #2
- Join Date
- Aug 2003
- Location
- University of Central England, U.K.
- Posts
- 487
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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>
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?John
No electrons were harmed during the creation, transmission
or reading of this posting. However, many were excited and
some may have enjoyed the experience.
-
Dec 23, 2003, 16:03 #3
- Join Date
- Dec 2003
- Location
- Dundee, Scotland.
- Posts
- 37
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
However...
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.
-
Dec 23, 2003, 16:16 #4
- Join Date
- Jul 2002
- Location
- Toronto, Canada
- Posts
- 39,347
- Mentioned
- 63 Post(s)
- Tagged
- 3 Thread(s)
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
-
Dec 23, 2003, 16:26 #5
- Join Date
- Aug 2003
- Location
- University of Central England, U.K.
- Posts
- 487
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by r937
Tables are designed for ease of viewing and presenting data - and this is one of those instances.John
No electrons were harmed during the creation, transmission
or reading of this posting. However, many were excited and
some may have enjoyed the experience.
-
Dec 23, 2003, 16:26 #6
- Join Date
- Jul 2002
- Location
- Toronto, Canada
- Posts
- 39,347
- Mentioned
- 63 Post(s)
- Tagged
- 3 Thread(s)
forgot one: a DL
see http://www.clagnut.com/blog/241/
-
Dec 23, 2003, 16:31 #7
- Join Date
- Jul 2002
- Location
- Toronto, Canada
- Posts
- 39,347
- Mentioned
- 63 Post(s)
- Tagged
- 3 Thread(s)
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
-
Dec 23, 2003, 16:35 #8
- Join Date
- Aug 2003
- Location
- University of Central England, U.K.
- Posts
- 487
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by r937
Originally Posted by r937
John
No electrons were harmed during the creation, transmission
or reading of this posting. However, many were excited and
some may have enjoyed the experience.
-
Dec 23, 2003, 16:47 #9
- Join Date
- Jul 2002
- Location
- Toronto, Canada
- Posts
- 39,347
- Mentioned
- 63 Post(s)
- Tagged
- 3 Thread(s)
imbibation !!
-
Dec 23, 2003, 18:06 #10
- Join Date
- Dec 2003
- Location
- Dundee, Scotland.
- Posts
- 37
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Got there in the End...
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.
-
Dec 23, 2003, 19:12 #11
- Join Date
- Dec 2003
- Location
- Dundee, Scotland.
- Posts
- 37
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
One last thing.
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><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;
}
Stewarty-boy.
-
Dec 23, 2003, 19:49 #12
- Join Date
- Jul 2002
- Location
- Toronto, Canada
- Posts
- 39,347
- Mentioned
- 63 Post(s)
- Tagged
- 3 Thread(s)
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
-
Dec 23, 2003, 20:35 #13
- Join Date
- Dec 2003
- Location
- Dundee, Scotland.
- Posts
- 37
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Mmmmmmm
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">#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>
Incidentally. Referring back to your last post. How could I get round not using <br /> tags?
Stewarty-boy.
-
Dec 23, 2003, 20:36 #14
Originally Posted by r937
-
Dec 23, 2003, 20:58 #15
- Join Date
- Jul 2002
- Location
- Toronto, Canada
- Posts
- 39,347
- Mentioned
- 63 Post(s)
- Tagged
- 3 Thread(s)
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?
-
Dec 23, 2003, 21:25 #16
- Join Date
- Dec 2003
- Location
- Dundee, Scotland.
- Posts
- 37
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Url
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.
-
Dec 23, 2003, 21:30 #17
- Join Date
- Jul 2002
- Location
- Toronto, Canada
- Posts
- 39,347
- Mentioned
- 63 Post(s)
- Tagged
- 3 Thread(s)
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?
-
Dec 23, 2003, 21:37 #18
- Join Date
- Jul 2002
- Location
- Toronto, Canada
- Posts
- 39,347
- Mentioned
- 63 Post(s)
- Tagged
- 3 Thread(s)
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 ...
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
-
Dec 23, 2003, 21:51 #19
- Join Date
- Dec 2003
- Location
- Dundee, Scotland.
- Posts
- 37
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
It works...It works... It works...
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.
Bookmarks