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 web

Ci-dessus, 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

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

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

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

<label>Saisie mot de passe *</label>
<input type="text" name="mdp"/> 

<label for="n1">Ajouter/diminuer 4-20</label>
<input type="number" min="4" max="20"
id="saisie_nb" name="saisie_nb"
pattern="\d+" value="10">

<fieldset>
<legend>Choix valeur unique?&l/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>
</fieldset>

<fieldset>
<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">
</fieldset>

<label>Saisie date</label>
<input type="date" name="bdate" placeholder="dd-mm-yyyy" value="dd-mm-yyyy"/>

<label>Saisie date et heure</label>
<input type="datetime-local" name="bdate" value="2017-01-20T08:30"/>

<label>Liste déroulante</label>
<select>
 <option value=""></option>
 <option value="1">Café</option>
 <option value="2">Thé</option>
 <option value="3">Sirop</option>
</select>

<label for="chp_saisie_datalist">Liste presaisie</label>
<input type="text" name="chp_saisie_datalist"
list="liste_presaisie">
<datalist id="liste_presaisie">
<option value="Ami"></option>
<option value="Bateau"></option>
<option value="Chaud"></option>
<option value="..."></option>
</datalist>

<label for="saisie_mlignes">Saisie plusieurs lignes</label>
<textarea rows="10" required></textarea>

<button type="submit" onclick="script()">Afficher saisies</button>

</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 à:
- styler ou positionner (avec une feuille de style) les éléments,
- contrôler (valider la saisie...) les éléments avec un langage de script web client
- envoyer ces éléments vers un fichier ou une base de données avec un langage de script web serveur.

Parmi les langages de script web côté client, on retrouve Javascript ou JS parmi les langages de script web côté serveur, on retrouve PHP.

Des librairies peuvent étendre les fonctionnalités des scripts et d'autres langages de développement existent ou peuvent coexister...