5568 sujets

Sémantique web et HTML

bonjour,

Je voudrais valider un code qui utilise l'attribut "name" dans la balise "form"

Connaissant à peine le javascript et utilisant un plugin tout fait de fluxBB, j'ai essayé d'enlever l'attribut (des fois qu'il serve à rien Smiley biggol ) mais c'est pas le cas : les messages, censés s'afficher au fur et à mesure dans la "chatbox", ne s'affiche plus du tout sans l'attribut name.

Si vous connaissez un peu le javascript, peut-être saurez-vous remplacer ça ?


<form style="display: inline" id="post" method="post" name="formulaire" action="chatbox.php" onsubmit="send_message(); return false;" >


Le contexte général est le suivant :



  	<h2>

			<script type="text/javascript">
			<!--
			// This checkbox is utterly useless, unless we have javascript enabled. As such, we won't display it until then.
			document.write('<span class="conr" style="width:150px;" ><?php echo $lang_chatbox['Autoscroll'] ?>: <input type="checkbox" id="autoscroll" value="" checked  tabindex="<?php echo $cur_index++ ?>" /></span>');
			
			// -->
			</script>
			<?php
			if ($pun_user['g_post_chatbox'] == '1') {
			$cur_index = 1;
			?>
			<ins><form style="display: inline" id="post" method="post" name="formulaire" action="chatbox.php" onsubmit="send_message(); return false;" >
				<p>
					<input type="hidden" name="form_sent" value="1" />
					<input type="hidden" name="form_user" id="form_user" value="<?php echo (!$pun_user['is_guest']) ? pun_htmlspecialchars($pun_user['username']) : 'Guest'; ?>" />
					<?php
					if ($pun_user['is_guest']) {
						$email_label = ($pun_config['p_force_guest_email'] == '1') ? '<strong>'.$lang_common['E-mail'].':</strong>' : $lang_common['E-mail'];
						$email_form_name = ($pun_config['p_force_guest_email'] == '1') ? 'req_email' : 'email';
						
						if($email_form_name = 'req_email')
						echo "\t".'<input type="hidden" name="email" id="email" value="" />'."\n";
						else
						echo "\t".'<input type="hidden" name="req_email" id="req_email" value="" />'."\n";
					?>
					<strong><?php echo $lang_post['Guest name'] ?>:</strong> <input type="text" name="req_username" id="req_username" value="<?php if (isset($_POST['req_username'])) echo pun_htmlspecialchars($username); ?>" size="15" maxlength="25" tabindex="<?php echo $cur_index++ ?>" /> 
					<?php echo $email_label ?> <input type="text" name="<?php echo $email_form_name ?>" id="<?php echo $email_form_name ?>" value="<?php if (isset($_POST[$email_form_name])) echo pun_htmlspecialchars($email); ?>" size="15" maxlength="50" tabindex="<?php echo $cur_index++ ?>" /> 
					<?php
					}
					else {
					?>
						<input type="hidden" name="req_username" id="req_username" value="" /> 
						<input type="hidden" name="email" id="email" value="" /> 
						<input type="hidden" name="req_email" id="req_email" value="" /> 
					<?php
					}
					?>
					<strong><?php echo $lang_chatbox['Message'] ?>:</strong> <input type="text" name="req_chat"  id="req_chat" value="<?php if (isset($_POST['req_chat'])) echo pun_htmlspecialchars($message); ?>" size="35" maxlength="<?php echo $pun_config['cb_msg_maxlength'] ?>"  tabindex="<?php echo $cur_index++ ?>" /> 
					<input type="submit" name="submit" value="<?php echo $lang_chatbox['Btn Send'] ?>" accesskey="s" tabindex="<?php echo $cur_index++ ?>" />
					<script type="text/javascript">
					<!--
					document.formulaire.req_chat.focus();
					// -->
					</script>
				</p>
			</form></ins>
			<?php
			}
			else
			echo $lang_chatbox['No Post Permission'];
			?>

 	</h2>


<script type="text/javascript">
    // Begin getting messages
    var LastMsg = '<?php echo $last_msg_time; ?>';
    $('autoscroll').value = 'true';
    get_messages();
    checker = new PeriodicalExecuter(get_messages, <?php echo $pun_config['cb_ajax_refresh']; ?>);
</script>

Modifié par neeteex (24 May 2009 - 12:19)
Salut neeteex,
a écrit :
Si vous connaissez un peu le javascript, peut-être saurez-vous remplacer ça ?
<form style="display: inline" id="post" method="post" name="formulaire" action="chatbox.php" onsubmit="send_message(); return false;" >
Lorsque ce formulaire est soumis, la fonction javascript sendMessage() est appelée. C'est donc le code de cette fonction qu'il faut que tu donnes ici si tu veux remplacer quelque chose.
Salut,

si le name ne sert que pour ça :
document.formulaire.req_chat.focus();
il ne sert à rien puisque le champ req_chat n'existe pas ! Smiley biggol

D'une manière générale et comme tu as affecté un id à chacun de tes champs (il ne manque plus que le LABEL for qui va avec) tu peux faire par exemple :
document.getElementById("req_email").focus();
marcv a écrit :
Lorsque ce formulaire est soumis, la fonction javascript sendMessage() est appelée. C'est donc le code de cette fonction qu'il faut que tu donnes ici si tu veux remplacer quelque chose.

OK, j'ai trouvé la fonction, je veux bien un conseil sur ce qu'il faut en faire :
// Request function for send new message
function send_message() {
        var req_message = escape($F('req_message'));
        var form_user = escape($F('form_user'));
        var req_username = escape($F('req_username'));
        var req_email = escape($F('req_email'));
        var email = escape($F('email'));
	
        // Send message
        var args = 'ajax=1&last_msg=' + LastMsg + '&form_user=' + encodeURIComponent(form_user) + '&req_username=' + encodeURIComponent(req_username) + '&req_email=' + encodeURIComponent(req_email) + '&email=' + encodeURIComponent(email) + '&req_message=' + encodeURIComponent(req_message);
	var do_ajax = new Ajax.Request(server, {method: 'post', parameters: args, onComplete: handle_response});
	
	// Disable input fields while posting
	input_disable(true);
	// Display loading image
	Element.show('loading');
	// Let the script know that we're trying to post
	posting = true;
}


Au cas où, la totalité du js :


var server = 'chatbox.php';
var posting = false;

// Function to Disable/Enable input fields
function input_disable(type) {
	disableThis = document.getElementsByTagName("input");
	for (i=0; i< disableThis.length; i++) {
			disableThis[ i ].disabled = type;
	}
}

// Request function for get possible new messages
function get_messages() {
        var args = 'ajax=1&last_msg='+LastMsg;
        var do_ajax = new Ajax.Request(server, {method: 'get', parameters: args, onComplete: handle_response});
	Element.show('loading');
}

// Request function for send new message
function send_message() {
        var req_message = escape($F('req_message'));
        var form_user = escape($F('form_user'));
        var req_username = escape($F('req_username'));
        var req_email = escape($F('req_email'));
        var email = escape($F('email'));
	
        // Send message
        var args = 'ajax=1&last_msg=' + LastMsg + '&form_user=' + encodeURIComponent(form_user) + '&req_username=' + encodeURIComponent(req_username) + '&req_email=' + encodeURIComponent(req_email) + '&email=' + encodeURIComponent(email) + '&req_message=' + encodeURIComponent(req_message);
	var do_ajax = new Ajax.Request(server, {method: 'post', parameters: args, onComplete: handle_response});
	
	// Disable input fields while posting
	input_disable(true);
	// Display loading image
	Element.show('loading');
	// Let the script know that we're trying to post
	posting = true;
}

// Get the response server
function handle_response(request) {
        var LastMsgInfo = '';
	
	// Hide loading image
	Element.hide('loading');
	
        // We're getting a valid response, first get the latest timestamp
        var response = request.responseText;
	LastMsgInfo = response.substring(0, 10);
	
	// If error, we display error message
	if (LastMsgInfo == 'error:chat') {
		 error = response.substring(10, response.length);
		 var chatbox = $('chatbox');
		 chatbox.innerHTML = chatbox.innerHTML + error + '\n';
	}
	// If it's a posted response we get message(s)
	else if (LastMsgInfo == 'PostedInDB') {
		get_messages();
	}
	// If Response TimeStamp != Send TimeStamp we display display new message
	else if (LastMsgInfo != LastMsg) {
		LastMsg = LastMsgInfo;
		messages = response.substring(10, response.length);
		// Add all new message(s)
		var chatbox = $('chatbox');
		chatbox.innerHTML = chatbox.innerHTML + messages + '\n';
	}
	// If we was posting !
	if (posting == true) {
		
		// Re-enable input fields after posting but we need min 500ms beetween each post for good timestamp order
		setTimeout('input_disable(false)', 500);
		// If no error, we delete "req_message" value
		if (LastMsgInfo != 'error:chat')
			$('req_message').value = '';
		// Put focus in the input message box
		document.formulaire.req_message.focus();
		// Let the script know that we're not trying to post.
		posting = false; 
	}
	
	// Auto Scroll chatbox if is checked
	if ($('autoscroll').checked == true)
		$('chatbox').scrollTop = $('chatbox').scrollHeight;
}

Modifié par Florent V. (24 May 2009 - 19:20)
Heyoan a écrit :
si le name ne sert que pour ça :
document.formulaire.req_chat.focus();
il ne sert à rien puisque le champ req_chat n'existe pas !
Si, si, req_chat existe, tout en bas, juste avant le submit. Donc là, neeteex, tu peux modifier cette ligne en :
$('req_chat').focus();

Tu as une autre occurrence de document.formulaire ici :
document.formulaire.req_message.focus();
Et là, pour le coup, je ne trouve pas l'élément nommé req_message Smiley sweatdrop . Impossible, donc de te donner une correction...

Ta page est-elle en ligne ? Si oui donne l'url.
Petites remarques sur le code HTML:

- un FORM dans un élément INS, j'avoue ne pas comprendre...
- et un formulaire complet dans un H2, soit c'est du grand n'importe quoi, soit il y a une raison un peu spéciale genre la pleine lune et l'alignement de Venus et de Proxima dans le troisième décan. Smiley smile
marcv a écrit :
Et là, pour le coup, je ne trouve pas l'élément nommé req_message Smiley sweatdrop . Impossible, donc de te donner une correction...


Et ben pourtant ça m'a montré le chemin : brutalement et sans comprendre, j'ai remplacé tous les "req_message" du fichier js et du fichier php par des req_chat, ça à l'air de bien marcher : résolu on dirait...

C'est pas en ligne, mais ça en prend le chemin : merci !
Florent V. a écrit :
Petites remarques sur le code HTML:

- un FORM dans un élément INS, j'avoue ne pas comprendre...

Moi non plus Smiley biggol
C'est le W3C qui me l'a demandé...
W3C a écrit :
line 129 column 122 - Erreur: document type does not allow element "form" here; missing one of "object", "ins", "del", "map" start-tag


J'aurais du mettre autre chose ?

Florent V. a écrit :

- et un formulaire complet dans un H2, soit c'est du grand n'importe quoi, soit il y a une raison un peu spéciale genre la pleine lune et l'alignement de Venus et de Proxima dans le troisième décan. Smiley smile

Presque ! Smiley lol En fait ça permet de garder une certaine homogénéité du cadre. C'est pas de mon fait au départ, et y avait sûrement plus correct à faire avec une div spéciale ou autre, mais faut reconnaître que ça s'intègre mieux au design fluxBB. Y a pas, si je le vire c'est moins beau.

Du danger de coder l'oeuil rivé au validateur... Qui accepte n'importe quoi !
Smiley confused Mais bon, une fois que ça marche et que c'est valide, je vais pas chercher à tout nettoyer, je n'en ai ni le temps ni les compétences.
neeteex a écrit :
Mais bon, une fois que ça marche et que c'est valide, je vais pas chercher à tout nettoyer, je n'en ai ni le temps ni les compétences.

Il est vrai que c'est la validation qui compte, tandis que le fait de faire n'importe quoi n'est pas gênant. Tant que c'est du n'importe quoi valide. Smiley lol

Pour revenir sur les erreurs que tu as contournées:

1. Le «element FORM not allowed here» signifie que tu ne peux pas mettre un FORM (ou autre élément de type bloc) dans un H2. Théoriquement, un H2 ne devrait contenir que du texte ou des éléments de niveau en-ligne (SPAN par exemple). Cependant, il y a quelques éléments en HTML qui peuvent contenir à peu près n'importe quoi, et si tu en places un dans le H2, tu peux mettre ton FORM à l'intérieur. C'est ainsi que tu as pu faire H2 > INS > FORM. C'est valide, mais c'est n'importe quoi. D'un point de vue sémantique, ton formulaire n'est PAS un H2, et ne devrait PAS se trouver dans un H2.

2. En ce qui concerne la mise en forme... eh bien si tu veux une mise en forme du texte de ton formulaire proche de celle d'un H2, il suffit de modifier légèrement le CSS pour ça. Attribue une classe ou un identifiant à ton FORM (en ayant au préalable viré le H2 et le INS), et utilise cette classe ou cet identifiant pour appliquer les styles CSS de ton choix, éventuellement en t'inspirant des styles existants pour d'autres éléments.
Florent V. a écrit :

Il est vrai que c'est la validation qui compte, tandis que le fait de faire n'importe quoi n'est pas gênant. Tant que c'est du n'importe quoi valide. Smiley lol

C'est un peu ça... Tant que ça fait ce que je demande ! Là le cadre conserve la mise en page générale du style "fluxbb", et je n'ai toujours pas compris comment faire autrement, ce qui a sans doute conduit l'auteur initial de ce plugin à placer ce titre "h2" très surprenant.

Merci en tout cas pour les explications, je vais chercher un moyen de reproduire plus proprement ce comportement, mais c'est dur pour moi qui n'ai codé ni fluxbb, ni le plugin, de retrouver la façon de faire adaptée.

Apparemment, c'est difficile de rester valide sur un forum, celui sur lequel je poste ce message comptant pas moins de 37 erreurs à la lecture de ce fil ! Smiley eek
Attention, mauvaise manipulation de ma part, j'ai perdu le contenu de ton dernier message.


neeteex a écrit :
Apparemment, c'est difficile de rester valide sur un forum, celui sur lequel je poste ce message comptant pas moins de 37 erreurs à la lecture de ce fil ! Smiley eek

Un peu plus, même. Mais vu les erreurs retournées, qui m'ont l'air bien incohérentes, j'ai bien l'impression qu'on a réussi à faire buguer le validateur avec certains snippets de code avec des <script> échappés en &lt;script&gt; qu'il a l'air de mal prendre en compte.

neeteex a écrit :
comme le code de ce formulaire est dans un fichier inclus, il semble que je ne peux pas y créer de nouvelle class ou id

Je ne vois pas pourquoi. Tu as dû t'emmêler les pinceaux quelque part.
Florent V. a écrit :
Attention, mauvaise manipulation de ma part, j'ai perdu le contenu de ton dernier message.

?? pas compris où est le problème, donc pas de problème...


Florent V. a écrit :

Je ne vois pas pourquoi. Tu as dû t'emmêler les pinceaux quelque part.

Ben moi aussi je trouve ça bizarre, mais je crois pourtant pas être à côté de la plaque : j'ai une ligne de css qui défini :


.pun H2, #brdmenu {BACKGROUND-COLOR: #950002; COLOR: #FFF}


Or, dans le code que je reproduis ci-après, si je défini la première balise <p> sous forme
<p id="brdmenu">

(ce qui génère une erreur puisque l'id est déjà utilisée) ou que je le remplace par une balise <h2> j'obtiens exactement ce que je veux. Note que sémantiquement il me semble que c'est déjà nettement mieux que d'avoir mis le <h2> en amont du <form>, même si ce <h2> contient encore plusieurs <input>...

Par contre, si je fais quelque chose comme

<p id="comme_h2">


avec le css
.pun H2, #brdmenu, #comme_h2 {BACKGROUND-COLOR: #950002; COLOR: #FFF}


Et bien je n'ai pas le résultat escompté (idem avec <p class="comme_h2"> et .comme_h2). Bizarre ou il y a qq chose qui m'échappe ?

Code complet du <form> :

			<form style="display: inline" id="post" method="post" action="chatbox.php" onsubmit="send_message(); return false;" >
				<p>
					<input type="hidden" name="form_sent" value="1" />
					<input type="hidden" name="form_user" id="form_user" value="<?php echo (!$pun_user['is_guest']) ? pun_htmlspecialchars($pun_user['username']) : 'Guest'; ?>" />
					<?php
					if ($pun_user['is_guest']) {
						$email_label = ($pun_config['p_force_guest_email'] == '1') ? '<strong>'.$lang_common['E-mail'].':</strong>' : $lang_common['E-mail'];
						$email_form_name = ($pun_config['p_force_guest_email'] == '1') ? 'req_email' : 'email';
						
						if($email_form_name = 'req_email')
						echo "\t".'<input type="hidden" name="email" id="email" value="" />'."\n";
						else
						echo "\t".'<input type="hidden" name="req_email" id="req_email" value="" />'."\n";
					?>
					<strong><?php echo $lang_post['Guest name'] ?>:</strong> <input type="text" name="req_username" id="req_username" value="<?php if (isset($_POST['req_username'])) echo pun_htmlspecialchars($username); ?>" size="15" maxlength="25" tabindex="<?php echo $cur_index++ ?>" /> 
					<?php echo $email_label ?> <input type="text" name="<?php echo $email_form_name ?>" id="<?php echo $email_form_name ?>" value="<?php if (isset($_POST[$email_form_name])) echo pun_htmlspecialchars($email); ?>" size="15" maxlength="50" tabindex="<?php echo $cur_index++ ?>" /> 
					<?php
					}
					else {
					?>
						<input type="hidden" name="req_username" id="req_username" value="" /> 
						<input type="hidden" name="email" id="email" value="" /> 
						<input type="hidden" name="req_email" id="req_email" value="" /> 
					<?php
					}
					?>
					<strong><?php echo $lang_chatbox['Message'] ?>:</strong> <input type="text" name="req_chat"  id="req_chat" value="<?php if (isset($_POST['req_chat'])) echo pun_htmlspecialchars($message); ?>" size="35" maxlength="<?php echo $pun_config['cb_msg_maxlength'] ?>"  tabindex="<?php echo $cur_index++ ?>" /> 
					<input type="submit" name="submit" value="<?php echo $lang_chatbox['Btn Send'] ?>" accesskey="s" tabindex="<?php echo $cur_index++ ?>" />
					<script type="text/javascript">
					// <![CDATA[
					document.getElementById('post').req_chat.focus();
					// ]]>
					</script>
				</p>
			</form>

Modifié par neeteex (25 May 2009 - 20:23)
Ben en même temps tu ouvres un paragraphe avec <p> et tu le fermes avec </h2>. Smiley murf

PS : c'est quoi l'intérêt des majuscules dans le code css ?
Heyoan a écrit :
Ben en même temps tu ouvres un paragraphe avec <p> et tu le fermes avec </h2>. Smiley murf

Ooops désolé, c'est une modif de dernière minute sur le forum, car dans mon code il est resté calé sur h2 /h2

Heyoan a écrit :
PS : c'est quoi l'intérêt des majuscules dans le code css ?

Aucune idée, pose la question aux développeurs de fluxBB, je suppose qu'ils s'y retrouvent mieux comme ça, question de goût, moi j'évite de m'embêter avec les majuscules et les pluriels autant que faire se peut... Chacun ses "trucs"
Smiley cligne
Du coup un simple
form p {
	background-color: #950002;
	color: #fff;
}
devrait faire l'affaire...
Oui, ça devrait. Mais ça le fait pas, je comprend pas pourquoi, si ce n'est du fait que le code de ce formulaire est dans un fichier a part qui est inclus via une fonctionnalité propre à fluxBB que j'ignore et qui ne permet pas que le code css soit pris en compte pour des class, id ou même configurations (form p) ajoutées.

J'aimerais comprendre, mais ça n'est pas crucial non plus... Smiley ohwell
Alors il faudrait voir quel code html est généré exactement (ce qui d'ailleurs serait plus lisible que le code PHP) et quel est le code css. L'idéal étant une page en ligne.
Heyoan a écrit :
Alors il faudrait voir quel code html est généré exactement


C'est le plus étonnant : c'est sensiblement le même !

						<form style="display: inline;" id="post" method="post" action="chatbox.php" onsubmit="send_message(); return false;">
				<p>
					<input name="form_sent" value="1" type="hidden">
					<input name="form_user" id="form_user" value="Wall-e" type="hidden">

											<input name="req_username" id="req_username" value="" type="hidden"> 
						<input name="email" id="email" value="" type="hidden"> 
						<input name="req_email" id="req_email" value="" type="hidden"> 
										<strong>Message:</strong> <input name="req_chat" id="req_chat" value="" size="35" maxlength="300" tabindex="1" type="text"> 
					<input name="submit" value="Poster" accesskey="s" tabindex="2" type="submit">
					<script type="text/javascript">
					// <![CDATA[
					document.getElementById('post').req_chat.focus();
					// ]]>
					</script>
				</p>
			</form>
Florent V. a écrit :
Tu as dû t'emmêler les pinceaux quelque part.

Heuuuuuu désolé. Je me suis complêtement emmêlé, voire ligoté les poils à triple tour Smiley confused parce que j'avais pas pris la peine de vérifier que j'étais sur la bonne feuille de style Smiley bawling

Comme quoi, je m'applique Smiley murf à faire du fin et je rate le plus gros Smiley biggol

Donc merci de m'avoir obligé à mettre le nez dans ma boue (et je suis poli), ça m'aura permis de me souvenir qu'il n'y a pas de grand mystère là derrière, seulement des gros ratés. Et aussi qu'il faut que je fasse du ménage dans mes fichiers css...