5568 sujets

Sémantique web et HTML

Bonjour,

Je suis en train de développer un site de test pour une entreprise. Les modèles de leur questions me posent problème...

Voici un des modèles les plus simples :

http://www.adrienguidis.fr/ressources/echantillon.PNG

J'aimerai que vous m'aidiez à coder de manière propre ce type de tableau qui comprend des boutons radios (oui ce ne sont pas des checkbox vu qu'il n'y a qu'un choix possible) afin d'avoir une base correcte pour les prochains modèles qui sont un peu plus compliqué.

Je ne sais pas où (après quelle balise) incruster ma balise form avec tous les boutons radio dans mon tableau.

<table>

<tr>
	<th colspan="4">Instruction</th>
</tr>

<tr>
	<td>Question 1</td>
    <td>Choix 1</td>
    <td>Choix 2</td>
    <td>Choix 3</td>
</tr>

<tr>
	<td>Question 2</td>
    <td>Choix 1</td>
    <td>Choix 2</td>
    <td>Choix 3</td>
</tr>

<tr>
	<td>Question 3</td>
    <td>Choix 1</td>
    <td>Choix 2</td>
    <td>Choix 3</td>
</tr>

</table>


merci d'avance

Cordialement
Modifié par Gstyle (21 Feb 2011 - 20:51)
Administrateur
Bonjour et bienvenue,

mélanger tableau et formulaire pose un gros problème aux lecteurs d'écran et je te conseille d'éviter si possible. Pour l'affichage des résultats pas de souci par contre (mais c'est plus un formulaire)

Pour une ligne avec texte et 3 couples (étiquette + radio) tu n'as pas besoin de cellules : une méthode un peu avancée est display: inline-block; (avec les correctifs qui vont bien pour IE<8)
et sinon tu fais flotter partie gauche et droite ...
Ah display: table* qui ne fonctionne pas sur IE<8 serait parfait Smiley smile http://ie7nomore.com/css2only/table-layout/

Perso je commencerais par expliquer au client que web != print et que c'est super dur de remplir ce genre de questionnaire copié-collé d'une feuille A4 ...
Question 1
- (o) réponse 1
- (o) réponse 2
- (o) réponse 3

Question 2
- (o) réponse 1
- (o) réponse 2
- (o) réponse 3

c'est quand même plus clair et comme le pixel est gratuit, ça coûte pas plus cher Smiley lol

EDIT: tu peux regarder cette discussion pour pistes et réponses, ma problématique était la même qua la tienne je pense ; avec en plus une obligation de très forte accessibilité.
http://list.accessiweb.org/pipermail/liste_gta_list.accessiweb.org/2010-October/001817.html
(mon message et 3 réponses)
Raaah le lien vers le site allemand renvoie une 404. Dommage c'était un des rares exemples de formulaire accessible et malgré tout assez complexe qui ne soit pas totalement pourri comme trop souvent dans les quiz et sondages en ligne ...
Modifié par Felipe (21 Feb 2011 - 16:26)
Bonjour !

Je tiens d'abord à vous remercier pour m'avoir répondu et en plus de façon claire et détaillée !

Je vais organiser une réunion avec le client pour en parler !

Je vais tester votre solution et vous donnerai mes impressions car j'ai encore d'autres modèle à préparer (hélas).


Cordialement

Ps: Petite précision j'ai deux comptes : Gstyle et sidguia ^^' je me suis connecté avec le mauvais
Modifié par sidguia (21 Feb 2011 - 18:10)