Les formulaires sont parmi les outils les plus importants utilisés par un webmaster pour récolter d'importantes informations sur un utilisateur internet, de l'information tel qu'un e-mail, nom, adresse, téléphone ou n'importe quelle autre sorte d'information.
En cas de besoin l'information peut même être stockée dans un fichier, vous pouvez faire des statistiques, formulaires d'inscription ou de souscription à l'information présentée dans votre page internet, et pleins d'autres.
Avant de rentrer dans les détails, nous devons exposer un peu les bases d'un formulaire. Les champs de texte ont quelques attributs qui doivent être mentionnés pour commencer:
html<form method="post" action="mailto:votreemail@email.com">
Name: <input type="text" size="10" maxlength="40" name="name" /><br />
Password: <input type="password" size="10" maxlength="10" name="password" />
</form>N'UTILISEZ PAS ce code. Les données du formulaire ne seront pas encryptées et ne seront pas sûres en terme de sécurité.
Ajoutons le bouton d'envoi à présent. Généralement, le bouton d'envoi doit être le dernier et avoir l'attribut nommé 'Send', 'Submit', ou quelque chose comme ça.
Nous devons aussi spécifier une destination pour les données entrées dans le formulaire, tout comme le mode de transfert. Cela peut être fait en ajoutant les attributs de formulaires suivants:
html<form method="post" action="mailto:votreemail@email.com">.
Name: <input type="text" size="10" maxlength="40" name="name" /><br />
Password: <input type="password" size="10" maxlength="10" name="password" /><br />
<input type="submit" value="Send" />
</form>Changez simplement ladresse e-mail en une existante pour que cela fonctionne!
Les boutons radio sont très populaires, utiles et faciles à utiliser. L'exemple le plus utilisé serait une question avec plus d'un choix de réponses. Les attributs que vous devez connaitre sont les suivants:
html<form method="post" action="mailto:votreemail@email.com">
<p>Quel type de chaussures vous portez ?</p>
<label>Color:</label> <br />
<input type="radio" name="color" value="sombre" /> Sombres <br />
<input type="radio" name="color" value="clair" /> Claires <br />
<label>Size:</label> <br />
<input type="radio" name="size" value="petite" /> Petites <br />
<input type="radio" name="size" value="moyenne" /> Moyennes <br />
<input type="radio" name="size" value="grande" /> Grandes <br />
<input type="submit" value="M'envoyer un Email" />
</form>Si vous remplacez l'adresse email par la votre vous recevrez un email avec: 'size=(choisir) color=(choisir)'.
En utilisant les cases à cocher l'utilisateur à la possibilité de choisir une, deux ou plus, variantes de réponses. Les attributs name et value sont utilisés de la même maniere que pour le bouton radio.
html<form method="post" action="mailto:votreemail@email.com">
<p>Quelle couleur de chaussures vous préférez?</p>
<input type="checkbox" name="shoes" value="noires" /> Simple Noires <br/>
<input type="checkbox" name="shoes" value="blanches" /> Simple Blanches <br/>
<input type="checkbox" name="shoes" value="grises" /> Nuances de gris <br/>
<input type="checkbox" name="shoes" value="noires&blanches" /> Noires et blanches<br/>
<input type="submit" value="M'envoyer un Email" />
</form>Un autre modèle de formulaire de liste est le suivant, dans lequel cas l'utilisateur sélectionne une certaine ligne qui sera envoyée comme l'option choisie.
html<form method="post" action="mailto:votreemail@email.com">
<p>Préférences musicales</p>
<select multiple name="musique" size="4">
<option value="emo" selected>Emo</option>
<option value="metal/rock" >Metal/Rock</option>
<option value="hiphop" >Hip Hop</option>
<option value="ska" >Ska</option>
<option value="jazz" >Jazz</option>
<option value="country" >Country</option>
<option value="classique" >Classique</option>
<option value="alternative" >Alternative</option>
<option value="retro" >Retro</option>
<option value="techno" >Techno</option>
</select><br />
<input type="submit" value="M'envoyer un Email" />
</form>Un autre modèle de formulaire est le menu 'déroulant'. Cela sera affiché comme un champ, qui montrera ensuite une liste lorsqu'un clic aura été effectué dessus.
html<form method="post" action="mailto:votreemail@email.com">
<p>Niveau d'éducation?</p>
<select name="education">
<option>Choisir</option>
<option>Lycée </option>
<option>College</option>
<option>Doctorat</option>
</select><br />
<input type="submit" value="M'envoyer un Email" />
</form>Premièrement il doit être mentionné que ce formulaire est seulement l'interface, la partie visible avec lequel l'utilisateur sera capable de travailler. Pour créer un formulaire d'upload complet des connaissances et compétences en PHP et PERL, sans mentionner javascript, sont requises.
Un formulaire d'upload est composé de plusieurs parties. Nous commencerons par établir la taille du fichier qui sera uploadé. Cela est fait en utilisant un champ caché. Après cela, nous créérons le champ dans lequel l'utilisateur sera capable d'écrire l'adresse du fichier ou sera capable de le rechercher dans une fenêtre 'explorateur'.
html<input type="hidden" name="MAX_FILE_SIZE" value="100" /> <input name="file" type="file" />Généralement, les zones de texte sont utilisées pour envoyer des commentaires. Les blogs et forums sont les pages internet principales qui utilisent ce genre d'options. Néanmoins, il y a beaucoup de sites qui utilisent ces zones de texte pour découvrir l'opinion de leur utilisateur sur un certain sujet.
Pour créer une zone de texte nous spécifierons tout d'abord les attributs rows et cols à l'intérieur de la balise <textarea> . 'Rows' définira la hauteur du champ, et 'cols' sa longueur, en terme de caractères. Dans l'exemple suivant il y a 5 lignes de 20 caractères chacun. Aussi, nous devons spécifier les attributs de la balise warp, ceux-ci étant:
html<form method="post" action="mailto:votreemail@email.com">
<textarea rows="5" cols="20" wrap="physique" name="commentaires">Ecrivez un commentaire</textarea><br />
<input type="submit" value="M'envoyer un Email" />
</form>Aussi, il est important de mentionner que tout ce que vous écrirez sera montré à l'intérieur de la zone de texte.