Pb de sémantique et DOM sur un formulaire en xhtml

Question

yellooo

18 Aug 2011 à 09:49

Bonjour,

j'ai fais un formulaire mais apparement, il ne respect ni la semantique, ni la dom html.

voici le code :


<form action="kontakt2.html" name="formKontakt" method="post" onsubmit="return check_data();">
    <div class="clearfix">
         <div id="colLeft" class="left">                     		
               <h3><LABEL for="anrede" accesskey="A" >ANREDE</LABEL></h3>
               <SELECT id="anrede" name="anrede" tabindex="1" class="itemsKontakt">       
                   <option selected="selected" >W&auml;hlen Sie eine Anrede</option>         
                   <option  label="Frage &uuml;ber unsere Services" value="frage">Frage &uuml;ber unsere Services</option>
                    <option  label="M&ouml;chten Sie bestellen" value="bestellen">M&ouml;chten Sie bestellen</option>
                </SELECT>                          
                <h3><LABEL for="vorname" accesskey="V">VORNAME</LABEL></h3>
                <INPUT type="text" name="vorname" tabindex="2" class="itemsKontakt">
                            
                <h3><LABEL for="plz" accesskey="p" class="left ie7">PLZ / ORT</LABEL></h3>
                <INPUT type="text" name="plz" tabindex="4" class="itemsKontakt">                             
          </div>      
          <div id="colRight" class="left">                             
                <h3><LABEL for="nachname" accesskey="N" class="left">NACHNAME</LABEL></h3>
                <INPUT type="text" id="nachname" name="nachname" tabindex="3" class="itemsKontakt left">                       	                       
                <h3><LABEL for="mail" accesskey="m" class="left">E-Mail</LABEL></h3>
                <INPUT type="text" id="mail" name="mail" tabindex="5" class="itemsKontakt left">                       	
          </div>
          <div id="bottom" class="left">                        	
              <fieldset>
                   <legend title="W&auml;hlen Sie, bitte eine Option"><h3>ART DES ANLIEGENS</h3></legend>                        
                        <INPUT type="radio"  name="anliegen" tabindex="6" >
                        <LABEL for="feedback" accesskey="f" class="titleRadio">Feedback</LABEL>                         
                        <INPUT type="radio"  name="anliegen" tabindex="7" >
                        <LABEL for="lob" accesskey="l" class="titleRadio">Lob und Kritik</LABEL>                         
                        <INPUT type="radio" name="anliegen" tabindex="8" >
                        <LABEL for="presse" accesskey="i" class="titleRadio">Presse-Informationen</LABEL>                       
                        <INPUT type="radio"  name="anliegen"tabindex="9" >
                        <LABEL for="sonstiges" accesskey="s" class="titleRadio">Sonstiges</LABEL>
               </fieldset>                       	
               <h3><LABEL for="comment" accesskey="e">IHR ANLIEGEN</LABEL></h3>
               <TEXTAREA id="comment" rows="6" cols="100" tabindex="10" class="itemsKontakt">Bitte, schreiben Sie Ihre Mitteilung.</TEXTAREA>                        	
          </div>
    </div>
    <div id="error" class="hide"></div>
    <INPUT id="btnValid" type="image" name="submit" src="img/btnKontakt.gif" alt="Submit" tabindex="11">                   </form>

Pouvez-vous me dire ce qui n'est pas correct dans l'imbrication des balises etc...?
Si vous avez de bons liens sur la semantique, je suis prenneur. Smiley lol

Merci
Modifié par yellooo (18 Aug 2011 - 10:00)

boulaneige

18 Aug 2011 à 09:59

Salut,

A première vue (rapide), l'élément legend ne peut contenir que des éléments de type inline, et si tu es en strict, input ne peut être descendant direct de form.

Edit : et le mélange bas de casse/cap, pas terrible, et selon le doctype choisi cela peut être interdit (les cap)
Modifié par boulaneige (18 Aug 2011 - 10:01)

AkaiKen

18 Aug 2011 à 10:02

Quand tu dis "apparemment", ça signifie quoi ? On te l'a dit, une personne, le validateur html ?

Là, à froid, je vois juste des noms de balises en majuscule. Je regarderai plus attentivement plus tard.

(tiens, grilled)

yellooo

18 Aug 2011 à 10:08

boulaneige a écrit :
Salut,

A première vue (rapide), l'élément legend ne peut contenir que des éléments de type inline, et si tu es en strict, input ne peut être descendant direct de form.

Ha oui j'avais oublié je suis en transitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Merci de ta reponse je viens de trouver un tuto sur les types block et inline de Mr Raphael

Vois-tu d'autres incohérences ?

yellooo

18 Aug 2011 à 10:15

AkaiKen a écrit :
Quand tu dis "apparemment", ça signifie quoi ? On te l'a dit, une personne, le validateur html ?

Là, à froid, je vois juste des noms de balises en majuscule. Je regarderai plus attentivement plus tard.

(tiens, grilled)

Je fais un stage et c'est le developpeur qui me suit sur ce formulaire qui m'a juste dit la dom et la sémantique ne sont pas bonne (il ne m'a pas dit où et ne ma donne aucune pistes Smiley fache

)

Laurie-Anne

18 Aug 2011 à 10:27

yellooo a écrit :
Je fais un stage et c'est le developpeur qui me suit sur ce formulaire qui m'a juste dit la dom et la sémantique ne sont pas bonne (il ne m'a pas dit où et ne ma donne aucune pistes )

Et qu'est ce qui t'empèche d'utiliser le validateur du W3C ?

yellooo

18 Aug 2011 à 10:36

Laurie-Anne a écrit :
Et qu'est ce qui t'empèche d'utiliser le validateur du W3C ?

Merci c'est ce que je suis en train de faire. ( de 50 errors, j'en suis à 1 et 6 warnings) Smiley smile

Je termine et je vous montre le résultat au cas ou j'aurais encore des absurdités.

J'ai aussi utilisé cette check list à suivre pour la semantique xhtml que je trouve sympa. http://xhtml.le-developpeur-web.com/index.php#ancre_principe_de_base
Modifié par yellooo (18 Aug 2011 - 10:41)

Laurie-Anne

18 Aug 2011 à 10:47

La partie "bonnes pratiques" de l'article est correcte et utile. Le reste est un peu à côté de la plaque et donc à prendre avec des pincettes. Dommage qu'il n'y ait pas la date de rédaction de l'article (s'il a été écrit en 2005, c'est excusable ; en 2011, pas)

yellooo

18 Aug 2011 à 10:56

Laurie-Anne a écrit :
La partie "bonnes pratiques" de l'article est correcte et utile. Le reste est un peu à côté de la plaque et donc à prendre avec des pincettes. Dommage qu'il n'y ait pas la date de rédaction de l'article (s'il a été écrit en 2005, c'est excusable ; en 2011, pas)

Merci beaucoup Laurie-Anne est-ce que tu connais un bon site avec une check list de ce que l'on doit faire avant de poster sur un forum Smiley confused

? Au niveau de la semantique xhtml.

yellooo

18 Aug 2011 à 11:06

Voici le code valide par le validateur du w3c :


<form action="kontakt2.html" name="formKontakt" method="post" onsubmit="return check_data();">
      <div class="clearfix">
           <div id="colLeft" class="left">                     		
               <h3><label for="anrede" accesskey="A" >ANREDE</label></h3>
               <select id="anrede" name="anrede" tabindex="1" class="itemsKontakt">       
                   <option selected="selected" >W&auml;hlen Sie eine Anrede</option>         
                   <option  label="Frage &uuml;ber unsere Services" value="frage">Frage &uuml;ber unsere Services</option>
                    <option  label="M&ouml;chten Sie bestellen" value="bestellen">M&ouml;chten Sie bestellen</option>
                 </select>                          
                 <h3><label for="vorname" accesskey="V">VORNAME</label></h3>
                 <input type="text" name="kundeVorname" id="vorname" tabindex="2" class="itemsKontakt" />
                            
                  <h3><label for="plz" accesskey="p" class="left ie7">PLZ / ORT</label></h3>
                   <input type="text" name="kundePlz" id="plz" tabindex="4" class="itemsKontakt" />                             
               </div>      
               <div id="colRight" class="left">                             	
                    <h3><label for="nachname" accesskey="N" class="left">NACHNAME</label></h3>
                    <input type="text" id="nachname" name="nachname" tabindex="3" class="itemsKontakt left" />                       	                       
                    <h3><label for="mail" accesskey="m" class="left">E-Mail</label></h3>
                    <input type="text" id="mail" name="mail" tabindex="5" class="itemsKontakt left" />                       	
               </div>
               <div id="bottom" class="left">                        	
                    <fieldset>
                       <legend title="W&auml;hlen Sie, bitte eine Option">ART DES ANLIEGENS</legend>                       
                           <input type="radio"  name="anliegen" id="feedback" tabindex="6" />
                            <label for="feedback" accesskey="f" class="titleRadio">Feedback</label>                         
                            <input type="radio"  name="anliegen" id="lob" tabindex="7" />
                            <label for="lob" accesskey="l" class="titleRadio">Lob und Kritik</label>                         
                            <input type="radio" name="anliegen" id="presse" tabindex="8" />
                            <label for="presse" accesskey="i" class="titleRadio">Presse-Informationen</label>                       
                            <input type="radio"  name="anliegen"  id="sonstiges" tabindex="9" />
                            <label for="sonstiges" accesskey="s" class="titleRadio">Sonstiges</label>
                      </fieldset>                       	
                     <h3><label for="comment" accesskey="e">IHR ANLIEGEN</label></h3>
                     <textarea id="comment" rows="6" cols="100" tabindex="10" class="itemsKontakt">Bitte, schreiben Sie Ihre Mitteilung.</textarea>                        	
          	 </div>
              </div>
              <div id="error" class="hide"></div>
              <input id="btnValid" type="image" name="submit" src="img/btnKontakt.gif" alt="Submit" tabindex="11" />                    
</form>

Il passe bien sous lynx aussi (legend apparait comme une legend et non un titre H3 maintenant).
Voyez vous d'autres anomalies ?

Sujet clos

Sémantique web et HTML

Pb de sémantique et DOM sur un formulaire en xhtml