info2gestion

MENU3

Accueil>

JavaScript

Formulaires web

Les formulaires html ou web proposent le plus souvent d'envoyer et de recevoir des données d'un serveur de base de données.

Javascript permet de contr√īler les donn√©es √©chang√©es et par exemple d'√©viter le rechargement de la page et l'affichage d'un formulaire vide.

Exemple d'un formulaire

Exemple formulaire
Choix valeur unique?
Choix valeurs multiples?

Ci-dessous, les éléments les plus courants d'un formulaire web. Il est possible de personnaliser ces éléments (placement, disposition...) avec une feuille de style.

Certaines librairies proposent des design déjà fonctionnels qui peuvent simplifier la gestion de l'affichage notemment la portabilité sur différentes résolutions d'affichage (ordinateur, tablettes, smartphones...).

Pour les pages de ce site, les formulaires ne seront pas entièrement fonctionnels du fait que certaines fonctionnalités (connection sécurisée SSL...) ne sont pas activées. Ce site n'enregistre pas de données de navigation et ne requiert pas l'envoi de données personnelles ou confidentielles.

Les éléments html d'un formulaire:


<label></label>

<form>
<fieldset>
<legend>Exemple de formulaire</legend>

<label>Saisie texte</label>
<input type="text" name="name"/>

<label>Saisie texte requis *</label>
<input type="text" name="name"/> 

<label>Renseigner une date *</label>
<input type="date" name="bdate" class="bdate2" required/>

<label>Sélectionner une valeur</label>
<select required>
 <option value=""></option>
 <option value="1">Valeur 1</option>
 <option value="2">Valeur 2</option>
 <option value="3">Valeur 3</option>
</select>

<legend>Choisir une valeur</legend>
<input type="radio" id="r1" name="radio_01" value="val1">
<label>Valeur 1</label><br>
<input type="radio" id="r2" name="radio_01" value="val2">
<label>Valeur 2</label><br>
<input type="radio" id="r3" name="radio_01" value="val3">
<label>Valeur 3</label><br>

<legend>Choisir une ou plusieurs valeurs</legend>
<label for="val1">Valeur 1</label>
<input type="checkbox" id="cbx_1" name="valopt" value="val1">
<label for="val2">Valeur 1</label>
<input type="checkbox" id="cbx_2" name="valopt" value="val2">
<label for="val3">Valeur 1</label>
<input type="checkbox" id="cbx_3" name="valopt" value="val3">

<label>Saisir un texte d'une ou plusieurs lignes</label>
<textarea rows="10" required></textarea>

<input type="button" value="Afficher/Envoyer" onclick="js_script()"/>

</fieldset>
</form>

Les éléments ci-dessus représentent les balises html qui affichent un formulaire web. Ces balises sont associées à des attributs qui peuvent notamment servir à lire les valeurs sélectionnées par l'utilisateur.

Les feuilles de style sont n√©cessaires pour la disposition et diff√©rentes personnalisations. Les valeurs de ces √©l√©ments peuvent √™tre lues de diff√©rentes mani√®res. Sur les pages de ce site, les langages concern√©s sont javascript c√īt√© navigateur et php c√īt√© serveur.

Javascript et php sont 2 langages destinés à des environnements différents. Il est cependant possible de transférer des données (par exemple les valeurs d'un formulaire web) de javascript à php.

Il existe plusieurs manières pour transférer des données d'un navigateur web à un serveur ou d'un serveur vers un navigateur web. Une de ces techniques utilise javascript pour lire les données du formulaire et ajax (Asynchronous JavaScript And XML) pour envoyer les données de manière asynchrone.

Lorsque ces données sont lues par php directement ou via javascript, différents traitements peuvent avoir lieu. Par exemple, mettre à jour une base de données ou extraire des données selon les différentes sélections.

Des librairies (ou API) proposent également d'écrire ces valeurs (données XML...) dans un tableur graphique et d'utiliser les fonctions du tableur graphique pour effectuer des calculs ou de créer un document pdf. D'autres librairies proposent de créer ou mettre à jour des graphiques.