5546 sujets

Sémantique web et HTML

Xhmtl, form et name

Bonjour,
Je suis sur un projet de site à réaliser en xhmtl 1.0 strict, et j'ai un petit problème avec la validation w3c :

there is no attribute "name".

<form name="formulaire" action="">


voici le html :

<!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">
<head>
	<link rel="stylesheet" type="text/css" href="style.css" />
	<script type="text/javascript" src="javascript.js"></script>
	
	<title>Projet Programmation Internet 2007</title>
</head>

<body onload = "document.formulaire.login.focus();">



<form name="formulaire" action="">

<div id="separation"></div>
	
	<div id="Corps">
		<div id="commentaire"></div>
		<p></p>
		
		<div id="nouveau_com" >
			<table>
				<tr>
					<td>Login : </td>
					<td> <input type="text" name="login" onblur="verif_login(this)" /> </td>
					<td id="ok"> </td>
					<td id="erreur1"> </td>
				</tr>
				
				<tr>
					<td id="nb_mot">Votre commentaire  [decu]250 caractères maximum)</td>
					<td><textarea name="text_com" cols="50%" rows="5%" onkeyup="verif_nb_mots(this)" onblur="verif_com(this)"></textarea></td>
					<td id="ok2"> </td>
					<td id="erreur2"> </td>
				</tr>
				
				<tr>
					<td> <input type="button" name="valider" value="valider" onclick="ajoutcom(this)" /> </td>
				</tr>
			</table>		
		</div>
				
	</div> 
</form>
	


</body>
</html>


et le javascript utilisé :

	function verif_login(formulaire)
	{
			if(document.formulaire.login.value.length < 2)
			{	
				document.getElementById('erreur1').innerHTML = '<div id="erreur">Login incorrect</div>';
				document.formulaire.login.focus();
				document.getElementById('ok').innerHTML = '<img src="images/bad.bmp" alt="bad">';
				return false;
			}
			else
			{
				document.getElementById('erreur1').innerHTML = '';
				document.getElementById('ok').innerHTML = '<img src="images/ok.bmp" alt="ok">';
				return true;
			}
	}

	function verif_com(formulaire)
	{
	
		var com = document.formulaire.text_com.value;
		var a;
		for(a=0; a < com.length; a++)
		{
			if(com[a] == '<')
			{
				if(! (com[a+1] == ' ' || (com[a+1] == 'b' && com[a+2] == '>' ) || (com[a+1] == '/' && com[a+2] == 'b' && com[a+3] == '>') ) )
				{
					document.getElementById('erreur2').innerHTML = "Code HTML interdit dans les commentaires";
					document.formulaire.text_com.focus();
					document.getElementById('ok2').innerHTML = '<img src="images/bad.bmp" alt="bad">';
					return false;
				}
			}
			
		}
	
		if(com.length < 5 || com.length > 250)
		{
			document.getElementById('erreur2').innerHTML = '<div id="erreur">Le commentaire doit avoir au moins 5 caractères et moins de 250 caractères</div>';
			document.formulaire.text_com.focus();
			document.getElementById('ok2').innerHTML = '<img src="images/bad.bmp" alt="bad">';
			return false;
		}
		
		
		{	
			document.getElementById('erreur2').innerHTML = '';
			document.getElementById('ok2').innerHTML = '<img src="images/ok.bmp" alt="ok">';
			return true;
		}
	}

	function verif_nb_mots(formulaire)
	{
		var a = 250 - document.formulaire.text_com.value.length;
		
		document.getElementById('nb_mot').innerHTML = 'Votre commentaire  [decu]' + a + 'mots maximum)';
	}
		
		
	function ajoutcom(formulaire)
	{
	
		if(verif_login()==true && verif_com()==true)
		{
			var login = document.formulaire.login.value;
			var com = document.formulaire.text_com.value;
			
			document.getElementById('ok').innerHTML = "";
			document.getElementById('ok2').innerHTML = "";
			document.getElementById('erreur1').innerHTML = "";
			document.getElementById('erreur2').innerHTML = "";
			document.formulaire.login.value = "";
			document.formulaire.text_com.value= "";
			
			var date = new Date();
			
				
			nouveau='<div id="commentaire_ajoute"> <table> <tr> <td colspan="2"><b> Commentaire ajouté le ' + date.getDate() + '/' + date.getMonth() + '/' + date.getFullYear() + ' à ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds() + ' par  ' + login + ' : </b></td></tr>' + '<tr> <td>' + com + '</td> </tr> </table> </div>';
			
			document.getElementById('commentaire').innerHTML += '<p></p>' + nouveau;
			document.formulaire.login.focus();
		}
		
	}


quelqu'un aurait-il une idée pour m'aider ?
Modifié par zatamos (19 Apr 2007 - 20:10)
Modérateur
Salut,

oui, mettre un id à la place de name. Smiley biggrin

(... et tu changes le JS en conséquence. -> getElementById)

Tu peux ne rien mettre aussi auquel cas, tu sélectionnes le formulaire via getElementsByTagName.
Modifié par koala64 (19 Apr 2007 - 22:44)
a écrit :

(... et tu changes le JS en conséquence. -> getElementById)

Normalement, pas besoin. Par contre, il faut impérativement utiliser la syntaxe recommandée pour l'accès aux éléments de formulaire, et ceci est valable même si tu conserves l'attribut name :
document.formulaire.champ => document.forms['formulaire'].elements['champ']
Modérateur
Salut,

QuentinC a écrit :

(... et tu changes le JS en conséquence. -> getElementById)

Normalement, pas besoin. Par contre, il faut impérativement utiliser la syntaxe recommandée pour l'accès aux éléments de formulaire, et ceci est valable même si tu conserves l'attribut name :
document.formulaire.champ => document.forms['formulaire'].elements['champ']S'il veut coder en xhtml1.0 strict, name est invalide sur form donc faut bien l'enlever quand même. On peut mettre cet attribut sur les champs mais pas le formulaire. Ceci mis à part, tu fais bien de préciser qu'il vaut mieux passer forms et elements ; ça permet de ne pas changer le code JS lorsqu'on change de DTD donc c'est préférable oui. (mais pourquoi dis-tu impérativement ? Les syntaxes DOM posent-elles problème ? Smiley smile )

Drone a écrit :
Si je ne m'abuse, le "onload" dans ton <body> c'est pas trop recommandé non plus.
C'est mieux d'éviter le onload en effet (voir ici). De la même manière, la prise de focus au chargement n'est pas vraiment recommandée. Dans le cas d'une connexion lente, ça peut perturber l'utilisateur. (Il commence à remplir un champ et d'un coup, le focus est donné à un autre)

Et puis côté syntaxe xhtml du formulaire, ce serait bien de lire cet article, zatamos Smiley cligne
Modifié par koala64 (20 Apr 2007 - 10:31)
a écrit :
name est invalide sur form donc faut bien l'enlever quand même


effectivement, en mettant comme ça ça passe mieux au validateur :
<form id="formulaire" action="">


du coup j'ai aussi modifier légerement le html et le js :


 <!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">
<head>
	<link rel="stylesheet" type="text/css" href="style.css" />
	<script type="text/javascript" src="javascript.js">
</script>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Projet Programmation Internet 2007</title>

</head>


<body>

<form id="formulaire" action="">

	<div id="Corps">
		<div id="commentaire"></div>
		<p></p>
		
		<div id="nouveau_com" >
			<table>
				<tr>
					<td>Login : </td>
					<td> <input type="text" name="login" onblur="verif_login(login)"/> </td>
					<td id="ok1"> </td>
					<td id="erreur1"> </td>
				</tr>
				
				<tr>
					<td id="entree_com">Votre commentaire : <div id="nb_m">(5 caractères minimum)</div> </td>
					<td> <textarea name="text_com" cols="50%" rows="5%" onkeyup="verif_nb_mots(text_com)" onblur="verif_com(text_com)"></textarea></td>
					<td id="ok2"> </td>
					<td id="erreur2"> </td>
				</tr>
				
				<tr>
					<td> <input type="button" name="valider" value="valider" onclick="ajoutcom(login,text_com)" /> </td>
				</tr>
			</table>		
		</div>
				
	</div> 
</form>


et le js :

function verif_login(login)
	{
			
			if(login.value.length < 2)
			{	
				document.getElementById('erreur1').innerHTML = '<div id="erreur">Login incorrect</div>';
				login.focus();
				document.getElementById('ok1').innerHTML = '<img src="images/bad.bmp" alt="bad">';
				return false;
			}
			else
			{
				document.getElementById('erreur1').innerHTML = '';
				document.getElementById('ok1').innerHTML = '<img src="images/ok.bmp" alt="ok">';
				return true;
			}
	}

	function verif_com(com)
	{
	
		var a;
		chaine='';	//la variable chaine est déclarée en variable globale
		for(a=0; a < com.value.length; a++)
		{
			if(com.value.charAt(a) == '<' || com.value.charAt(a) == '>')
			{
				{
					document.getElementById('erreur2').innerHTML = "Code HTML interdit dans les commentaires";
					com.focus();
					document.getElementById('ok2').innerHTML = '<img src="images/bad.bmp" alt="bad">';
					return false;
				}
			}
			else
			{
				if(com.value.charAt(a) == '[')
				{
					chaine += '<';
				}
				else
				{
					if(com.value.charAt(a) == ']')
					{
						chaine += '>';
					}
					else
						chaine += com.value.charAt(a);
				}
			}
		}
		
		if(verif_nb_mots(com) == false)
		{
			document.getElementById('erreur2').innerHTML = '<div id="erreur">Le commentaire doit avoir au moins 5 caractères et moins de 250 caractères</div>';
			com.focus();
			document.getElementById('ok2').innerHTML = '<img src="images/bad.bmp" alt="bad">';
			return false;
		}
		
		
		{	
			document.getElementById('erreur2').innerHTML = '';
			document.getElementById('ok2').innerHTML = '<img src="images/ok.bmp" alt="ok">';
			return true;
		}
	}

	
	function verif_nb_mots(com)
	{
		if(com.value.length < 5)
		{
			var a = 5 - com.value.length;
			document.getElementById('nb_m').innerHTML = '(' + a + ' caractères minimum)'; 
			return false;
		}
		else
			if(com.value.length <= 250)
			{
				var a = 250 - com.value.length;
				document.getElementById('nb_m').innerHTML = '(' + a + ' caractères maximum)'; 
				return true;
			}
			else
				document.getElementById('nb_m').innerHTML = '(nombre maximum de caractères atteint)'; 
		return false;
	}
		
		
	function ajoutcom(login,com)
	{
		
		if(verif_login(login)==true && verif_com(com)==true)
		{
			
			document.getElementById('ok1').innerHTML = "";
			document.getElementById('ok2').innerHTML = "";
			document.getElementById('erreur1').innerHTML = "";
			document.getElementById('erreur2').innerHTML = "";

			com.value = chaine;
			var date = new Date();
					
			nouveau='<div id="commentaire_ajoute"> <table> <tr> <td colspan="2"><b> Commentaire ajouté le ' + date.getDate() + '/' + date.getMonth() + '/' + date.getFullYear() + ' à ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds() + ' par  ' + login.value + ' : </b></td></tr>' + '<tr> <td>' + com.value + '</td> </tr> </table> </div>';
			
			document.getElementById('commentaire').innerHTML += '<p></p>' + nouveau;
			login.focus();
			login.value="";
			com.value="";
			
		}
		
	}


a écrit :

C'est mieux d'éviter le onload en effet (voir ici). De la même manière, la prise de focus au chargement n'est pas vraiment recommandée. Dans le cas d'une connexion lente, ça peut perturber l'utilisateur. (Il commence à remplir un champ et d'un coup, le focus est donné à un autre)


effectivement, j'avais pas pensé à ca ^^

en tout cas merci pour votre aide Smiley biggrin
Sujet clos
Aller à