SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Validating to XHTML Strict 1.0 - Form problems

    Hi there,

    I would really appreciate some help in making one of my pages on my website validate to xhtml strict 1.0 - the page in question can be seen at http://www.evolvewebsitedesign.com/p.../contactus.asp

    I copied the form elements over from an old website and now cannot get the switch correct - I think I have around 15-20 form errors, and some I have managed to be able to get corrected myself, but now I'm not sure with what i need to do to get it validated.

    Any help and suggestions on how to fix the errors would be much appreciated as always

    Kind Regards

    James

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The validator tells you what you need to do to fix those errors.

    Close your tags for XHTML: <input />

    Form elements such as input have to be enclosed with a block-level element inside forms; use a FIELDSET if you are grouping like-elements together (with a LEGEND), or otherwise a DIV.

    The other errors are easy to fix.

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Keep in mind that while you CAN nest fieldsets, it's not a good idea to. I've seen some modern browsers go bonkers with nested fieldsets.

    A combination of DIVs and fieldsets work best if you're grouping multiple related fields. Use the DIV as the master "container" and then group the actual fields around fieldsets.

  4. #4
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz
    ...group the actual fields around fieldsets.
    Or the other way around, even...

  5. #5
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi guys,

    Just 4 more errors (table-based) that I would really appreciate you guys looking at and see what i can do to fix them, because I can't figure it out from the W3C suggestions - the page can be seen at http://www.evolvewebsitedesign.com/p.../contactus.asp

    promise there won't be similar posts from me after this!

    Kind Regards

    James

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Buddy Bradley
    Or the other way around, even...
    I actually like to keep my fieldsets as close to the form inputs as possible .

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    James, part of the problem is that you're using a table to lay out your form. That's not only unnecessary, but it's also not the proper use of tables.

    Give me a few (damn, I have a long waiting list today) minutes and I'll give you the correct markup for your form. The tradeoff is that you'll have to style it yourself.

    Also, you have places in your code where you are using paragraphs to markup addresses. You should be using the <address></address> tags instead.

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok James, here's your table free form.
    HTML Code:
    <div class="contactform">
    	<form action="http://www.fastnet.co.uk/cgi-bin/coolmail.cgi" method="post">
    		<div>
    			<input type="hidden" name="recipient" value="david@hickmet.com"/>
    			<input type="hidden" name="subject" value="Web submission"/>
    			<input type="hidden" name="goto" value="http://www.evolvewebsitedesign.com/projects/hmt/site/thankyou.asp"/>
    		</div>
    		<fieldset>
    			<legend>Contact Us</legend>
    			<label for="name">Name</label><input id="name" name="name" type="text" size="20" maxlength="160"/><br />
    			<label for="address">Address</label><textarea id="address" name="Address" rows="5" cols="30"></textarea><br />
    			<label for="phone">Phone Number</label><input id="phone" name="phone" type="text" size="20" maxlength="160"/><br />
    			<label for="fax">Fax</label><input id="fax" name="fax" type="text" size="20" maxlength="160"/><br />
    			<label for="e-mail">Email</label><input id="e-mail" name="e-mail" type="text" size="20" maxlength="160"/><br />
    			<label for="message">Message</label><textarea id="message" name="message" rows="10" cols="30"></textarea><br />
    			<label for="reply">How would you like us to reply?</label><br />
    			<select id="reply" name="reply">
    				<option value="email">email</option>
    				<option value="phone">phone</option>
    				<option value="fax">fax</option>
    				<option value="post">post</option>
    			</select>
    		</fieldset>
    		<div>
    			<input type="submit" id="Submit" name="Submit" value="Send Message" onclick="MM_validateForm('NAME','','R','E-MAIL','','RisEmail','MESSAGE','','R');return document.MM_returnValue" />
    		</div>
    	</form>
    </div>
    The code below contains the Web page with the table-free form in it (for comparison purposes). ~98% of the code is the same (there were some changes, aside from getting rid of the layout table, like putting the <title> above the meta data, and formatting the HTML source).

    If you like, I can also give you a truely semantic version of this page, with the proper elements being used for the proper jobs (which will reduce the page weight, but will involve restyling the entire page in your stylesheet).
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Contact Us</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="description" content=""/>
    <link href="nav.css" rel="stylesheet" type="text/css"/>
    <link href="styles.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
    	td.150 {width:150px;}
    </style>
    <script type="text/javascript">
    <!--
    function MM_findObj(n, d) { //v4.0
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && document.getElementById) x=document.getElementById(n); return x;
    }
    
    function MM_validateForm() { //v4.0
      var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
      for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);
        if (val) { nm=val.name; if ((val=val.value)!="") {
          if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
            if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
          } else if (test!='R') {
            if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
            if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
              min=test.substring(8,p); max=test.substring(p+1);
              if (val<min || max<val) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
        } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
      } if (errors) alert('The following error(s) occurred:\n'+errors);
      document.MM_returnValue = (errors == '');
    }
    //-->
    </script>
    <script type="text/javascript">
    <!--
    	var newwindow;
    	function poptastic(url)
    	{
    		newwindow=window.open(url,'name','height=600,width=400');
    		if (window.focus) {newwindow.focus()}
    	}
    //-->
    </script>
    <script type="text/javascript">
    <!--
    function MM_openBrWindow(theURL,winName,features) { //v2.0
      window.open(theURL,winName,features);
    }
    
    //-->
    </script>
    </head>
    <body>
    <div class="container">
    	<img class="nopadding" height="115" width="800" src="images/header.jpg" alt="header logo" />
    	<div id="nav-menu">
    		<ul class="top-nav">
    			<li class="home"><a href="index.asp"></a></li>
    			<li class="aboutus"><a href="aboutus.asp"></a></li>
    			<li class="sculptures"><a href="sculptures.asp"></a></li>
    			<li class="events"><a href="events.asp"></a></li>
    			<li class="contactus"><a href="contactus.asp"></a></li>
    		</ul>
    	</div>
    	<div class="main">
    		<div class="col-right">
    			<div class="col-right_outside">
    				<div class="col-right_inside"><img class="featuredsculpturestitle" src="images/contactus-page.jpg" alt="contact us" />
    					<br/>
    					<p>Our main gallery is situated at:
    						<br/>
    						<br/>
    						107 Portobello Road<br/>
    						London W11 2QB<br/>
    						Tel: 0 (+44) 797 185 0405<br/>
    						<b>Open Saturdays 7 am to 4 pm
    						and by appointment</b><br/><br/>
    						You can contact our office by Telephone or Fax at these numbers:
    						<br/>
    						<br/>
    						United Kingdom<br/><br/>
    						Tel : 01 342 841 508<br/>
    						Fax: 01 342 841 879<br/><br/>
    						USA &amp; Canada<br/><br/>
    						Tel : 011 44 1 342 841 508<br/>
    						Fax: 011 44 1 342 841 879<br/><br/>
    						Other Countries<br/><br/>
    						Tel : (CODE) 44 1 342 841 508<br/>
    						Fax: (CODE) 44 1 342 841 879
    					</p>
    					<p>
    						<b>You can get in contact with us through the following form</b>
    					</p>
    					<div class="contactform">
    						<form action="http://www.fastnet.co.uk/cgi-bin/coolmail.cgi" method="post">
    							<div>
    								<input type="hidden" name="recipient" value="david@hickmet.com"/>
    								<input type="hidden" name="subject" value="Web submission"/>
    								<input type="hidden" name="goto" value="http://www.evolvewebsitedesign.com/projects/hmt/site/thankyou.asp"/>
    							</div>
    							<fieldset>
    								<legend>Contact Us</legend>
    								<label for="name">Name</label><input id="name" name="name" type="text" size="20" maxlength="160"/><br />
    								<label for="address">Address</label><textarea id="address" name="Address" rows="5" cols="30"></textarea><br />
    								<label for="phone">Phone Number</label><input id="phone" name="phone" type="text" size="20" maxlength="160"/><br />
    								<label for="fax">Fax</label><input id="fax" name="fax" type="text" size="20" maxlength="160"/><br />
    								<label for="e-mail">Email</label><input id="e-mail" name="e-mail" type="text" size="20" maxlength="160"/><br />
    								<label for="message">Message</label><textarea id="message" name="message" rows="10" cols="30"></textarea><br />
    								<label for="reply">How would you like us to reply?</label><br />
    								<select id="reply" name="reply">
    									<option value="email">email</option>
    									<option value="phone">phone</option>
    									<option value="fax">fax</option>
    									<option value="post">post</option>
    								</select>
    							</fieldset>
    							<div>
    								<input type="submit" id="Submit" name="Submit" value="Send Message" onclick="MM_validateForm('NAME','','R','E-MAIL','','RisEmail','MESSAGE','','R');return document.MM_returnValue" />
    							</div>
    						</form>
    					</div>
    				</div>
    			</div>
    		</div>
    		<div class="col-left">
    			<img class="coinlogo" src="images/hickmet-logo.jpg" alt="hickmet"/>
    			<div class="col-left_outside">
    				<div class="col-left_inside">
    					<img src="images/nextevent.jpg" alt="next event"/>
    					<p>
    						<b>7th-12th November</b>
    					</p>
    					<p>
    						The Winter Olympia Fine Art &amp; Antiques Fair
    					</p>
    					<p>
    						http://olympia-antiques.co.uk/
    					</p>
    				</div>
    			</div>
    			<div class="col-left_outside">
    				<div class="col-left_inside">
    					<img src="images/contactus.jpg" alt="contact us" />
    					<p>
    						You can either get in contact with us by phone or email:-
    						<br/>
    						<br/>
    						<b>01342 841 508<br/>
    						david@hickmet.com</b>
    					</p>
    				</div>
    			</div>
    			<img class="lapada" src="images/lapada.jpg" height="80" width="80" alt="lapada "/>
    		</div>
    		<div class="footer">
    			<ul class="textnavs">
    				<li class="textnavs"><a href="index.asp">home</a></li>
    				<li class="textnavs"><a href="aboutus.asp">about us</a></li>
    				<li class="textnavs"><a href="sculptures.asp">sculptures</a></li>
    				<li class="textnavs"><a href="events.asp">events</a></li>
    				<li class="textnavs"><a href="contactus.asp">contact us</a></li>
    			</ul>
    			<div class="evolve">
    				Designed and created by <b><a href="http://www.evolvewebsitedesign.com">Evolve Website Design</a></b>
    			</div>
    		</div>
    	</div>
    </div>
    </body>
    </html>
    Note that I had the hidden form fields (along with the submit input field) contained inside DIV containers. THis is because you need a block-level element to separate the input fields from the form element, or else the page will fail validation (to answer your question from earlier).

    If you need help styling the form, don't hesitate to ask on the thread .

  9. #9
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz
    Also, you have places in your code where you are using paragraphs to markup addresses. You should be using the <address></address> tags instead.
    Not quite. <address> is for contact information for the document (or major part of a document), not just any address or contact information.
    Simon Pieters

  10. #10
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Normally, I would agree with you Simon, but in James' case, the address is being used in conjunction with the contact fom itself, so IMHO this would be an appropriate use of the ADDRESS element.

    http://www.htmlhelp.com/reference/ht...k/address.html
    ADDRESS can also be used to provide contact information for a portion of a document, typically a form. The next example gives users contact information to use in conjunction with an order form...

  11. #11
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So what of that document would you mark up with <address>?

    The example you reference is correct, but I can't find anything in James' page that is contact information about the contact information or the contact form.

    If there was a paragraph that said "If the above contact information is incorrect or if you need help filling in the contact form then please call George on 123-45678." or some such then that would be appropriate to mark up with <address>.
    Simon Pieters

  12. #12
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This part (though the text would have to be re-written a bit):
    Our main gallery is situated at:

    107 Portobello Road
    London W11 2QB
    Tel: 0 (+44) 797 185 0405
    Open Saturdays 7 am to 4 pm and by appointment


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •