Formulaire bouton - Cours Javascript

Introduction

Info

Nous allons étudier les propriétés Javascript de la balise HTML :
<input type="reset">, qui permet de réinitialiser le formulaire HTML.
<input type="submit">, qui permet d'envoyer le formulaire HTML.
<input type="image">, qui permet d'envoyer le formulaire HTML mais à la place du bouton on spécifie une image.
<input type="button"> qui permet d'afficher un bouton de formulaire n'a aucune action.

reset()

Info

Exemple de code :
<input type="reset">

Pour remettre à jour un formulaire via le javascript, il ne faut plus utiliser la balise HTML <input type="reset"> mais la balise HTML <input type="button">.
A cette dernière nous lui associerons un événement, généralement un "onclick" avec la méthode reset().
Exemple de code :
<input type="button" onClick="document.forms.f.reset()">

Par exemple :
Taper du texte dans le champ.
Exemple de code :
<form name="f">
<input type="text" name="textfield">
<input type="button" onClick="document.forms.f.reset()">
</form>

submit()

Info

Exemple de code :
<input type="submit">

Pour envoyer un formulaire via le javascript, il ne faut plus utiliser la balise HTML <input type="submit"> mais la balise HTML <input type="button">.
A cette dernière nous lui associerons un événement, généralement un "onclick" avec la méthode submit().
Exemple de code :
<input type="button" onClick="document.forms.f.submit()">

Par exemple :
Exemple de code :
<form name="f">
<input type="text" name="champ">
<input type="button" onClick="document.forms.f.submit()">
</form>

image

Info

Exemple de code :
<input type="image">

Pour renvoyer un formulaire via le javascript, il ne faut plus utiliser la balise HTML <input type="image"> mais une image avec un lien <a href="#">.
A ce dernier, nous lui associerons un événement, généralement un "onclick" avec la methode submit().
Exemple de code :
<a href="#" onClick = "document.forms.f.submit()"> <img src="monimage.gif"> </a>

Par exemple :
Exemple de code :
<form name="f">
<input type="text" name="champ">
</form>

<a href="#" onClick="document.forms.f.submit()"><img src="monimage.gif"></a>

L'image avec le lien peut être dans ou en dehors du formulaire.
Vous pouvez aussi mettre une image pour la méthode reset(), voiçi une autre manière d'écrire :
Exemple de code :
<a href = "javascript:document.forms.f.reset()"> <img src="monimage.gif"> </a>