Formulaire HTML5 compatible sur tout navigateur web

Bonjour,

- j'ai un formulaire en HTML 5 avec les nouveaux champs :

email, pour le champ email ;

tel, pour le champ téléphone ;

number, pour le numéro de carte et le code de sécurité ;

required, pour les champs à saisie obligatoire ;

placeholder, pour donner des indications à l'intérieur de certains champs ;

autofocus, pour permettre une focalisation sur le premier champ de saisie lorsque la page est chargée.


- je souhaite surtout avoir les messages d'erreurs lors de la validation du formulaire que se soit sur les récents navigateurs (donc avec les messages prédéfinis par HTML) et sur les anciens navigateurs avec des messages personnalisables en CSS.



J'ai trouvé un tutoriel pour mettre en place un formulaire en HTML 5 compatible tout navigateur (ancienne et nouvelle génération) :

http://www.useragentman.com/blog/2010/07/27/creating-cross-browser-html5-forms-now-using-modernizr-webforms2-and-html5widgets-2/


mais je ne saisie pas tout, quand je teste sur internet explorer 6 , 7 et 8, cela ne fonctionne pas


voila un bout de code de mon formulaire

<fieldset id="projet" >
			
			<legend>INFORMATIONS </legend>

		<div class="choise_container">
<label class="description" for="livraison">Livraison du bâtiment</label>
	<ul class="choise_description">

		<li> <input type="radio" id="cle_en_main" name="livraison"  value="Clé en main" required/>
		<label class="choice" for="cle_en_main">Clé en main</label>
		</li>

                <li> <input type="radio" id="hors_eau_hors_air" name="livraison"  value="Hors d'eau / Hors d'air" />
		<label class="choice" for="hors_eau_hors_air">Hors d'eau / Hors d'air</label>
		</li>
       </ul>



<label class="description" for="construction">Type de Construction </label>
	<select  id="construction" name="construction" required> 
		
               <option value="" >Sélectionnez une option</option>
               <option value="Construction de maison à neuf" >Construction de maison à neuf</option>
						
        </select>


<label class="description" for="materiaux">Type de matériaux à utiliser</label>
		<ul class="choise_description">

			<li> <input type="checkbox"id="materiaux_parpaing" name="materiaux[]"   value="Traditionnel (parpaing)" />
			<label class="choice" for="materiaux_parpaing">Traditionnel (parpaing)</label>
			</li>

			<li> <input type="checkbox" id="materiaux_brique" name="materiaux[]"  value="Brique" />
					<label class="choice" for="materiaux_brique">Brique</label>
			</li>
		</ul>	


<label class="description" for="vos_coordonnees">Vos Coordonnées</label><br>
		
				
	<ul class="choise_civilite">
				
				
		<li class="civilite_select">
			<label class="civilite" for="civilite">Civilité <span>*</span> :  </label>
			
				<select  id="civilite" name="civilite" required> 
					<option value="">  </option>
					<option value="Monsieur" >Monsieur</option>
					<option value="Madame" >Madame</option>
					<option value="Mademoielle" >Mademoielle</option>
				</select>
			</li>
			
		
			
		 <li>
		<label class="coordonnees" for="prenom">Prénom <span>*</span></label>
			<input type="text" id="prenom" name="prenom" value="<?php if(isset($_POST['prenom'])) echo $_POST['prenom'];?>" required/> 		
		</li> 
		
	
		<li> 
		<label class="coordonnees" for="nom">Nom <span>*</span></label>
			<input type="text" id="nom" name="nom" value="<?php if(isset($_POST['nom'])) echo $_POST['nom'];?>"  required/> 
		</li> 
		 
		
	
		<li class="civilite_entreprise"> 		
		<label class="entreprise" for="entreprise ">Entreprise</label>
		<input type="text" id="entreprise" name="entreprise"  value="<?php if(isset($_POST['entreprise'])) echo $_POST['entreprise'];?>"/> 
		</li>
	

		<li class="civilite_adresse"> 		
		<label class="adresse" for="adresse ">Adresse <span>*</span></label>
		<input type="text" id="adresse" name="adresse"  value="<?php if(isset($_POST['adresse'])) echo $_POST['adresse'];?>" required/> 
		</li>
			
		
		<li class="civilite_code_postal"> 
		<label class="coordonnees" for="code_postal ">Code postal <span>*</span></label>
		<input type="number" id="code_postal" name="code_postal"  value="<?php if(isset($_POST['code_postal'])) echo $_POST['code_postal'];?>" required/> 
		</li> 	
		<li> 
		<label class="coordonnees" for="ville ">Ville <span>*</span></label>
		<input type="text" id="ville" name="ville"  value="<?php if(isset($_POST['ville'])) echo $_POST['ville'];?>" required/> 
		</li> 


		<li class="civilite_pays"><label class="pays" for="pays">Pays <span>*</span></label>
			<input type="text" id="pays" name="pays" value="<?php if(isset($_POST['pays']))  echo $_POST['pays'];?>"  required/>
		</li>

		
		<li> <label class="email" for="email">Email <span>*</span></label>
			<input type="email" name="email" value="<?php if(isset($_POST['email']))  echo $_POST['email'];?>"  required/> 
		</li>
		
		
		
		<li> <label class="telephone" for="telephone">Téléphone <span>*</span></label>
			<input type="tel" name="telephone"  value="<?php if(isset($_POST['telephone']))  echo $_POST['telephone'];?>"  required/> 
		</li>
		
		
	</ul>			
	</div>
</fieldset >		 
		
		
		
					
		<p class="buttons">

				<label for="checking" class="screenReader"></label><input style="display:none" type="text" name="checking" id="checking" class="screenReader" value="<?php if(isset($_POST['checking']))  echo $_POST['checking'];?>" />

				<input type="hidden" name="soumettre" id="soumettre" value="true" /><button type="submit">ENVOYER</button>
			
			</p>
		
		</ul>	
		

</form>[/code]

Bonsoir,

Un formulaire bien écrit fonctionnera sur tous les navigateurs, ce sont les attributs qui le sont moins, comme "required" qui n'est pas reconnu sous IE8 et lt8 par exemple.

Le mieux reste de se tourner vers l'avenir et de les utiliser(required, placeholder, input type="number" etc..). Tu peux faire un code en JavaScript pour pallier ces problèmes et afficher du texte ou icons pour représenter les erreurs de champs...

je ne sais pas si je n'ai pas été clair, mais désolé tu m'apprend rien, mon formulaire fonctionne sur TOUS les navigateurs, je souhaite surtout afficher les messages d'erreurs prédéfinies par HTML5 et sur les anciens navigateurs les afficher grâce à javascript.

et aussi utiliser le

placeholder 

et

autofocus

pour l'instant j'utilise webform2, qui fonctionne parfaitement sauf que je n'ai pas les messages prédéfinies par HTML5 mais ceux de javascript