Φόρµες σε HTML <FORM NAME = " όνοµα της φόρµας " TARGET = " συµβολικό όνοµα παραθύρου " ΑCTION = " URL διεύθυνση του εξυπηρετητή που θα αποσταλούν τα

Transcript

1 Φόρµες και Javascript

2 Φόρµες σε HTML <FORM NAME = " όνοµα της φόρµας " TARGET = " συµβολικό όνοµα παραθύρου " ΑCTION = " URL διεύθυνση του εξυπηρετητή που θα αποσταλούν τα στοιχεία " METHOD = " GET POST " </FORM>

3 Πως καλούµε µια φόρµα propertyname and methodname() Αν έχουµε πολλές φόρµες document.forms[0]. document.forms[1]. Αν έχουµε µια φόρµα formname. document.all.formname.

4 Ιδιότητες φόρµας formname.name = xyz formname.methodmethod = post (ή get ) formname.actionaction = index2.html formname.target = Index-2 πεδία υποβολής στοιχείων formname.elements[0] formname.elements[1] Πχ. formname.elements[0].value αν το πρώτο element είναι ένα κουτί text formname.elements.length length - # πεδίων εισαγωγής

5 Mέθοδοι της φόρµας υο: : reset() και submit() reset() - καθαρισµός των πεδίων Σύνταξη: formname.reset() <form name=form1 <input type=button onclick= form1.reset() > Το ίδιο µε: <INPUT TYPE="reset" " VALUE="Καθαρισµός" NAME="clear">

6 Μέθοδος Submit() Αποστολή στοιχείων φόρµας Σύνταξη: formname.submit() <form name=form1 <input type=button onclick= form1.submit() > Το ίδιο µε <input type=submit>

7 2 Event handlers onreset() Αµέσως πριν κάνουµε reset() onsubmit() Αµέσως πριν κάνουµε submit() <FORM NAME = " όνοµα " TARGET = " όνοµα παραθύρου " ΑCTION = " URL εξυπηρετητή " METHOD = " GET POST " onsubmit = " JavaScript Εκφράσεις " onreset = " JavaScript Εκφράσεις "> </FORM> Σε τι είναι χρήσιµα?

8 onsubmit() δουλεύει για µας Μπορούµε να αποτρέψουµε την αποστολή της φόρµας, για κάποιου λόγους Ελλιπή δεδοµένα Λάθος δεδοµένα Μπορούµε να διορθώσουµε κάποια στοιχεία πριν την αποστολή της φόρµας Για τους ίδιους λόγους όπως πιο πάνω

9 Έλεγχος φόρµας <form name=form1 onsubmit= validate() > <input type=text name=name1> <input type=submit> function validate() { } if (form1.name1 == ) else Return false; Return true;

10 Input Types text εισαγωγή κειµένου µιας γραµµής password εισαγωγή κειµένου µιας γραµµής που οι χαρακτήρες του κειµένου εµφανίζονται σαν * hidden - εισαγωγή κειµένου µιας γραµµής που οι χαρακτήρες του κειµένου δεν εµφανίζονται button κουµπί για κάποια ενέργεια (π.χ., Submit) checkbox πολλαπλές επιλογές (µε τετράγωνα) radio µια επιλογή από σύνολο επιλογών (µε κύκλους) file επιλογή αρχείου για upload (π.χ. π.χ., File attachments) textarea εισαγωγή µεγάλου κειµένου submit αποστολή των πληροφοριών reset διαγραφή επιλογών ή στοιχείων (clears selections)

11 Το αντικείµενο text <FORM...> <INPUT TYPE = " text " NAME = " textname " VALUE = " textvalue " SIZE = " ακέραιος "> </FORM> textname.propertyname textname.methodname() methodname() formname.elements elements [ δείκτης ].propertyname formname.elements elements [ δείκτης ].methodname()

12 Ιδιότητες και µέθοδοι του text Ιδιοτητες: name, value και defaultvalue textname.defaultvalue ="αλφαριθµητικό" Μέθοδοι: textname.select() textname.focus focus() textname.blur() Περιστατικά: onselect = " JavaScript Εκφράσεις " onchange = " JavaScript Εκφράσεις " onfocus = " JavaScript Εκφράσεις " onblur = " JavaScript Εκφράσεις ">

13 Παράδειγµα <form> <B> ιαχείριση Κειµένου </B> <BR> <input type=" ="text" name=" ="txt" value=" ="Αρχικό Κείµενο" " Size=42> <BR> <input type="button" name="insert" value="εισαγωγή Κειµένου" onclick="txt.focus() txt.focus()"> <input type="button" name="select" value="επιλογή Κειµένου" onclick="txt.select() txt.select()"> <BR> <input type="button" name="clear" value="καθαρισµός" onclick="txt.value='' txt.value=''"> <input type="button" name="reset" value="επαναφορά" onclick="txt.value=txt.defaultvalue"> </form> js-text.html

14 Το αντικείµενο password <FORM...> <INPUT TYPE = " password " NAME = " passwordname " VALUE = " passwordvalue " SIZE = " ακέραιος "> </FORM> passwordname.propertyname passwordname.methodname() methodname() formname.elements elements [ δείκτης ].propertyname formname.elements elements [ δείκτης ].methodname()

15 Ιδιότητες και µέθοδοι του password Ιδιοτητες: name, value και defaultvalue textname.defaultvalue ="αλφαριθµητικό" Μέθοδοι: textname.select() textname.focus focus() textname.blur() Περιστατικά: onfocus = " JavaScript Εκφράσεις " onblur = " JavaScript Εκφράσεις "> Παράδειγµα: js-password.html

16 Το αντικείµενο hidden <FORM...> <INPUT TYPE = " hidden " NAME = " hiddenname " VALUE = " hiddenvalue " </FORM> hiddenname [ δείκτης ].propertyname formname.elements elements [ δείκτης ].propertyname Ιδιότητες: name, value

17 Το αντικείµενο textarea <FORM...> <TEXTAREA NAME = " textareaname " COLS = " ακέραιος " ROWS = " ακέραιος "> Αρχικό Κείµενο </TEXTAREA> </FORM> textareaname.propertyname textareaname.methodname() methodname() formname.elements elements [ δείκτης ].propertyname formname.elements elements [ δείκτης ].methodname()

18 Ιδιότητες και µέθοδοι του textarea Ιδιοτητες: name, value και defaultvalue textareaname. Name.defaultValue ="αλφαριθµητικό" Μέθοδοι: textareaname.select() textarea areaname. Name.focus focus() textareaname. Name.blur() Περιστατικά: onselect = " JavaScript Εκφράσεις " onchange = " JavaScript Εκφράσεις " onfocus = " JavaScript Εκφράσεις " onblur = " JavaScript Εκφράσεις ">

19 Το αντικείµενο Button buttonname.propertyname buttonname.methodname() methodname() formname.elements elements [ δείκτης ].propertyname formname.elements elements [ δείκτης ].methodname()

20 Ιδιότητες και µέθοδοι του button Ιδιοτητες: name και value Μέθοδοι: buttonname.click() buttonname.focus() buttonname.blur() blur()

21 Χειριστές εριστατικών του button <FORM INPUT = " button " NAME = " buttonname " VALUE = " buttontext " onclick = " JavaScript Εκφράσεις " onfocus = " JavaScript Εκφράσεις " onblur = " JavaScript Εκφράσεις " onmousedown = " JavaScript Εκφράσεις " onmouseup = " JavaScript Εκφράσεις "> </FORM>

22 Παράδειγµα <form> <input type="button" name="b" value="1" onclick="b.value=b.value+'0';"> </form> Ποιο είναι το αποτέλεσµα?

23 Το αντικείµενο radio <FORM...> <INPUT TYPE = " radio " NAME = " radioname " VALUE = " radiovalue " [ CHECKED ]> DisplayText </FORM> radioname [ δείκτης ].propertyname radioname [ δείκτης ].methodname() formname.elements elements [ δείκτης ].propertyname formname.elements elements [ δείκτης ].methodname()

24 Ιδιότητες και µέθοδοι του radio Ιδιότητες: name, value, length, defaultchecked, checked radioname[ δείκτης ].defaultchecked [= true false] radioname[ δείκτης ].checked [= true false ] Μέθοδοι: radioname[δείκτης].click() radioname[δείκτης].focus() radioname[δείκτης].blur() Περιστατικά: onclick = " JavaScript Εκφράσεις " onfocus = " JavaScript Εκφράσεις " onblur = " JavaScript Εκφράσεις "

25 Παράδειγµα <form> <input type="radio" name="choice" e" onclick="choice[1].checked=true"> Επιλογή 1 <BR> <input type="radio" name="choice" e" onclick="choice[0].checked=true"> Επιλογή 2 </form> js-radio

26 Το αντικείµενο checkbox <FORM...> <INPUT TYPE = " checkbox " NAME = " checkboxname " VALUE = " checkboxvalue " [ CHECKED ]> DisplayText </FORM> checkboxname [ δείκτης ].propertyname checkboxname [ δείκτης ].methodname() formname.elements elements [ δείκτης ].propertyname formname.elements elements [ δείκτης ].methodname()

27 Ιδιότητες και µέθοδοι του checkbox Ιδιότητες: name, value, defaultchecked, checked checkboxname[ δείκτης ].defaultchecked [= true false] checkboxname[ δείκτης ].checked [= true false ] Μέθοδοι: checkbox Name[δείκτης].click() checkbox Name[δείκτης δείκτης].focus() checkbox Name[δείκτης δείκτης].blur() Περιστατικά: onclick = " JavaScript Εκφράσεις " onfocus = " JavaScript Εκφράσεις " onblur = " JavaScript Εκφράσεις "

28 Παράδειγµα (js-checkbox) <SCRIPT LANGUAGE="JavaScript"> function Display() { var clr="τα χρώµατα διάλεξα είναι: "; if (window.document.colortype.a.checked==true).a.checked==true) {clr = clr+window.document. +window.document.colortype.a.value}; if (window.document.colortype.b.checked==true) {clr = clr+window.document. +window.document.colortype.b.value}; if (window.document.colortype.g.checked==true).checked==true) {clr = clr+window.document. +window.document.colortype.g.value};.value}; window.alert(clr); } </SCRIPT> <form name="colortype"> <input type="checkbox" name="a" value=" Red "> Κόκκινο <BR> <input type="checkbox" name="b" value=" Blue "> Μπλε <BR> <input type="checkbox" name= "g"" value=" Green "> Πράσινο<BR> <input type="button" value="χρώµατα" onclick="display();"> </form>

29 Τα αντικείµενα select και option <FORM...> <SELECT NAME = " selectname " [ SIZE ] = " ακέραιος " [ MULTIPLE ]> <OPTION VALUE = " optionvalue " [ SELECTED ]> Κείµενο [... <OPTION> Κείµενο ] </SELECT> </FORM>

30 Τα αντικείµενα select και option selectname.propertyname selectname.methodname() methodname() formname.elements elements [ δείκτης ].propertyname formname.elements elements [ δείκτης ].methodname() selectname.options[ options[δείκτης]. ].propertyname formname.elements[ elements[δείκτης].options[ ].options[δείκτης].propertyname

31 Ιδιότητες και µέθοδοι του select Ιδιότητες: name, length, options, selectedindex Μέθοδοι: checkbox Name[δείκτης δείκτης].focus() checkbox Name[δείκτης δείκτης].blur() Περιστατικά: onchange = " JavaScript Εκφράσεις " onfocus = " JavaScript Εκφράσεις " onblur = " JavaScript Εκφράσεις "

32 Ιδιότητες: Ιδιότητες του option length, options, selectedindex, value, text defaultchecked (= true false) checked (= true false)

33 Tο αντικείµενο Image <IMG SRC = " URL διεύθνση " NAME = "συµβολικό όνοµα" WIDTH = "πλάτος εικόνας" HEIGHT = "ύψος εικόνας" BORDER = "µέγεθος περιθωρίου" HSRACE = "οριζόντια απόσταση από κείµενο, εικονοστοιχεία" VSRACE = "κατακόρυφη απόσταση από κείµενο, εικονοστοιχεία" ALT = " εναλλακτικό κείµενο " > [document.]imagename.propertyname [document.]images [ δείκτης ].propertyname

34 Ιδιότητες και µέθοδοι του image Ιδιότητες: src name, length, complete, width, height, hspace, vspace, border Περιστατικά: onload = " JavaScript Εκφράσεις "