Scribd
Importer
630 vues4 pages

Cours Web Formulaires Javascript

Transféré par

Jayson Koum
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
630 vues4 pages

Cours Web Formulaires Javascript

Transféré par

Jayson Koum
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 4

Site web : Formulaires et JavaScript

1) Les formulaires
a) Déclaration
Un formulaire est balisé par <form> … </form>.
La balise form contient deux attributs obligatoires :
 Une méthode method = "valeur" où "valeur" prend :
o Soit la valeur "post"
o Soit la valeur "get"
 Une action action = traitement précisant le traitement à faire. traitement prend soit la
valeur "traitement.php" pour une interaction avec une base de données sur le serveur, soit la
valeur mailto :[email protected] pour envoyer les informations par courriel.

b) Zones d’événements sur une ligne


La balise autofermante <input/> permet de créer une zone sur une ligne via la syntaxe
type = "valeur" où "valeur" est :
 text pour saisir du texte
 password pour saisir un mot de passe
 button pour créer un bouton avec appel d’une fonction JavaScript
 reset pour réinitialiser le formulaire
 submit pour soumettre le formulaire
 file pour transférer un fichier
La zone balisée <label> … </label> permet de donner une information à l’utilisation.
Exemple :
<form method="post" action="mailto:[email protected]">
<p><label for="nom">Entrer votre nom</label>
<input type="text" name="nom" id="nom" value="mon_nom"/><br />
<label for="log">Entrer votre login</label>
<input type="text" name="log" id="log" /><br />
<label for="log">Entrer votre mot de passe</label>
<input type="password" name="pass" id="pass" /><br />
<label for="fich">Choisir un fichier</label>
<input type="file" name="fich" id="fich" /><br />
<input type="submit" value="Soumettre"/>
<input type="reset" value="Effacer"/>
<input type="button" value="Fonction JavaScript" onclick="nomFCT();"/>
</p>
</form>

Il existe d’autres attributs :


size : indique la largeur du champ
maxlength : indique le nombre max de caractère pouvant être saisis

Patrice Jacquet - NSI - Site web : Formulaires et JavaScript - page 1


c) Cases à cocher
Les cases à cocher permettent à l’utilisateur de sélectionner plusieurs choix.
Exemple :
<p><input type="checkbox" name="France" id="France" checked="checked"/>
<label for="France">La France</label><br />
<input type="checkbox" name="Allemagne" id="Allemagne" />
<label for="Allemagne">L'Allemagne</label><br />
<input type="checkbox" name="Suisse" id="Suisse" />
<label for="Suisse">La Suisse</label><br />
</p>

L’option checked="checked" permet de sélectionner une case par défaut.

d) Boutons radio
Les cases à cocher permettent à l’utilisateur de sélectionner un seul choix.
Exemple :
<p><input type="radio" name="Destination" id="France" checked="checked"/>
<label for="France">La France</label><br />
<input type="radio" name="Destination" id="Allemagne" />
<label for="Allemagne">L'Allemagne</label><br />
<input type="radio" name="Destination" id="Suisse" />
<label for="Suisse">La Suisse</label><br />
</p>

Les boutons radio appartiennent à la même zone si les paramètres name sont identiques

e) Zones de saise
Il peut être utile de définir plusieurs zones dans un même formulaire.
Le regroupement de zone peut se faire entre les balises <fieldset> … </fieldset> dont le titre
est balisé par <legend> … </legend>.
Exemple :
<fieldset><legend>Football</legend>
<input type="radio" name="Foot" value="France" id="France" checked="checked"/>
<label for="France">La France</label><br />
<input type="radio" name="Foot" value="Allemagne" id="Allemagne"/>
<label for="Allemagne">L'Allemagne</label><br />
</fieldset>
<fieldset><legend>Curling</legend>
<input type="radio" name="Curling" value="CA" id="Canada" checked="checked"/>
<label for="France">Le Canada</label><br />
<input type="radio" name="Curling" value="CH" id="Suisse"/>
<label for="Suisse">La Suisse</label><br />
</fieldset>

Patrice Jacquet - NSI - Site web : Formulaires et JavaScript - page 2


f) Listes déroulantes
Les listes déroulantes sont balisées par <select name="NomListe"> … </select> et chaque
choix est compris entre les balises <option value="Etiquette"> … </option>.
Deux ajouts optionnels sont possibles :
 Regrouper les choix par thèmes via les balises
<optgroup label="NomGroupe">…</optgroup>
 Définir un choix par défaut via la syntaxe selected="selected" entre les balises <option>
… </option>
Exemple :
<select name="liste1">
<optgroup label="foot">
<option value="ASSE" selected="selected">ASSE</option>
<option value="DFCO">Dijon</option>
<option value="PSG">PSG</option>
</optgroup>
<optgroup label="basket">
<option value="CSP">Limoges</option>
<option value="JDA">Dijon</option>
</optgroup>
</select>

2) JavaScript
Le JavaScript est un langage dont le script est écrit dans un fichier texte avec l’extension « .js ».

L’appel d’un fichier JavaScript depuis une page HTML se fait avec la syntaxe :
<script src="nomfichier.js"></script>

La fonction alert("Je suis un message"); permet d’ouvrier une boîte de dialogue et d’écrire le
message "Je suis un message".
La fonction prompt("Message pour l’utilisateur"); permet d’ouvrier une boîte de saisie et
informant l’utilisateur de ce qu’il doit saisir.
Exemple de script :
var nom = prompt("Entrer votre nom");
var prenom = prompt("Entrer votre prenom");
alert("Votre nom est :"+nom+", votre prenom est :"+prenom);

var définit une variable.


Une variable peut être un nombre entier, un nombre décimal, une chaîne de caractère.
Chaque ligne de code se termine par un point-virgule.
La syntaxe c+n+p se traduit par la conversion de c, n et p en chaine de caractère puis la concaténation des
chaines de caractère.
Il est possible de forcer le type entier avec parseInt(…);
Il est possible de forcer le type décimal avec parseFloat(…);

Patrice Jacquet - NSI - Site web : Formulaires et JavaScript - page 3


La confirmation via une boîte de dialogue s’effectue avec la fonction confirm() qui renvoie un booléen.
Exemple
var bol = confirm("Voulez-vous continuer ?");
alert("Valeur de bol= "+bol);

3) Interaction avec une page HTML


a) Dans le fichier JavaScript
Dans le fichier JavaScript l’interaction entre le fichier JavaScript et une page HTML se fait en deux étapes
 Identifier une zone dans le HTML (balise de bloc ou en ligne), zone par ailleurs décrite dans le CSS.
Par exemple : <p id="monID"> … </p>
 Utiliser document.getElementById("monID").innerHTML
o En lecture
o En affectation via += pour ajout, = pour suppression
Dans le fichier HTML, la balise script se place soit dans l’en-tête, soit après la balise dont l’identifiant est
passé à l’élément getElementById.

Exemple :
Code HTML
<!DOCTYPE html>
<html lang="fr" >
<head>
<title>Code HTML</title>
<link rel="stylesheet" type="text/css" href="moncss.css" />
<script src="monscript.js"></script>
</head>
<body>
<h1>TEST JavaScript</h1>
<p id="mondiv"></p>
<button type="button" onclick='cliquer()'>Click Me!</button>
</body>
</html>
Code JavaScript
function cliquer() {
var nom=prompt("Entrer votre nom");
var prenom=prompt("Entrer votre prenom");
message = (prenom+" "+nom);
document.getElementById("mondiv").innerHTML = "Hello "+message;
}
Code CSS
#mondiv {
text-align: center;
border-style: solid;
width:500px;
height:200px
}

Patrice Jacquet - NSI - Site web : Formulaires et JavaScript - page 4

Vous aimerez peut-être aussi