Skip to content

Latest commit

 

History

History
110 lines (80 loc) · 5.45 KB

7. Forms.md

File metadata and controls

110 lines (80 loc) · 5.45 KB

Forms

<form>

Η ετικέτα της HTML <form> χρησιμοποιείται για την δημιουργία web φόρμας για εισαγωγή δεδομένων από τον χρήστη.

<form>
   ...
   ετικέτες φόρμας
   ...
</form>

Το στοιχείο <form> περιλαμβάνει διαφορετικούς τύπους στοιχείων της φόρμας όπως: text, checkboxes, radio buttons, submit buttons κλπ.

<input>

Το στοιχείο <input> μπορεί να εμφανίσει διαφορετικούς τύπους εισαγωγής δεδομένων. Αυτό μπορεί να οριστεί στην ιδιότητα type.


  • <input type="text"> Εμφανίζει πεδίο μονής γραμμής για εισαγωγή text.
  • <input type="radio"> Εμφανίζει radio button (Διαλέγοντας μια από πολλές επιλογές).
  • <input type="checkbox"> Εμφανίζει ένα checkbox (Διαλέγοντας καμία ή περισσότερες επιλογές).
  • <input type="submit"> Εμφανίζει το κουμπό submit (αποστολή δεδομένων της φόρμας).
  • <input type="button"> Εμφανίζει ένα απλό κουμπί.

To <input> δέχεται ορισμένα ορίσματα. Ένα από αυτά είναι το name. Στο name δίνουμε ένα όνομα για να μπορούμε να διαχωρίζουμε τα στοιχεία της φόρμας μας. Αυτό συμβαίνει γιατί ως συνήθως μία φόρμα περιέχει περισσότερα από ένα στοιχεία. Αν δεν ορίζαμε ένα όνομα στην name τότε θα ήταν αδύνατη η διάκριση μεταξύ των στοιχείων της φόρμας μας κατά την αποστολή τους στον web server. Σε περίπτωση που δεν ορίσουμε κάποιο όνομα στην name, τότε τα στοιχεία που θα δηλώσει ο χρήστης δεν θα σταλλούν στον web server.

 <form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" value="John"><br><br>
  <input type="submit" value="Submit">
</form>

Πεδίο TEXT

 <form>
  <label for="onoma">First name:</label><br>
  <input type="text" id="onoma" name="onoma"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="eponymo" name="eponymo">
</form>

Αποτέλεσμα:

Capture

<label>

Όπως ήδη παρατηρήσατε την ετικέτα <label> ήδη την χρησιμοποιήσαμε σε προηγούμενα παραδείγματα.

Το tag <label> ορίζει την ετικέτα των στοιχείων της φόρμας μας. Δίπλα σε κάθε στοιχείο της φόρμας είτε είναι text, checkbox ή radio button, δίπλα πρέπει να υπάρχει μία ετικέτα που θα διευκρινίζει στον χρήστη τί στοιχεία θα πρέπει να δηλώσει στην φόρμα μας.

Επίσης, βοηθά στους χρήστες που δυσκολεύονται να κάνουν κλικ σε ένα συγκεκριμένο στοιχείο όπως για παράδειγμα το checkbox. Τους διευκολύνει γιατί μπορούν να κάνουν κλικ πάνω στο label και να ενεργοποιηθεί το checkbox.

Για να επιτευχθεί η αντιστοιχία μεταξύ του <label> και του στοιχείου της φόρμας μας, θα πρέπει το for του <label> με το id του στοιχείου της φόρμας να είναι το ίδιο.

 <form>
  <label for="onoma">First name:</label><br>
  <input type="text" id="onoma" name="fname"><br>
</form>

Radio buttons

Τα radio buttons τα χρησιμοποιούμε για να επιλέγει ο χρήστης μόνο ΜΙΑ επιλογή από τις πολλές.

 <form>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label>
</form>

Αποτέλεσμα:

radio

Checkbox

Tα checkboxes τα χρησιμοποιούμε όταν θέλουμε ο χρήστης να επιλέγει καμία, μία ή περισσότερες από μία επιλογές.

 <form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>

Αποτέλεσμα:

checkbox