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

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.