Recommandé
Contenu connexe
Tendances
Tendances (20)
Cours formulaire html - niveau débutant
- 2. <form> <p>Texte à l'intérieur du formulaire</p> </form> Création d’un formulaire
- 3. <form> <p> <label for="pseudo">Votre pseudo :</label> <input type="text" name="pseudo" id="pseudo" placeholder="Ex : Zozor" size="30" maxlength="10" /> </p> </form> Champ de saisie simple
- 4. <form method="post" action="traitement.php"> <p> <label for="pseudo">Votre pseudo :</label> <input type="text" name="pseudo" id="pseudo" /> <br /> <label for="pass">Votre mot de passe :</label> Champ de saisie simple
- 5. <form> <p> <label for="ameliorer"> Comment pensez-vous que je puisse améliorer mon site ? </label> <br /> Champ de saisie multiligne
- 6. <input type="email" /> <input type="url" /> <input type="tel" /> Champ de saisie enrichies
- 7. <input type="color" /> <input type="date" /> Champ de saisie enrichies
- 8. les éléments d’options • les cases à cocher • les zones d'options • les listes déroulantes
- 9. Les cases à cocher <form> <p> Cochez les aliments que vous aimez manger :<br /> <input type="checkbox" name="frites" id="frites" /> <label for=« frites">Frites</label> <br /> <input type="checkbox" name="steak" id="steak" /> <label for="steak">Steak haché</label><br />
- 10. Les zones d’options (boutons radio) <form> <p> Veuillez indiquer la tranche d'âge dans laquelle vous vous situez :<br /> <input type="radio" name="age" value="moins15" id="moins15" /> <label for="moins15">Moins de 15 ans</label><br /> <input type="radio" name="age" value="medium15-25" id="medium15-25" /> <label for="medium15-25">15-25 ans</label><br />
- 11. Les listes déroulantes <form> <p> <label for="pays">Dans quel pays habitez-vous ?</label><br /> <select name="pays" id="pays"> <option value="france">France</option> <option value="espagne">Espagne</option> <option value="italie">Italie</option>
- 12. Mise en forme des formulaires <form> <fieldset> <legend>Vos coordonnées</legend> <!-- Titre du fieldset --> </fieldset> </form> <input type="text" name="prenom" id="prenom" autofocus /> <input type="text" name="prenom" id="prenom" required /> Cadre et légende Colonne
- 13. Bouton envoi et page de traitement <form> <input type="submit" value="Envoyer" /> </form> <input type="text" name="prenom" id="prenom" autofocus /> <input type="text" name="prenom" id="prenom" required /> Bouton envoi autres attributs à connaitre
Notes de l'éditeur
- Formulaire -> ensemble d’élément HTML permettant d’interagir avec l’internaute. On utilise un formulaire pour demander des informations à l’internaute il est possible d’offrir une zone de saisi de texte, une liste de choix simple, multiple, des boutons cliquables. limite -> les informations saisies ne peuvent être traités que coté serveur (PHP, Python, etc)
- il suffit d’ajouter une balise form Notez qu'il faut obligatoirement mettre des balises de type block (comme <p> </p>) à l'intérieur de votre formulaire si vous souhaitez y faire figurer du texte.
- Pour insérer une zone de texte sur une ligne, on va utiliser la balise <input /> il faut donner un nom à votre zone de texte. Ce nom sert à identifier le champ Pour ajouter les libellés devant les champs de formulaires, on utilise la balise <label> lier le label au champ avec attribut « for » (même valeur que l’id du champ) autre attribut : size (taille du champ en nombre de caractère), maxlength (nombre de caractères maximum), placeholder (indication sur le type contenu à saisir. disparait au clic dans le champ)
- Pour créer un champ de type mot de passe, il suffit de changer le type « text » en « password » Les caractères saisies seront invisibles
- Pour créer un champ de texte multiligne, on utilise la balise textarea Pour changer la taille, En CSS : il suffit d'appliquer les propriétés CSS width et height au <textarea>. En HTML : on peut ajouter les attributs rows et cols à la balise <textarea> Le premier indique le nombre de lignes de texte qui peuvent être affichées simultanément, et le second le nombre de colonnes. il est possible de pré-remplir le <textarea> avec une valeur par défaut
- HTML5 apporte de nombreuses fonctionnalités nouvelles relatives aux formulaires. Tous les navigateurs ne connaissent pas encore ces zones de saisie enrichies. À leur place, les anciennes versions des navigateurs afficheront un simple champ texte (comme si on avait écrit type=« text ») Un champ e-mail mal renseigné est entouré de rouge dans Firefox (certains navigateurs mobiles affichent affichent un clavier adapté à la saisie d’e-mail) clavier adapté à la saisie d’URL • min : valeur minimale autorisée. • max : valeur maximale autorisée. • step : c'est le « pas » de déplacement. Si vous indiquez un pas de 2, le champ n'acceptera que des valeurs de 2 en 2 (par exemple 0, 2, 4, 6…).
- Le navigateur décide ensuite comment afficher le champ de recherche. Ajout loupe pour signifier que c'est un champ de recherche et mémorisation dernière recherche
- les éléments d’options permettent à l’utilisateur de faire un choix parmi plusieurs possibilités il en existe 3 principaux types : • les cases à cocher ; • les zones d'options ; • les listes déroulantes.
- N'oubliez pas de donner un nom différent à chaque case à cocher, cela vous permettra d'identifier plus tard lesquelles ont été cochées par le visiteur. faire en sorte qu'une case soit cochée par défaut avec l'attribut checked (valeur optionnelle)
- organisées en groupes. Les options d'un même groupe possèdent le même nom (name), mais chaque option doit avoir une valeur (value) différente. Essayez d'enlever les attributs name, vous verrez qu'il devient possible de sélectionner tous les éléments d'options. Or, ce n'est pas ce que l'on veut, c'est pour cela qu'on les « lie » entre eux en leur donnant un nom identique. L'attribut checked est, là aussi, disponible pour sélectionner une valeur par défaut.
- Les listes déroulantes sont un autre moyen élégant de faire un choix parmi plusieurs possibilités. balise <select> </select> qui indique le début et la fin de la liste déroulante. On ajoute l'attribut name à la balise pour donner un nom à la liste. + balises <option> </option> attribut value pour pouvoir identifier ce que le visiteur a choisi. Si vous voulez qu'une option soit sélectionnée par défaut, utilisez cette fois l'attribut selected : grouper vos options ->balise <optgroup> </optgroup>. Dans notre exemple, pourquoi ne pas séparer les pays en fonction de leur continent ?
- Regrouper les champs Si votre formulaire grossit et comporte beaucoup de champs, il peut être utile de les regrouper au sein de plusieurs balises <fieldset>. Chaque <fieldset> peut contenir une légende avec la balise <legend> Sélectionner automatiquement un champ -> autofocus Vous pouvez faire en sorte qu'un champ soit obligatoire en lui donnant l'attribut required. On dispose de pseudo-formats en CSS pour changer le style des éléments requis (:required) et invalides (:invalid). N'oubliez pas non plus que vous disposez du pseudo-format :focus pour changer l'apparence d'un champ lorsque le curseur se trouve à l'intérieur.
- balise <input /> vient à notre secours. Elle existe en quatre versions : • type="submit" : le principal bouton d'envoi de formulaire. visiteur sera conduit à la page indiquée dans l'attribut action du formulaire. • type="reset" : remise à zéro du formulaire. • type="image" : équivalent du bouton submit, présenté cette fois sous forme d'image. Rajoutez l'attribut src pour indiquer l'URL de l’image. • type="button" : bouton générique, qui n'aura (par défaut) aucun effet. En général, ce bouton est géré en JavaScript pour exécuter des actions sur la page. Nous ne l'utiliserons pas ici. Lorsque vous cliquez sur le bouton « Envoyer », le formulaire vous amène alors à la page indiquée dans l'attribut action. Le problème, c'est que vous ne pouvez pas créer cette page seulement en HTML. Il est nécessaire d'apprendre un nouveau langage, comme le PHP, pour pouvoir « récupérer » les informations saisies et décider quoi en faire.