Δημιουργία Ιστοσελίδων Κεφάλαιο 7 – Δημιουργία HTML φόρμας επικοινωνίας
Δημιουργία Ιστοσελίδων
Κεφάλαιο 7 - Δημιουργία HTML φόρμας επικοινωνίας
Εισαγωγή
Στο προηγούμενο κεφάλαιο αναφέραμε τον τρόπο με τον οποίο μπορούμε να δημιουργήσουμε και να τροποποιήσουμε πίνακες. Σε αυτό το κεφάλαιο θα κάνουμε μια εισαγωγή στα HTML forms. Δηλαδή τον τρόπο με τον οποίο μπορούμε να δημιουργήσουμε φόρμες επικοινωνίας κλπ. Για παράδειγμα μια φόρμα επικοινωνίας μπορεί να θεωρηθεί η παρακάτω.
Παράδειγμα φόρμας επικοινωνίας
Προφανώς θα επικεντρωθούμε στο γραφικό κομμάτι υλοποίησης της φόρμας επικοινωνίας και με γνώμονα ότι δεν γνωρίζουμε καθόλου CSS. Βέβαια στα επόμενα κεφάλαια θα ανεφερθούμε στην CSS τι είναι, γιατί είναι πολύ χρήσιμη και πως μπορούμε να την χρησιμοποιήσουμε σε ένα HTML αρχείο. Τέλος το κομμάτι λειτουργικότητας είναι ένα άλλο θέμα το όποίο θα το μελετήσουμε πολύ αργότερα σε άλλα κεφάλαια που θα αναφερθούμε στην javascript. Έστω ότι θέλουμε να φτιάξουμε την φόρμα επικοινωνίας που δείχνει το παρακάτω παράδειγμα.
Πρωτού όμως προχωρήσουμε στην υλοποίηση της φόρμας επικοινωνίας θέλω να δούμε κάποια πολύ σημαντικά HTML tags καθώς και την δομή τους.
Το HTML tag <input>
Με το HTML tag <input> μπορούμε να δημιουργήσουμε ένα αντικείμενο που να είναι ένα σημείο εισαγωγής κειμένο textbox, κουμπί υποβολής (submit) ή να δημιουργήσουμε radio buttons. Με απλά λόγια το HTML tag <input> αποτελεί ένα αντικείμενο το οποίο μπορεί να χρησιμοποιηθεί σε διάφορες λειτουργίες μιας φόρμας. Ας δούμε το παράδειγμα φόρμας που είδαμε παραπάνω για να καταλάβουμε τι απ’ όλα αυτά είναι ένα HTMLtag <input>.
HTML <input> αντικείμενα σε μια φόρμας επικοινωνίας
Στην κορυφή της φόρμας με κόκκινο είναι αποτελούν textbox και στο τέλος της φόρμας το κουμπί submit αποτελεί κι αυτό ένα <input> tag. Γενικά το HTML tag <input> είναι ένα πάρα πολύ σημαντικό HTML tag καθότι το χρειαζόμαστε πάντα για να δημιουργήσουμε μια φόρμα επικοινωνίας. Σε αυτό το σημείο ας δούμε την δομή αυτού του HTML tag.
<input name=“txtb_usernm” type=“text” value=“Γράψτε το username σας” >
Στο παραπάνω παράδειγμα θα μας εμφανίσει στην οθόνη ένα textbox το οποίο θα περιέχει μέσα το κείμενο “Γράψτε το username σας” και τέλος δίνουμε object ID το όνομα textbox_username. Με τα object ID θα ασχοληθούμε πολύ όταν θα αναφερθούμε στην javascript προς το παρών συγκρατήστε στο στο πίσω μέρος του μυαλού σας ως μια παράμετρος που υπάρχει στο HTML tag input. Παρακάτω ακολουθεί ένας πίνακας με όλες τις παραμμέτρους που παίρνει το HTML tag input.
| Παράμετρος | Περιγραφή |
| type |
Αυτή η παράμμετρος αποτελεί ένδειξη για το τι αντικείμενο θα είναι το HTML tag input. Παρακάτω ακολουθούν όλες οι τιμές που παίρνει αυτή η παράμετρος:
|
| value | Σε αυτήν την παράμετρο εισάγουμε το κείμενο που θέλουμε να εμφανιστεί μέσα στο textbox (π.χ. value="Γράψε μια λέξη") |
| name | Σε αυτήν την παράμετρο εισάγουμε το Object ID (π.χ. name="textbox"). |
Το HTML tag <textarea>
Με το tag <textarea> μπορούμε να δημιουργήσουμε ένα πλαίσιο για να εισάγουμε ένα κείμενο. Δηλαδή το σημείο στο οπόιο μπορούμε να γράψουμε το περιεχόμενο ενός μηνύματος. Ας δούμε το παράδειγμα φόρμας που είδαμε παραπάνω για να καταλάβουμε πως είναι ένα αντικείμενο textarea.
Textarea σε μια φόρμας επικοινωνίας
Οπότε σε αυτό το σημείο ας δούμε ως συντάσσεται αυτό το HTML tag.
<textarea rows=“2” cols=“20” > Γράψτε το περιεχόμενο του μηνυματός σας </textarea >
Ο παρακάτω πίνακας περιέχει όλες τις παραμέτρους που παίρνει αυτό το HTML tag.
| Παράμετρος | Περιγραφή |
| rows | Ορίζει το ύψος του textarea |
| cols | Ορίζει το πλάτος του textarea |
Σε αυτό το σημείο ας δούμε πως μπορούμε να φτιάξουμε την φορμα επικοινωνίας που είδαμε παραπάνω.
<html>
<head>
<title> Φόρμα επικοινωνίας </title>
</head>
<body>
<br>
<center>
<br><br>
<form>
<!-- Σχόλιο 1: Έναρξη φόρμας -->
<fieldset>
<!-- Σχόλιο 2: Αρχή εμφάνισης border γύρω από την φόρμα -->
<legend> Φόρμα επικοινωνίας </legend>
<b> Όνομα </b>:
<!-- Σχόλιο 3: Εμφανίζει το texbox για εισαγωγή ονόματος -->
<input type="text" name="name" value="Όνομα">
<br>
<b> e-mail </b>
<!-- Σχόλιο 4: Εμφανίζει το texbox για εισαγωγή e-mail -->
<input type="text" name="e-mail" value="e-mail">
<br>
<b>Θέμα</b>
<!-- Σχόλιο 5: Εμφανίζει το texbox για εισαγωγή θέματος μηνύματος -->
<input type="text" name="subject" value="Θέμα">
<br><br>
<b> Περιεχόμενο</b><br>
<!-- Σχόλιο 6: Εμφανίζει το πλαίσιο για την συγγραφή του περιεχόμενου του μηνύματος -->
<textarea rows="4" cols="50"> Περιεχόμενο μηνύματος </textarea>
<br><br>
<!-- Σχόλιο 7: Εμφανίζει το texbox για κουμπί υποβολής (submit button) -->
<input type="submit" value="Υποβολή">
</fieldset>
<!-- Σχόλιο 7: Τέλος εμφάνισης border γύρω από την φόρμα -->
</form>
<!-- Σχόλιο 8: Τερματισμός φόρμας -->
<br><br>
</center>
</body>
</html>Όταν θα ανοίξουμε αυτό το HTML αρχείο που δημιουργήσαμε θα μας εμφανήσει στον browser μας το εξής.
Προφανώς αυτή η φόρμα δεν θα κάνει τίποτα όσον αφορά το κομμάτι λειτουργικότητας. Αυτό το tutorial είναι περισσότερο εισαγωγικό στο πως να σχεδιάσουμε μια φόρμα καθαρά με την γλώσσα σήμανσης HTML. Σε επόμενα tutorials θα δούμε πως μπορούμε να βελτιώσουμε το γραφικό κομμάτι μιας φόρμας επικοινωνίας μέσω style sheet γλώσσας CSS όπως και στο κομμάτι λειτουργικότητας με javascript ή PHP.
Radio button
Ας δούμε ένα άλλο παράδειγμα έστω μια φόρμα με radio buttons όπως δείχνει η παρακάτω εικόνα:
Φόρμα με radio buttons
Για να φτιάξουμε τα radio buttons θα γράψουμε τα εξής:
<html>
<head>
<title> Φόρμα επικοινωνίας με radio buttons </title>
</head>
<body>
<form>
<fieldset>
<legend> Φόρμα επικοινωνίας με radio buttons </legend>
<p> Διαλέξτε μια απο τις παρακάτω πόλεις: </p>
<input type="radio" name="city" value="Αθήνα"> Αθήνα <br>
<input type="radio" name="city" value="Θεσσαλονίκη"> Θεσσαλονίκη <br>
<input type="radio" name="city" value="Πάτρα"> Πάτρα <br>
<input type="radio" name="city" value="Ηράκλειο"> Ηράκλειο <br>
</fieldset>
</form>
</body>
</html>Παρατειρούμε ότι στο HTML tag input έχουμε αλλάξει το type από text σε radio. Κάνοντας αυτό δίνουμε οδηγία στον browser να εμφανίσει ένα radio button.
Τελευταία ενημέρωση: 19/08/2018
