Comment faire un formulaire en html ?

créé le .

Votre formulaire devra nécessaire démarrer par la balise <form name="formulaire" id="formulaire" method="POST" action="resultat.php" > Et devra se terminer par la balise </form > Bien évidemment, le nom, l'id et la page cible portera le nom de votre choix.

Configurer l'entête du formulaire html

method peut prendre 2 valeurs : POST ou GET. POST représente les valeurs transmises par le formulaire de manière invisible. GET envoie les valeurs dans l'url de la page. Vous obtiendrez alors quelque chose comme : http://nomdedomaine.com?var=1; action peut également avoir 2 types de valeurs. Soit le formulaire redirige vers une autre page ( comme dans l'exemple avec la page resultat.php). Soit le formulaire est redirigé vers la même page. Si c'est votre choix, alors votre page devra être au format php et non plus html. De plus, vous devrez mettre action="<?php echo $_SERVER['PHP_SELF']?>"

Champs de saisie html

Type de champs code rendu commentaires
Champs texte <input name="nom" id="nom" type="text" size="20" value="" maxlength="20" />
Champs mail <input name="email" id="email" type="email" size="20" value="" /> Ce champs vérifiera si c'est bien une adresse mail lors de la validation du formulaire.
Champs mot de passe ( password) <input name="mdp" id="mdp" type="password" size="20" value="abc" /> Ce champs permet de masquer son contenu.
Commentaires <textarea cols="20" row="6" id="txt" type="txt" ></textarea>
CGV <textarea cols="20" rows="6" readonly="readonly" disabled="disabled" > Respectez ceci</textarea> Dans cet espace, il n'est pas possible d'écrire. Il est en lecture seule.

Case à cocher

Type de case code rendu commentaires
Case à cocher de la meme famille loisir <input type="checkbox" name="loisir" id="loisir" value="Lecture" /> Lecture<br />
<input type="checkbox" name="loisir" id="loisir" value="sport" /> Sport<br />
<input type="checkbox" name="loisir" id="loisir" value="voyage" /> voyage<br />
<input type="checkbox" name="loisir" id="loisir" value="cinéma" /> cinéma<br />
Lecture
Sport
voyage
cinéma
La valeur name="loisir" permet de regrouper les cases à cocher par famille. Nous pourrons ainsi les regrouper à l'enregistrement.
Case à cocher de famille différentes <input type="checkbox" name="le" id="le" value="Lecture" /> Lecture<br />
<input type="checkbox" name="sp" id="sp" value="sport" /> Sport<br />
<input type="checkbox" name="vo" id="vo" value="voyage" /> voyage<br />
<input type="checkbox" name="ci" id="ci" value="cinéma" /> cinéma<br />
Lecture
Sport
voyage
cinéma
Bouton radio Civilité :<br /> <input type="radio" name="civ" id="civ" value="Mme" checked="checked" /> Mme<br /> <input type="radio" name="civ" id="civ" value="Mr" /> Mr<br /> Civilité :
Mme
Mr
La valeur name="civ" permet de regrouper
les boutons radio par famille.
La valeur checked="checked" indique la case cochée par défaut.

Liste de sélection

Type de champs code rendu commentaires
Ville : <select name="ville" id="ville" size="3" multiple="multiple" >
<option disabled="disabled" > Lille </option>
<option> Paris </option>
<option> Bordeaux </option>
</select>
Ville : Si vous souhaitez que toute la zone soit désactivée : Rajoutez dans le select l'information disabled="disabled".

Si vous ne souhaitez pas laisser un choix multiple :
Enlevez l'option multiple="multiple"
Liste de sélection avec options groupées Ville :<select name="ville" id="ville" size="3" > <optgroup label="FRANCE" > <option> Lille </option> <option> Paris </option> </optgroup> <optgroup label="ITALIE" > <option> venise </option> <option> rome </option> </optgroup> </select>< Ville : La valeur optgroup permet de regrouper des sous catégories dans les choix de la liste

la valeur size="3" affiche un trois champs avant de devoir scroller la liste.
Dans l'exemple présenté, on affiche 3 champs.

Coté utilisateur

Vous devez rajouter un champs dans l'entête du formulaire : enctype="multipart/form-data" Ensuite, il sera nécessaire de mettre un champs input de type file.

<form role="form" action="upload.php" method="POST" name="formimage" enctype="multipart/form-data" >
<input name="idgerant" type="hidden" id="idgerant" style="color:black;" value="<?php echo $id_gerant; ?>" />
	 <div class="form-group">
		 
		<label for="InputFile" >
			Téléchargez une photo
		</label>
		<input type="text" class="form-control" name="titre" id="titre" required placeholder="titre de la photo">
		<input type="text" class="form-control" name="description" id="description" placeholder="description de la photo">
		
		<input type="file" name="InputFile" id="InputFile" />
		<p class="help-block">
			Fichier (tous formats | max. 1 Mo) format jpg
		</p>
		<input type="hidden" name="MAX_FILE_SIZE" value="1048576" />
	</div>
	
	<button type="submit" class="btn btn-default">
		Submit
	</button>
</form>
rendu commentaires

Fichier (tous formats | max. 1 Mo) format jpg

A savoir :
  • Ce code représente un formulaire entier. Si vous souhaitez demander d'autres champs, pensez à bien mettre tous les champs entre les balises <form > et </form >
  • le champs <input type="hidden" name="MAX_FILE_SIZE" value="1048576" /> est nécessaire pour imposer une taille maximale à votre fichier.
  • C'est à la réception du fichier que nous controlerons si celui-ci est du bon format.

Coté réception du fichier par le serveur

<?php 
if(isset($_FILES['InputFile']))
{ 
	$titre=$_POST['titre'];
	$description=$_POST['description'];
	$dossier = 'photos/';
	$fichier = basename($_FILES['InputFile']['name']);
	$taille_maxi = 1048576;
	$taille = filesize($_FILES['InputFile']['tmp_name']);
	$extensions = array('.png', '.gif', '.jpg', '.jpeg');
	$extension = strrchr($_FILES['InputFile']['name'], '.'); 
	//Début des vérifications de sécurité...
	if(!in_array($extension, $extensions)) //Si l'extension n'est pas dans le tableau
	{ $erreur = 'Vous devez uploader un fichier de type png, gif, jpg, jpeg, txt ou doc...'; }
	if($taille>$taille_maxi)
	{ $erreur = 'Le fichier est trop gros...';	}
	if(!isset($erreur)) //S'il n'y a pas d'erreur, on upload
	{
		//On formate le nom du fichier ici...
		 $fichier=$titre.$extension;
		 $fichier = strtr($fichier, 
			  'ÀÁÂÃÄÅÇÈÉÊËÌÍÎÏÒÓÔÕÖÙÚÛÜÝàáâãäåçèéêëìíîïðòóôõöùúûüýÿ', 
			  'AAAAAACEEEEIIIIOOOOOUUUUYaaaaaaceeeeiiiioooooouuuuyy');
		 $fichier = preg_replace('/([^.a-z0-9]+)/i', '-', $fichier);
		 if(move_uploaded_file($_FILES['InputFile']['tmp_name'], $dossier . $fichier)) //Si la fonction renvoie TRUE, c'est que ça a fonctionné...
		 { echo 'Upload effectué avec succès ! 
Votre fiche est uploadé.
'; } else //Sinon (la fonction renvoie FALSE). { echo 'Echec de l\'upload !'; } } else { echo $erreur; } } ?>

Dans ce script, on choisit de reprendre le titre et l'extension du fichier. Cependant, une image est très souvent attachée à l'identifiant d'un utilisateur. Nous vous conseillons de rendre le nom du fichier unique. Une méthode assez efficace est d'ajouter une notion de date et heure au nom du fichier. Serait-il possible qu'à la même seconde, deux individus puissent envoyer un fichier avec le même titre. <?php $timer =time(); echo $timer; ?> donne ainsi 1510939947 Nous pourrons donc nommer le fichier par $fichier=$titre.timer.$extension;

Le bouton envoyer

Type de champs code rendu commentaires
bouton envoyer <input type="submit" name="sub" id="sub" value="envoyer" />
<input type="reset" name="an" id="an" value="annuler" />

Bouton dans la langue du navigateur <input type="submit" name="sub" id="sub" />
<input type="reset" name="an" id="an" />

Lorsque vous souhaitez créer un champs input destiné à un mot de passe, vous lui attribuez le type "password". Si vous souhaitez créer un champs destiné à mettre unn nouveau mot de passe, votre navigateur va systématiquement proposer l'ancien mot de passe. Afin d'éviter cette situation, il est alors nécessaire d'empecher le navigateur de mettre un mot de passe connu. En tant qu'informaticien, vous savez empêcher votre navigateur d'enregistrer le mot de passe. MAis il ne s'agit pas de votre compte mais de celui d'un utilisateur lambda. Vous devez donc vous assurer que l'ancien mot de passe enregistré dans le navigateur ne viendra pas nuire à l'enregistremennt d'un nouveau mot de passe via le backoffice. Une méthode rudimentaire consisterait à indiquer que le champs input n'est pas un password en y mettant un type "text". Mais il est possible de passer outre ce problème. Vous devez simplement rajouter une indication précise sur l'autocomplete . <input type="password" autocomplete="new-password" ... >

Un bouton qui ne valide pas un formulaire est donc un bouton avec une action qui lui est attribuée. Si vous ne précisez pas le type de bouton insérer dans un formulaire, il servira par défaut à le valider. Voici le code pour créer un bouton avec une action attribuée : <button id="close" type="button" onclick="mafonction();">bouton test </button > Il est ainsi nécessaire de lui attribuer le type "button". dans la partie "onclick", vous pourrez alors noter le nom d'une fonction javascript. Vous trouverez quelques fonctions sur la page :Tutos et astuces javascript



Vous notre contenu ?

Lisez toute l'info de Formaweb avec votre café


Laissez nous un commentaire...