Here is a sample to follow in order to make any form validate under xhtml strict rules:
<form action=”some bit of code here” method=”post” >
<fieldset>
<label>Enter your email address:</label>
<input type=”text” name=”email” />
<input type=”hidden” value=”some value” name=”url”/>
<input type=”hidden” value=”some value” name=”title”/>
<input type=”submit” value=”Subscribe” /><p>Powered by <a href=”a url”>Something</a></p>
</fieldset>
</form>
The key: put the fieldset tag around ALL the input statements.
Web Development Tutorials to Increase Your Skills
Seeking to improve your HTML and CSS skils? The resources below can help you become a better web developer and designer and help you make your website superior to your competitors:
- Learn CSS3: In CSS3 First Look, staff author James Williamson provides an in-depth introduction to the newest CSS standard, detailing its modular format, history, and current level of browser support, while also demonstrating its capabilities and applications. The course includes tutorials on using new selectors, modifying typography and color, working with the box model, and understanding media queries.
- XHTML and HTML Essential Training: Bill Weinman helps designers and coders understand XHTML and HTML. In the process, Bill covers document structure, block and inline-level tags, floating images, controlling white space, phrase and font markup, and tables and frames. He even provides a good introduction to CSS. Bill offers step-by-step guidance for building a complete working web site
- Learn HTML5: Author James Williamson introduces the newest HTML specification, providing a high-level overview of HTML5 in its current state, how it differs from HTML 4, the current level of support in various browsers and mobile devices, and how the specification might evolve in the future.
- The Complete Web Designer: Ten modules/courses compiled to teach you everything you need to know to become a commercial web designer. Hands-on practical training that simplifies and targets the key techniques needed to build modern web sites. Training from experienced web designers who KNOW what is required in the real world of web design
- The Complete Web Developer: With so many languages and technologies out there, it is really hard for someone to know what to study and in what order - especially if you want to be able to make a living at it! Course focuses on using PHP and MySQL. The Complete Programmer package is designed to guide you along to the way, step-by-step, towards becoming a professional web programmer.
About the Author
Paul Flyer loves to research the web and find resources and tools for building, maintaining and promoting websites. Based in Saint Louis, MO, he works in management and spends his free time sharpening his web development and copy writing skills. Feel free to contact Paul with any questions, comments or ideas. He is also available to help you with your own website.
Grab Web Tools Content!
Cool Resources
your solution works for me to valid hidden input types, but a rounded rectangle appears around the form. do i need to add something to make this border invisible?
Darren,
Very good question.
In you CSS file put the following:
fieldset {
border: 0;
}
This will remove the border around any fieldset tags in your code. Fieldset automatically creates a border around the objects it encloses. To learn more about fieldset check out this page.
As someone who’s done development for more than 13 yrs in all different languages, I have to say that’s the dumbest aspect of the new standards I’ve heard yet. Let’s just throw in another useless tag that does nothing for markup but defaults to something no one wants so everyone has to add in 3 lines of extra css…. wow. well thanks for straightening it out for me as the idea of input not validating inside form was almost as irritating to me as the solution.
that little css hack is invalid:
Value Error : border only 0 can be a length. You must put a unit after your number : 1
Great this has helped me!
and the css does validate.
That last comment isn’t very clear, but if you’re using “border:0;” you’re setting the border off, which doesn’t require a unit of measurement. If you’re trying to set the border to “border:1;” then you have to include a unit as in “border:1px;”
[...] 31.05.2009 | 22:13 | #3 http://www.recommendedwebtools.com/i…-xhtml-strict/ [...]
Thank you, thank you, thank you. You’re solution to add around the form elements worked like charm.
Thank you! I was looking for it …
Thanks a million !! I had a really complicated form with with drop-downs & calls to MySQL dbase – all works fine. Put 2 simple “Click to turn off / on” buttons in a seperate page and all hell broke loose – Yikes !!! I had to set the padding to zero, as well as border – just in case someone is still having problems.
Phill.
Thans a million! My forms kept messing up my validation until I put the fieldset tags in (which I didn’t know even existed until your post)
Chase,
You’re most welcome!
Thanks for leaving a comment.
Paul
I have finally succeeded in validating the search form fields on my website. After including the fieldset tag around all input elements. There was 1 error after though:
reference to non-existent ID “query”
fieldset>Search
Don’t need an id name for label? I took it off like in your example, and it validates now.
Search
Thanks a lot. Steven
Steve,
Glad to be of help!
Paul