Les formulaires


j’ai commencer par une image d’un formulaire, pour vous faire attiré que ce tutoriel va être long :p , vu que nous allons vous présentez plein d’objet qui permettent de réaliser un formulaire comme celui de l’image en haut .

Vous êtes prêt, allons y !!
Formulaire !? C’est quoi !?
Vous venez de le voir sur l’image, pour quoi me posez-vous cette question !?

Un formulaire est un ensemble d’objet, qui permettent a un visiteur de site web, de saisir des donnée. Voila tous simplement, maintenant nous allons voir ces objet.
Pour quoi donnée la main à un visiteur de saisir des données !?
Voila une bonne question, les donnée que ce visiteur va saisir, peuvent êtres envoyer à un serveur, grâce a des technologies qui sont dédier a cet usage, pour les traiter, par exemple si ce visiteur trouve un formulaire d’inscription, lorsqu’il rempli tous les champs du formulaire et appuyé sur le bouton envoyer, le serveur va prendre en considération ces donnée, et il va les enregistré. Nous y reviendrons sur la notion de serveur et stockage de donnée ainsi que le traitement de formulaire coté serveur dans le tutoriel sur le php. Pas la peine de me dir c’est quoi le PHP, Un tutoriel complet est en cour de rédaction, donc maitrisé avant le HTML et CSS pour passé au PHP.

La balise FORM

La balise form, est le point d’entrée au formulaire, c’est elle qui dit au navigateur que ce qui est entre sa balise ouvrante et sa balise fermante est un formulaire, la syntaxe générale d’un formulaire est la suivante :
	<form>
		mette les objet ici.
	</form>

Les Objet

Nous avons vu au chapitre concernant les balises et les attributs, un type de balise permettant de créer un champ de saisie de texte (un simple et l’autre c’est pour les password que nous définit grâce à l’attribut type= password), j’espère que vous vous rappeler de sa, ce champs de saisie de texte est un objet de formulaire, on a vu l’objet « input »

Voici pour ceux qui ne se rappel pas :
	<form>
		Saisir votre nom : <input type=text /><br />
		Saisir votre mot de passe : <input type=password />
	</form>
Sur votre navigateur vous allez avoir ceci :
Saisir votre nom :
Saisir votre mot de passe :

Input n'est bien sûr pas le seul objet que nous pouvons définir, il existe plusieurs autres.

On trouve :

Les boutons
Les bouton sont comme le montre la figure suivante :

Qu’on déclare avec la syntaxe suivante :
	<input type="button" />
C’est pas beau, je sais et ce n’est pas vraiment significatif, donnons sens au bouton comme suit :
	<input type="button" value="envoyer" />
Ce que vous devez avoir sur votre navigateur doit ressembler à ceci :

C’est plus significatif vous le pensez pas !!

Les labels :
Aucune capture d'écran n'est nécessaire vu que un label permet d’afficher le texte qu’elle englobe sur le navigateur
L'utilisation de la balise <label> n'est pas obligatoire mais je la recommande fortement. pour le cas de case à cocher elle permet d'associer le libellé à la case à cocher qui a le même id que son attribut for, ce qui permet de cliquer sur le libellé pour cocher la case.

Les zone de texte
voici une capture d'écran :

Le code permettant de définir cette objet est le suivant :
	<textarea rows="10" cols="50">
	</textarea>
l'objet en lui même s'appelle textarea (zone de texte en français), et se déclare avec la balise <textarea>, l'attribut rows définit la heuteur de notre objet en nombre de ligne, ici j'ai définit 10 lignes, chnager le nombre de ligne pour voir comment sa fonctionne, et l'attribut cols définit la largeur de notre textarea, qui est ici de 50 colonnes.

Case à cocher :

utile pour sélectionnée plusieurs choix,
le code permettant d'obtenir l'image en haut est le suivant :
	<input type="checkbox" name="case" id="case" /> <label for="case">Tamazight</label>
<input type="checkbox" name="case" id="case" /> <label for="case">Arabe</label>
<input type="checkbox" name="case" id="case" /> <label for="case">Français</label>
<input type="checkbox" name="case" id="case" /> <label for="case">Anglais</label>
<input type="checkbox" name="case" id="case" /> <label for="case">Russe</label>
<input type="checkbox" name="case" id="case" /> <label for="case">Japonais</label>
pour définir une case cocher par défaut on utilise l'attribut checked="checked"

	<input type="checkbox" name="case" checked="checked" />

Bouton radio :

le code permettant d'avoir ceci est comme suit :
	<label>sexe : </label>
		<input type="radio" name="sexe" />Masculin
		<input type="radio" name="sexe" />Féminin
		<input type="radio" name="sexe" />Les deux
généralement utilise pour sélectionnée un seul choix, tel que Masculin ou Féminin,
par défaut, on peut sélectioné plusieurs choix. pour le rendre impossible de sélectionner deux choix à la fois, on attribut le même nom à l'attribut name .

Les menus déroulants :

le code permettant d'obtenir cet objet est :
	<label>Pays : </label>
	<select name="pays">
		<option>ALGERIE</option>
		<option>FRANCE</option>
		<option>MAROC</option>
		<option>TUNISIE</option>
		<option>LIBIE</option>
		<option>SAHARA OCCIDENTALE</option>
		<option>MOURITANI</option>
	</select>
pour choisir un sur plusieurs choix,

Les listes :

Tout comme les menu déroulante, mais on peut regrouper un sensemble de choix selon une catégorie, la balise permetante de définir cela est la balise select avec le menu <optgroup>,
voici le code, si vous voulez le tester :
	<select> 
		<optgroup label="Afrique"> 
		  <option>Algérie</option> 
		  <option>Sud afrique</option> 
		  <option>sahara occidentale</option> 
		  <option>tunisie</option> 
	   </optgroup> 
	   <optgroup label="Europe"> 
		  <option>France</option> 
		  <option>Espagne</option> 
		  <option>Angleterre</option> 
	   </optgroup> 
	</select> 
Explorateurs de fichiers :

qui sert à joindre un fichier,

Un champ caché :
On ne peut pas faire de capture d'écran de representation de tag sur le navigateur, car c'est un composant caché, voici comment il se déclare :
	<input type="hidden" />
qui sert a contenir des informations sur une page donnée, pour les utilisé après par exemples, sont très utile.
Je vais vous vous faire un formulaire qui va contenir un maximum des champs cité en haut avec des commentaires.

Commentaire !?

Les commentaires

un commentaire est du texte qu’on écrit dans le code source de notre page web, mais qui ne sera pas affiché sur le navigateur, il sert juste les webmaster qui développe les site web, pour une question de régularisation, imaginer un code de 100 000 ligne, certainement après une année vous aller oublier tous ce que vous avez faite dans ce code, les commentaire vont servir a écrire le sens d’un bout de code, à la lecture de ce commentaire, vous saurez directement ce que le bout de code fait.
Un commentaire en HTML à la forme suivant :
< !-- texte-->
	<form>
		<table>
			<tr>
				<!--champs de saisie de texte-->
				<td><label>Nom : </label></td>
				<td><input type="text" /></td>
			</tr>
			<tr>
				<td><label>Prenom : </label></td>
				<td><input type="text" /></td>
			</tr>
			<tr>
				<!--champs de saisie de mot de passe-->
				<td><label>mot de passe : </label></td>
				<td><input type="password" /></td>
			</tr>
			<tr>
				<!--button radio pour choisir un seul choix-->
				<td><label>sexe : </label></td>
				<td>
					<input type="radio" name="sexe" checked="checked" /><label>Masculin</label>
					<input type="radio" name="sexe" /><label>Féminin</label>
					<input type="radio" name="sexe" /><label>Les deux</label>
				</td>
			</tr>
			<tr>
				<!--menu déroulant ou liste déroulante-->
				<td><label>Pays : </label></td>
				<td>
					<select>
						<option>ALGERIE</option>
						<option>FRANCE</option>
						<option>MAROC</option>
						<option>TUNISIE</option>
						<option>LIBIE</option>
						<option>Sahara Occidentale</option>
						<option>MAURITANIE</option>
					</select>
				</td>
			</tr>
			<tr>
				<td></td>
				<td>
					<select> 
						<optgroup label="Afrique"> 
						  <option>Algérie</option> 
						  <option>Sud afrique</option> 
						  <option>Sahara occidentale</option> 
						  <option>Tunisie</option>
						  <option>Mauritanie</option> 
					   </optgroup> 
					   <optgroup label="Europe"> 
						  <option>France</option> 
						  <option>Espagne</option> 
						  <option>Angleterre</option> 
					   </optgroup> 
					</select>
				</td>
			</tr>
			<tr>
				<td><label>Langue parlé</label></td>
				<td>
					<input type="checkbox" name="case" id="case" /> <label for="case">Tamazight</label>
					<input type="checkbox" name="case" id="case" /> <label for="case">Arabe</label>
					<input type="checkbox" name="case" id="case" /> <label for="case">Français</label>
					<input type="checkbox" name="case" id="case" /> <label for="case">Anglais</label>
					<input type="checkbox" name="case" id="case" /> <label for="case">Russe<</label>
					<input type="checkbox" name="case" id="case" /> <label for="case">Japonais<</label>
				</td>
			</tr>
			ⵖtr>
				<!--boutons-->
				<td><input type="submit" value="Envoyer" /></td>
				<td><input type="reset" value="Annuler" /></td>
			</tr>
		</table>					
	</form>
Avec ce code, vous aurez sur votre navigateur quelque chose qui ressemble a ceci ;

J'avoue que je ne suis pas un bon designer, mais ce n'est qu'à titre d'exemple, pour le bien perfectionné, il faut utiliser le CSS, que vous pouvez lire des maintenant le tutoriel lui concernant, que vous trouverai ici

pour ce qu'est de la balise <table>, sa nous sert à définir des tableaux, telque <tr> délimite les lignes, et <td> les colonnes, pour plus de detail, veuillez lire ce cours sur les tableaux;