Internet
Now Reading
14ο Τελευταίο Μάθημα HTML-Φόρμες
0

14ο Τελευταίο Μάθημα HTML-Φόρμες

by Ελένη Χαλικιά24 November, 2012
Περιγραφή Μαθήματος
Στο σημερινό μας μάθημα θα δείτε τις ετικέτες για το πως να δημιουργήσετε φόρμες στην ιστοσελίδα σας και μερικά παραδείγματα για να τις κατανοήσετε.
Εισαγωγή
Οι φόρμες είναι το πιο χρήσιμο και το πιο απαραίτητο σε μια ιστοσελίδα, διότι δίνετε στους επισκέπτες της ιστοσελίδας σας κάποιες επιπλέον δυνατότητες όπως να εγγραφούν ή να γίνουν μέλη, να συνδεθούν, να ψηφίσουν σε μια ψηφοφορία σας και πολλές άλλες δυνατότητες με συνδυασμό και κάποιας άλλης γλώσσας.

Σημασιολογία ετικετών

<form>: Αυτό χρησιμεύει για να ανοίξετε την ετικέτα δημιουργίας φόρμας

inputtype=”text“: Αυτό χρησιμεύει για την εισαγωγή φόρμας κειμένου, δηλαδή έχετε τη δυνατότητα να δημιουργήσετε φόρμα στην οποία να γράφετε κείμενο
name=”onomasia_formas“: Αυτό χρησιμεύει για να δώσετε μια ονομασία στη φόρμα σας για να μην υπάρξει κανένα μπέρδεμα μεταξύ των φορμών σας
inputtype=”password“: Αυτό χρησιμεύει για την εισαγωγή φόρμας κωδικού, δηλαδή έχετε τη δυνατότητα να δημιουργήσετε φόρμα στην οποία όταν γράφετε έχει τη μορφή ενός κωδικού
inputtype=”radio“: Αυτό χρησιμεύει για την εισαγωγή φόρμας με κουμπί επιλογής radio και χρησιμοποιείτε για επιλογή κάποιων χαρακτηριστικών τα οποία έχετε δηλώσει στη φόρμα σας
inputtype=”checkbox“: Αυτό χρησιμεύει για την εισαγωγή φόρμας με κουτί επιλογής checkbox και χρησιμοποιείτε για επιλογή κάποιων χαρακτηριστικών τα οποία έχετε δηλώσει μέσα στη φόρμα σας
value=”xaraktirismos_formas“: Αυτό χρησιμεύει για να δώσετε έναν χαρακτηρισμό στη φόρμα σας για να μην υπάρξει κανένα μπέρδεμα μεταξύ των φορμών σας
action=”dieuthinsi_arxeiou_apothikeusis_dedomenon“: Αυτό χρησιμεύει για την αποθήκευση δεδομένων τα οποία έχετε καταχωρήσει μέσω των φορμών σας και τα αποθηκεύει ή αλλιώς τα στέλνει στην διεύθυνση που δηλώνετε εδώ
 method=”get“: Αυτή η μέθοδος χρησιμοποιείτε τις περισσότερες φορές και είναι μια γενική μέθοδος για τη χρήση διάφορων εφαρμογών και τα δεδομένα στέλνονται σε μια διεύθυνση url
method=”get“: Αυτή η μέθοδος χρησιμοποιείτε σπάνια και είναι για τη χρήση εφαρμογών οι οποίες στέλνουν τα δεδομένα μέσω του http στον φυλλομετρητή (broswer)
type=”submit“:  Αυτό χρησιμεύει για να δηλώσετε ότι το κουμπί σας είναι τύπου submit και συγκεκριμένα ότι είναι για καταχώρηση-αποστολή των δεδομένων σας
type=”reset“:  Αυτό χρησιμεύει για να δηλώσετε ότι το κουμπί σας είναι τύπου reset και συγκεκριμένα επαναφέρει την φόρμα σας στην αρχική της μορφή χωρίς τα δεδομένα της, δηλαδή διαγράφει ότι έχετε γράψει μέσα στις φόρμες σας
</form>: Αυτό χρησιμεύει για να κλείσετε την ετικέτα δημιουργίας φόρμας
Σύνταξη Κώδικα
Αυτή είναι η σύνταξη του html κώδικα για να δείτε πως να χρησιμοποιήσετε φόρμες κειμένου στις  ιστοσελίδες σας.
<!DOCTYPE html>
<body>
<center>
<form>
Εδώ βάζετε ότι θέλετε να εμφανίζετε μπροστά από τη φόρμα σας: <input type=”Εδώ βάζετε τον τύπο της φόρμας σας για κείμενο” name=”Εδώ βάζετε μια ονομασία για την φόρμας σας“>
</form>
</center>
</body>
</html>
Αυτή είναι η σύνταξη του html κώδικα για να δείτε πως να χρησιμοποιήσετε φόρμες με δυνατότητα εγγραφής κωδικού στις  ιστοσελίδες σας.
<!DOCTYPE html>
<body>
<center>
<form>
Εδώ βάζετε ότι θέλετε να εμφανίζετε μπροστά από τη φόρμα σας: <input type=”Εδώ βάζετε τον τύπο της φόρμας σας για κωδικό” name=”Εδώ βάζετε μια ονομασία για την φόρμας σας
</form>
</center>
</body>
</html>

Αυτή είναι η σύνταξη του html κώδικα για να δείτε πως να χρησιμοποιήσετε φόρμες με δυνατότητα επιλογής κουμπιών τύπου radio στις  ιστοσελίδες σας.

 <!DOCTYPE html>
<body>
<center>
<form>
<input type=”Εδώ βάζετε τον τύπο της φόρμας σας για επιλογή τύπου radio” name=”Εδώ βάζετε μια ονομασία για την φόρμας σας” value=”Εδώ βάζετε έναν χαρακτηρισμό για την φόρμας σας“> Εδώ βάζετε αυτό το οποίο θέλετε να είναι ως προς επιλογή
</form>
</center>
</body>
</html>

Αυτή είναι η σύνταξη του html κώδικα για να δείτε πως να χρησιμοποιήσετε φόρμες με δυνατότητα επιλογής κουμπιών τύπου checkbox στις  ιστοσελίδες σας.
<!DOCTYPE html>
<body>
<center>
<form>
<input type=”Εδώ βάζετε τον τύπο της φόρμας σας για επιλογή τύπου checkbox” name=”Εδώ βάζετε μια ονομασία για την φόρμας σας” value=”Εδώ βάζετε έναν χαρακτηρισμό για την φόρμας σας“> Εδώ βάζετε αυτό το οποίο θέλετε να είναι ως προς επιλογή
 </form>
</center>
</body>
</html>
Αυτή είναι η σύνταξη του html κώδικα για να δείτε πως να χρησιμοποιήσετε φόρμες με δυνατότητα αποστολής των στοιχείων που τις δίνετε σε μια άλλη διεύθυνση ή ιστοσελίδα  μέσα στις  ιστοσελίδες σας.
<form name=”Εδώ βάζετε τον τύπο εισαγωγής δεδομένων της φόρμας σας” action=”Εδώ βάζετε την διεύθυνση ιστοσελίδας ή αρχείου όπου θα αποθηκεύονται τα δεδομένα σας αφού καταχωρηθούν και σταλθούν με το πάτημα του κουμπιού” method=”Εδώ βάζετε τη μέθοδο ανάλογα με το τι θέλετε να κάνει η φόρμα σας“>
Εδώ βάζετε ότι θέλετε να εμφανίζετε μπροστά από τη φόρμα σας: <input type=”Εδώ βάζετε τον τύπο της φόρμας σας, ο οποίος μπορεί να είναι οποιοσδήποτε από αυτούς που μάθατε” name=”Εδώ βάζετεμια ονομασία για την φόρμας σας“>
<input type=”Εδώ βάζετε τον τύπο κουμπιού submit” value=”Εδώ βάζετε αυτό που θέλετε να γράφει το κουμπί σας“>
</form>
Παράδειγμα  1
Αυτό είναι ένα μικρό παράδειγμα χρήσης φόρμας με δυνατότητα εγγραφής κειμένου.
Κώδικας Παραδείγματος:
<!DOCTYPE html>
<body>
<center>
<form>
Όνομα: <input type=”text” name=”onoma”>
 <br>
 <br>
Επώνυμο: <input type=”text” name=”eponymo”>
 <br>
 <br>
Διεύθυνση: <input type=”text” name=”dieuthinsi”>
 <br>
 <br>
Τηλέφωνο: <input type=”text” name=”tilefono”>
</form>
</center>
</body>
</html>

Παράδειγμα  2
Αυτό είναι ένα μικρό παράδειγμα χρήσης φόρμας με δυνατότητα εγγραφής κωδικού.
Κώδικας Παραδείγματος:
<!DOCTYPE html>
<body>
<center>
<form>
Δώστε Κωδικό: <input type=”password” name=”kodikos”
</form>
</center>
</body>
</html>

Παράδειγμα  3
Αυτό είναι ένα μικρό παράδειγμα χρήσης φόρμας με δυνατότητα επιλογής μέσω κουμπιών τύπου radio.

 Κώδικας Παραδείγματος:

<!DOCTYPE html>
<body>
<center>
<form>
<input type=”radio” name=”eidos” value=”pc”>Laptop
 <br>
 <br>
<input type=”radio” name=”eidos” value=”pc”>Μονάδα Η/Υ
</form>
</center>
</body>
</html>
Παράδειγμα  4
Αυτό είναι ένα μικρό παράδειγμα χρήσης φόρμας με δυνατότητα επιλογής μέσω κουμπιών τύπου checkbox.

Κώδικας Παραδείγματος:
<!DOCTYPE html>
<body>
<center>
<form>
<input type=”checkbox” name=”eidos” value=”pc”>Laptop
 <br>
 <br>
<input type=”checkbox” name=”eidos” value=”pc”>Μονάδα Η/Υ
</form>
</center>
</body>
</html>
Παράδειγμα  5
Αυτό είναι ένα μικρό παράδειγμα χρήσης φόρμας με δυνατότητα αποστολής δεδομένων αλλά και χρήση κουμπιών καταχώρησης και διαγραφής δεδομένων.
  

Κώδικας Παραδείγματος:
<!DOCTYPE html>
<body>
<center>
<form name=”input” action=”index.php” method=”get”>
Όνομα Χρήστη: <input type=”text” name=”username”>
<br>
<br>
Κωδικός Χρήστη: <input type=”password” name=”password”>
<br>
<br>
<input type=”submit” value=”Καταχώρηση”>  
<input type=”reset” value=”Ακύρωση”>
</form>
</center>
</body>
</html>

Επίλογος
Φτάσαμε στο τέλος των μαθημάτων μας HTML και ελπίζουμε να σας βοηθήσαμε να κατανοήσετε τη χρήση της γλώσσας σήμανσης HTML.

Κατέβασμα Μαθήματος
Κατεβάστε το τελευταίο μας μάθημα HTML στον υπολογιστή σας εντελώς δωρεάν σε μορφή pdf.
Download 
Συντάκτης
Ελένη Χαλικιά
Τεχνικός Τεχνολογίας Internet
Τεχνικός Εφαρμογών Πληροφορικής

Comments

comments