5568 sujets

Sémantique web et HTML

C'est quand même pas bien loin de la vérité.

En gros, si tu places le titre de tes champs dans des <label>Titre de champ</label> et que tu englobes le titre et le champ dans une balise de type bloc, tu seras en business !


<p><label for="pseudo">Pseudo</label><br />
<input name="pseudo" id="pseudo" type ="" /></p>


Un tutoriel sur openweb :
http://openweb.eu.org/articles/formulaire_accessible/
Salut,

Si je reprends le code de ton formulaire, point par point... :
<FORM method="POST" action="envoi.php">

Tout d'abord, les balises et attributs doivent être en minuscule. Donc :
<form method="post" action="envoi.php">


Ensuite, n'oublie pas que les balises formulaire (tel que <input /> ou <select> ou autre) sont des balises de type en ligne donc il faut le mettre dans des balises de type bloc. Comme par exemple <p> ou <div> (<p> de préférence).

Donc il faut mettre ton texte ainsi que tes balises dans des balises de type bloc (exemple avec <p>) :
<p>Vous souhaitez :<br/>
<select name="sujet">
<option value="0">-</option>
<option value="1">donner votre avis sur un film</option>
<option value="2">donner votre avis sur un dvd</option>

<option value="3">signaler une erreur</option>
<option value="4">proposer votre candidature</option>
<option value="5">poser une question / divers</option>
</select></p>


Je vois :
<br/><br/>


Au lieu de ça, tu peux simplement utiliser les paragraphes (<p>), tout simplement... D'ailleurs, en passant, tu devrais mettre un espace entre le br et le / donc <br /> (même chose pour toutes les autres balises seules (<img />, <hr />, etc.)).

Même argument qu'au début, balises et attributs en minuscule (pour la balise <input />). Ensuite, les valeurs des attributs entre guillemets (même lorsqu'il s'agit de chiffres (je parlais de size=30)).

Puis n'oublie pas que <input /> est une balise seule, donc mets un /

Pour récapituler :
<INPUT type="text" name="nom" size=30>

=>
<input type="text" name="nom" size="30" />


Pour ton <textarea>, mets les valeurs des attributs entre guillemets :
<textarea name="texte" cols="40" rows="5"></textarea>


Puis pour la balise </FORM>, eh bien tout simplement en minuscule Smiley cligne

Voilà, j'espère avoir pu t'aider ! Si tu as besoin de plus de précision, n'hésite pas à demander Smiley cligne
@Nyro Xeo,
euh, les attributs doivent être en minuscule (comme les balises) là on est d'accord, mais les valeurs d'attribut peuvent prendre n'importe quelle casse, donc ="POST" est valable Smiley cligne

Pour ce qui est de privilégier <p> à la place des <div>, en fait, j'aurais tendance à utiliser des <div>, un input n'a pas sa place dans un <p> en fait Smiley cligne , div conviendrait donc mieux.
ElMoustiko a écrit :

Pour ce qui est de privilégier <p> à la place des <div>, en fait, j'aurais tendance à utiliser des <div>, un input n'a pas sa place dans un <p> en fait Smiley cligne , div conviendrait donc mieux.


Openweb a écrit :

<form action="...">
<p>
<label for="nom">Nom :</label>
<input type="text" id="nom" />
</p>
</form>


http://openweb.eu.org/articles/formulaire_accessible/

Tu as un motif pour privilégier un <div> ?
Modifié le 26 Nov 2004 - 21:21
Bah, un input c'est pas du texte, un <p> est utilisé pour du texte, donc un div est tout aussi adapté. Voire plus.
Moi je préfère le <p> parce que lorsque CSS est désactivé, les champs ne se collent pas l'un sur l'autre.

<input type="text" ... /> c'est pas du texte ?

<label>Texte</label> en tout cas c'est du texte ! Smiley cligne
Modifié le 26 Nov 2004 - 21:39
Administrateur
Je trouve curieux également d'utiliser une balise de paragraphe pour délimiter une zone qui n'en est pas une Smiley confus
J'ai plutôt tendance à utiliser <div> qui joue ici son rôle de regroupement d'éléments sans leur donner de signification particulière.
J'ai trouvé ce modèle : Smiley rofl

<fieldset>
	<p class="field"><label for="c_nom">Nom ou pseudo&nbsp;:</label>
	<input name="c_nom" id="c_nom" type="text" size="30" maxlength="255"
	value="" />
	</p>

	<p class="field"><label for="c_mail">Email (facultatif)&nbsp;:</label>
	<input name="c_mail" id="c_mail" type="text" size="30" maxlength="255"
	value="" />
	</p>

	<p class="field"><label for="c_site">Site Web (facultatif)&nbsp;:</label>
	<input name="c_site" id="c_site" type="text" size="30" maxlength="255"
	value="http://" />
	</p>
	
	<p class="field"><label for="c_content">Commentaire&nbsp;:</label>
	<textarea name="c_content" id="c_content" cols="35" rows="7"></textarea>
	</p>
</fieldset>

Modifié le 26 Nov 2004 - 21:55
Administrateur
Stephan a écrit :
J'ai trouvé ce modèle : Smiley rofl

J'ai trouvé des modèles bien pires Smiley smile
En tout cas, même si ce modèle est issu d'un site officiel, je reste sceptique quant à utiliser une balise de paragraphe pour ce qui n'en est pas.
Pas toi ?
Wé Raphaël à plus clairement récapitulé le fond de ma pensée, <div> pour regrouper les éléments.

C'est fait pour ça, pourquoi ne pas les utiliser alors ?
Pour regrouper les éléments dans un formulaire, on utilise <fieldset>.

<edit>
Et puis c'est seulement en Strict qu'il est obligatoire de structurer les éléments <label> et <input> dans un élément de type bloc.
</edit>

<redit>
Et puis à mon avis, l'utilisation de paragraphes pour structurer des éléments de formulaires n'est pas plus discutable que l'utilisation de <dl> pour structurer des menus.
</redit>
Modifié le 26 Nov 2004 - 22:33
ElMoustiko a écrit :
@Nyro Xeo,
euh, les attributs doivent être en minuscule (comme les balises) là on est d'accord, mais les valeurs d'attribut peuvent prendre n'importe quelle casse, donc ="POST" est valable Smiley cligne


Oui oui je sais, je n'ai d'ailleurs pas dit dans mon post que les valeurs des attributs devaient être entre guillemets... Sauf qu'en réécrivant la balise <form>, j'ai l'habitude d'écrire post en minuscule donc je l'ai écrit en minuscule là aussi...

Concernant la balise <p> vs <div>, je voulais surtout souligner le fait que la balise <input /> doit se trouver dans une balise de type bloc.

En fait, je sais pas pourquoi j'ai dit "<p> de préférence", mais pour ma part, j'organise mes pages comme ceci:
<div> structure de la page; les blocs (menu, contenu, footer, etc.)
<p> contenu de la page (qui contient du texte, des images, etc.

Bon ça change rien, c'est une "méthode d'organisation" personnelle, j'ai l'habitude de mettre du contenu dans des balises <p> plutôt que dans du <div> (sauf si j'ai besoin du <div>), mais si je dois choisir entre les deux pour un cas comme ici (une balise <input />), je préfère <p>.

Maintenant, je sais pas si il y a une véritable différence ? Ca change pas grand chose, non ?
Modifié le 26 Nov 2004 - 22:28
Administrateur
Stephan a écrit :
On ne parle pas ici d'un paragraphe dans un bête traitement de texte mais d'un balisage de type bloc qui lui ne peut contenir d'autres éléments de type bloc. C'est tout ce que la spécification dit.

Les paragraphes, lignes et phrases

Je ne trouve pas ce dont tu parles dans le lien.
Par contre on y lit : "L'élément P correspond à un paragraphe.". Or là je ne voit pas l'emploi d'un paragraphe. Par contre, <div> correspond bien à "un balisage de type bloc" neutre.

Bref, on ne va pas polémiquer pour un détail qui fait dévier de plus en plus du sujet initial (désolé d'ailleurs)

EDIT :
a écrit :
Et puis à mon avis, l'utilisation de paragraphes pour structurer des éléments de formulaires n'est pas plus discutable que l'utilisation de <dl> pour structurer des menus.

Paf dans ma figure ! Smiley lol
Stephan a écrit :
Pour regrouper les éléments dans un formulaire, on utilise <fieldset>.

<edit>
Et puis c'est seulement en Strict qu'il est obligatoire de structurer l'élément <label> dans un élément de type bloc.
</edit>

<redit>
Et puis à mon avis, l'utilisation de paragraphes pour structurer des éléments de formulaires n'est pas plus discutable que l'utilisation de <dl> pour structurer des menus.
</redit>


Pour les <dl> ont est d'accord Smiley cligne (au final <p> vs <div> pour les form c'est un peu un coup d'épée dans l'eau, mais je voudrais tout de même poursuivre) pour ce qui est du strict, argument peu recevable, autant faire comme il faut, si en strict c'est demandé d'encadrer les éléments en ligne d'élément bloc c'est pas pour rien Smiley cligne

Et pour le fieldset... euhh hmmm, fieldset ne sert pas à regrouper des éléments, fieldset sert à regrouper des morceaux(set) de champs (field) qui vont ensemble dans l'organisation du formulaire. Tu vas pas regrouper chaque <label>...</label><input /> par un fieldset Smiley cligne

Au final, je pense toujours que <div> est plus adapté en tant qu'élément englobant, ce que l'on cherche ici.

Et puis pour la désactivation ou non utilisation des CSS, certe le <p> offrira des marges, mais seueleument dans certains navigateurs graphiques, après c'est chaque navigateur fait comme il veut...
Concernant l'utilisation de <p> ou <div> pour structurer des éléments de formulaires :
Nyro Xeo a écrit :

Maintenant, je sais pas si il y a une véritable différence ? Ca change pas grand chose, non ?


À mon avis ? Non ! <edit> Smiley cligne </edit>
Modifié le 26 Nov 2004 - 22:50
Wé c'est clair que ça change pas grand chose, mais quand même, je conseille l'utilisation des <div> Smiley cligne lol