Εισαγωγή

Στο προηγούμενο κεφάλαιο αναφέραμε τον τρόπο με τον οποίο μπορούμε να δημιουργήσουμε και να τροποποιήσουμε πίνακες. Σε αυτό το κεφάλαιο θα κάνουμε μια εισαγωγή στα HTML forms. Δηλαδή τον τρόπο με τον οποίο μπορούμε να δημιουργήσουμε φόρμες επικοινωνίας κλπ. Για παράδειγμα μια φόρμα επικοινωνίας μπορεί να θεωρηθεί η παρακάτω.



Παράδειγμα φόρμας επικοινωνίας



Προφανώς θα επικεντρωθούμε στο γραφικό κομμάτι υλοποίησης της φόρμας επικοινωνίας και με γνώμονα ότι δεν γνωρίζουμε καθόλου CSS. Βέβαια στα επόμενα κεφάλαια θα ανεφερθούμε στην CSS τι είναι, γιατί είναι πολύ χρήσιμη και πως μπορούμε να την χρησιμοποιήσουμε σε ένα HTML αρχείο. Τέλος το κομμάτι λειτουργικότητας είναι ένα άλλο θέμα το όποίο θα το μελετήσουμε πολύ αργότερα σε άλλα κεφάλαια που θα αναφερθούμε στην javascript. Έστω ότι θέλουμε να φτιάξουμε την φόρμα επικοινωνίας που δείχνει το παρακάτω παράδειγμα.



Φόρμα επικοινωνίας Όνομα:
e-mail
Θέμα

Περιεχόμενο




Πρωτού όμως προχωρήσουμε στην υλοποίηση της φόρμας επικοινωνίας θέλω να δούμε κάποια πολύ σημαντικά 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. Παρακάτω ακολουθούν όλες οι τιμές που παίρνει αυτή η παράμετρος:
  1. text - Όπου ορίζει οτι το input θα είναι ένα textbox (π.χ. value="text")

  2. radio - Όπου ορίζει οτι το input θα είναι ένα radio button (π.χ. value="radio")

  3. submit - Όπου ορίζει οτι το input θα είναι ένα κουμπί υποβολής (π.χ. value="submit")
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


Σε αυτό το σημείο ας δούμε πως μπορούμε να φτιάξουμε την φορμα επικοινωνίας που είδαμε παραπάνω.



Text Editor
<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 θα γράψουμε τα εξής:



Text Editor
<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






Follow us

 ☰