All posts tagged button

Sep

PHP MySQL – Formulaires

Categories: PHP MySQL

Tags: button, form, formulaires, input, mysql, php

Plusieurs éléments HTML permettent de créer des formulaires, qui peuvent être transmis à des pages PHP ou envoyés par e-mail.

Balise	Signification
<form name="nom" action="traitement.php" method="post"> … </form>	Formulaire
<fieldset>contenu</fieldset>	Groupe d’options permettant de rassembler plusieurs champs
<legend>texte</legend>	Légende affichée dans un élément fieldset
<label>texte</label>	Simple légende textuelle
<input type="text" name="Nom" id="identifiant" value="valeur">	Zone de texte
<input type="button" name="Nom" id="identifiant" value="Légende du bouton">	Bouton
<input type="image" src="image.jpg" id="identifiant">	Un bouton contenant une image
<input type="password" name="Nom" id="identifiant" value="valeur par défaut">	Zone de saisie d’un mot de passe
<input type="checkbox" name="Nom" id="identifiant" value="Valeur">	Case à cocher
<input type="radio" name="Nom" id="identifiant" value="Valeur">	Bouton radio
<input type="hidden" name="Nom" id="identifiant" value="valeur">	Champ caché. Bien qu’il n’apparaisse pas dans le formulaire, son contenu est envoyé au serveur lorsque l’utilisateur clique sur le bouton Submit
<input type="submit" name="Nom" id="identifiant" value="Texte affiché sur le bouton">	Bouton d’envoi, pour envoyer les données du formulaire au serveur
<input type="reset" name="Nom" id="identifiant" value="Texte affiché sur le bouton">	Bouton de réinitialisation du formulaire
<input type="email" name="Nom" id="identifiant">	Champ de saisie spécialisé pour recevoir des adresses e-mail
<input type="url" name="Nom" id="identifiant">	Champ de saisie spécialisé pour recevoir des adresses URL
<input type="file" name="Nom" id="identifiant">	Fichier local
<textarea cols="Nombre colonnes" rows="Nombre lignes" id="identifiant"> Texte par défaut </textarea>	Zone de saisie multiligne
<select name="Nom" id="identifiant"> <option value="valeur1"> … <option value="valeurN"> </select>	Liste déroulante
<select name="Nom" size="5" id="identifiant"> <option value="valeur1"> … <option value="valeur5"> </select>	Zone de liste (ici, cinq éléments sont affichés)

Juil

getElementById, donner le focus à une zone de saisie

Categories: html5-css3-javascript

Tags: button, focus, getelementbyid, input, javascript, onclick

Comments: No

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Il est parfois bien pratique de donner le focus à une zone de saisie. Par exemple, lorsque vous vous connectez sur votre moteur de recherche préféré, une barre de saisie verticale clignote dans la zone de recherche, vous invitant à entrer quelques mots pour lancer une recherche. Si une de vos pages contient un formulaire de saisie, pourquoi ne pas donner le focus à la première zone de saisie ? Je suis sûr que vos utilisateurs apprécieraient cette attention. D’autant plus qu’en JavaScript, c’est un vrai jeu d’enfant …

Pour illustrer le code JavaScript à utiliser, nous allons définir un formulaire contenant deux textes, deux zones de saisie et deux boutons de commande.

Le corps du document est écrit en HTML. Il est défini entre les lignes 16 et 23 :

La ligne 18 affiche un texte et une zone de saisie d’identifiant entree1.
La ligne 19 définit un bouton de commande, y affiche le texte “Donner le focus à la zone de saisie 1” et met en place la fonction événementielle focus1() qui sera exécutée lorsque l’utilisateur clique sur le bouton de commande.
La ligne 20 est semblable à la ligne 18. Si ce n’est que la zone de saisie mise en place a pour identifiant saisie2.
Enfin, la ligne 21 définit un deuxième bouton de commande, y affiche le texte “Donner le focus à la zone de saisie 2” et met en place la fonction événementielle focus2() qui sera exécutée lorsque l’utilisateur clique sur le bouton de commande.

Passons au code JavaScript :

La fonction focus1() ne contient qu’une instruction, ligne 7. Après avoir récupéré l’élément d’identifiant entree1, c’est-à-dire la première zone de texte, la fonction JavaScript focus() lui est appliquée. Cette simple instruction provoque l’apparition d’un point d’insertion clignotant dans la première zone de saisie. Toute frappe au clavier sera placée dans cette zone.
La fonction focus2() est en tout point identique à la fonction focus1(), si ce n’est qu’elle donne le focus à la deuxième zone de texte.

Exécutons ce code dans un navigateur. Comme vous pouvez le voir, les deux boutons sont fonctionnels.

Juil

getElementById, première approche

Categories: html5-css3-javascript

Tags: button, getelementbyid, html, input, javascript, value

Comments: No

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Cette rubrique est très importante. Elle va vous montrer comment accéder au contenu d’une balise HTML et modifier ce contenu. Ici, nous allons modifier le contenu d’une balise <input> de type text, c’est-à-dire d’une zone de texte. Le texte affiché dans la zone de texte sera mis en majuscule lorsque l’utilisateur cliquera sur un bouton de commande.

En utilisant une technique similaire, vous pourrez modifier le contenu de nombreuses autres balises HTML.

Le corps du document contient un formulaire composé de deux éléments :

Une balise <input> de type text et d’identifiant saisie.
Une balise <input> de type button. Le texte affiché sur le bouton est défini dans l’attribut value. Lorsque l’utilisateur clique sur le bouton, la fonction JavaScript majuscules() est exécutée.

Nous allons maintenant nous intéresser au code JavaScript. La fonction majuscules() est exécutée à chaque appui sur le bouton de commande. Dans un premier temps, la fonction getElementById() est utilisée pour récupérer l’objet HTML d’identifiant saisie. Prenez quelques secondes pour examiner la syntaxe utilisée : document.getElementById(“saisie”). La fonction getElementById() est appliquée au document et l’objet à récupérer a pour identifiant saisie. Finalement, vous voyez que cette instruction n’a rien de bien sorcier. L’objet retourné est stocké dans une variable nommée objet.

Pour obtenir la valeur stockée dans la zone de texte, c’est-à-dire dans l’objet ayant pour nom … objet, il suffit d’appliquer le suffixe value à cet objet. Ainsi, objet.value correspond au texte affiché dans la zone de texte. Pour transformer ce texte en caractères majuscules, nous utilisons la fonction JavaScript toUpperCase(). Comme vous pouvez le voir, cette fonction suffixe objet.value, et donc, donne la version majuscule de la zone de texte. En affectant objet.value.toUpperCase() à objet.value, la version majuscule de la zone de texte est affichée dans la zone de texte. C’est ainsi qu’un clic sur le bouton de commande transforme le contenu de la zone de texte en majuscules.

Exécutons ce code dans un navigateur. Ici, je tape le texte “BonJouR” dans la zone de texte puis j’appuie sur le bouton de commande. Comme prévu, toutes les lettres sont transformées en majuscules :

Juil

Première approche du JavaScript

Categories: html5-css3-javascript

Tags: button, function, input, javascript, onclick

Comments: No

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Le langage JavaScript met de la vie dans vos pages HTML. Il est en effet capable de réagir aux actions de l’utilisateur (clic, survol, frappe clavier, etc.) en exécutant du code côté client, c’est-à-dire sur l’ordinateur où s’affiche la page Web.

Dans cette rubrique, vous allez faire une première approche très light du langage HTML. Je vais vous montrer comment afficher une boîte de message lorsque l’utilisateur clique sur un bouton.

Entre les balises <head> et </head>, la balise <script> indique que les lignes qui vont suivre sont du code actif. L’attribut language précise qu’il s’agit de code JavaScript. La balise </script> délimite la fin du code JavaScript.

La ligne 5 définit la fonction popup(). Les instructions qui composent cette fonction se trouvent entre des accolades. Ici, la fonction popup() ne contient qu’une seule instruction, ligne 7.

Cette instruction affiche un texte dans une boîte de message en utilisant la fonction prédéfinie alert(). Le texte affiché se trouve à l’intérieur des parenthèses, encadré par des apostrophes.

Pour invoquer la fonction popup(), nous allons utiliser un événement lié à une balise HTML.

Le corps du document définit un formulaire (lignes 12 à 14). Ce formulaire contient un seul élément défini ligne 13. Ici, il s’agit d’un simple bouton. Le texte affiché dans le bouton est défini dans l’attribut value. Quant à l’attribut onClick, il fait référence à la fonction JavaScript popup(). Vous l’aurez compris, la fonction popup() sera exécutée lorsque l’utilisateur cliquera sur le bouton.

Exécutez ce code dans un navigateur. Le code JavaScript est détecté par Internet Explorer et un message d’avertissement apparaît dans la partie inférieure de la fenêtre. Confirmez que vous voulez exécuter ce code en cliquant sur Autoriser le contenu bloqué.

Remarque

Ce message d’alerte s’affiche parce que le code JavaScript est exécuté localement. Si vous placez le fichier HTML sur un serveur Web, aucun message d’alerte ne sera affiché.

Cliquez sur le bouton Cliquez ici. Une fenêtre de message contenant le message spécifié dans la fonction popup() est affiché :