Memento JS

Table des matières :

Inclure un fichier JS externe dans une page HTML

<script language="javascript" src="./js/my_scripts.js"></script>
Attention, if faut bien ecrire le tag de fin </script> et non <script ... />

Formulaires

Exemples de Formulaires

<form name="myForm" action="example.cgi" method="post"> <input type="text" name="login"> <br /> <input type="submit" value="Rechercher"> <input type="reset" value="Annuler"> </form>
<form action="http://mysite/action" method="post"> first name: <input type="text" name="firstname"><br> last name: <input type="text" name="lastname" maxlength="30" size="20"><br> email: <input type="text" name="email"><br> <input type="hidden" name="hiddenValue" value="toto"> <input type="radio" name="sex" value="male"> male - <input type="radio" name="sex" value="female"> female<br> <select size="20" name="select"> <option selected value="component1">component1</option> <option>component2</option> <option>component3</option> <option>component4</option> <option>component5</option> <option>component6</option> </select> <input type="submit" value="send"> <input type="reset"> lt;/form>

Bouton avec image

<input type="image" src="img.lor/icon/icon_find.gif" align="middle" />
<a href="javascript:document.myForm.submit()"> <img src="submit.gif" border="0" alt="Submit" /> </a>

DTD for Forms elements (Form, Input, ...)

Vous trouverez ci-dessous la partie la la DTD relative aux différents éléments utilisés dans les formulaires.
Pour plus de détails, consulter le site du W3C : http://www.w3.org/TR/html401/interact/forms.html - Forms HTML 4.01.

FORM element

<!ELEMENT FORM - - (%block;|SCRIPT)+ -(FORM) -- interactive form --> <!ATTLIST FORM %attrs; -- %coreattrs, %i18n, %events -- action %URI; #REQUIRED -- server-side form handler -- method (GET|POST) GET -- HTTP method used to submit the form-- enctype %ContentType; "application/x-www-form-urlencoded" accept %ContentTypes; #IMPLIED -- list of MIME types for file upload -- name CDATA #IMPLIED -- name of form for scripting -- onsubmit %Script; #IMPLIED -- the form was submitted -- onreset %Script; #IMPLIED -- the form was reset -- accept-charset %Charsets; #IMPLIED -- list of supported charsets -- >

INPUT element

<!ENTITY % InputType "(TEXT | PASSWORD | CHECKBOX | RADIO | SUBMIT | RESET | FILE | HIDDEN | IMAGE | BUTTON)" >
<!-- attribute name required for all but submit and reset --> <!ELEMENT INPUT - O EMPTY -- form control --> <!ATTLIST INPUT %attrs; -- %coreattrs, %i18n, %events -- type %InputType; TEXT -- what kind of widget is needed -- name CDATA #IMPLIED -- submit as part of form -- value CDATA #IMPLIED -- Specify for radio buttons and checkboxes -- checked (checked) #IMPLIED -- for radio buttons and check boxes -- disabled (disabled) #IMPLIED -- unavailable in this context -- readonly (readonly) #IMPLIED -- for text and passwd -- size CDATA #IMPLIED -- specific to each type of field -- maxlength NUMBER #IMPLIED -- max chars for text fields -- src %URI; #IMPLIED -- for fields with images -- alt CDATA #IMPLIED -- short description -- usemap %URI; #IMPLIED -- use client-side image map -- ismap (ismap) #IMPLIED -- use server-side image map -- tabindex NUMBER #IMPLIED -- position in tabbing order -- accesskey %Character; #IMPLIED -- accessibility key character -- onfocus %Script; #IMPLIED -- the element got the focus -- onblur %Script; #IMPLIED -- the element lost the focus -- onselect %Script; #IMPLIED -- some text was selected -- onchange %Script; #IMPLIED -- the element value was changed -- accept %ContentTypes; #IMPLIED -- list of MIME types for file upload -- >

TEXTAREA element

<!ELEMENT TEXTAREA - - (#PCDATA) -- multi-line text field --> <!ATTLIST TEXTAREA %attrs; -- %coreattrs, %i18n, %events -- name CDATA #IMPLIED rows NUMBER #REQUIRED cols NUMBER #REQUIRED disabled (disabled) #IMPLIED -- unavailable in this context -- readonly (readonly) #IMPLIED tabindex NUMBER #IMPLIED -- position in tabbing order -- accesskey %Character; #IMPLIED -- accessibility key character -- onfocus %Script; #IMPLIED -- the element got the focus -- onblur %Script; #IMPLIED -- the element lost the focus -- onselect %Script; #IMPLIED -- some text was selected -- onchange %Script; #IMPLIED -- the element value was changed -- >

SELECT / OPTGROUP / OPTION elements

<!ELEMENT SELECT - - (OPTGROUP|OPTION)+ -- option selector --> <!ATTLIST SELECT %attrs; -- %coreattrs, %i18n, %events -- name CDATA #IMPLIED -- field name -- size NUMBER #IMPLIED -- rows visible -- multiple (multiple) #IMPLIED -- default is single selection -- disabled (disabled) #IMPLIED -- unavailable in this context -- tabindex NUMBER #IMPLIED -- position in tabbing order -- onfocus %Script; #IMPLIED -- the element got the focus -- onblur %Script; #IMPLIED -- the element lost the focus -- onchange %Script; #IMPLIED -- the element value was changed -- >
<!ELEMENT OPTGROUP - - (OPTION)+ -- option group --> <!ATTLIST OPTGROUP %attrs; -- %coreattrs, %i18n, %events -- disabled (disabled) #IMPLIED -- unavailable in this context -- label %Text; #REQUIRED -- for use in hierarchical menus -- >
<!ELEMENT OPTION - O (#PCDATA) -- selectable choice --> <!ATTLIST OPTION %attrs; -- %coreattrs, %i18n, %events -- selected (selected) #IMPLIED disabled (disabled) #IMPLIED -- unavailable in this context -- label %Text; #IMPLIED -- for use in hierarchical menus -- value CDATA #IMPLIED -- defaults to element content -- >

LABEL element

<!ELEMENT LABEL - - (%inline;)* -(LABEL) -- form field label text --> <!ATTLIST LABEL %attrs; -- %coreattrs, %i18n, %events -- for IDREF #IMPLIED -- matches field ID value -- accesskey %Character; #IMPLIED -- accessibility key character -- onfocus %Script; #IMPLIED -- the element got the focus -- onblur %Script; #IMPLIED -- the element lost the focus -- >

Les évènements

  • onAbort : le chargement de la page a été interrompu, soit par l'appui sur ‘Cancel' ou par le clique sur un lien.
  • onError : Erreur
  • onResize : La page a été redimensionnée
  • OnScroll : On scrolle dans la page
  • onLoad : L'objet (une image par exemple) est complètement chargée
  • onUnload : L'explorateur quitte la page
  • onBlur : Un champ de formulaire perds le focus
  • onChange : Le visiteur édite un champ et le quitte
  • onFocus : Un champ de formulaire prend le focus
  • onKeyDown : Une touche est pressée (durant l'édition d'un champ de formulaire)
  • onKeyPress : Une touche est pressée (durant l'édition d'un champ de formulaire)
  • onKeyUp : Une touche est relachée (durant l'édition d'un champ de formulaire)
  • onSelect : L'utilisateur a séléctionné une partie du contenu du champ
  • onClick : Sur un clic
  • onDblClick : Sur un double click
  • onMouseOut : Lorsque le pointeur de la souris sort de l'objet
  • onMouseOver : Lorsque le pointeur de souris passe sur l'objet

Divers

Appel d'un script sur un lien

<a href="javascript:myFunction()">link</a>

Ajouter un site aux favoris

var myUrl = "https://loribel.com" var myTitle = "Loribel.com - Java / Enignmes / Quebec" function addToFavorite() { window.external.AddFavorite(myUrl, muTitle); }

Sites de référence

W3C / HTML 4.01
W3C / HTML 4.01 / Formulaire
Petit mémento Javascrip (page perso)


Article extrait du site Loribel.com.
https://loribel.com/info/memento/js.html