Εισαγωγή στην Form HTML: Δομή, Τύποι Εισόδου και Παραδείγματα

Η HTML form είναι ένα κρίσιμο μέρος της ανάπτυξης ιστού που επιτρέπει στους χρήστες να αλληλεπιδρούν με έναν ιστότοπο και να υποβάλλουν δεδομένα σε έναν διακομιστή. Form χρησιμοποιούνται για ένα ευρύ φάσμα σκοπών, όπως η συλλογή χρηστών form, η επεξεργασία των εισροών χρήστη και η ενεργοποίηση ενεργειών χρήστη σε έναν ιστότοπο. Σε αυτό το άρθρο, θα εξερευνήσουμε τα χαρακτηριστικά και τους διαφορετικούς τύπους πεδίων εισαγωγής, επιλεγμένα στοιχεία, περιοχές κειμένου και κουμπιά που χρησιμοποιούνται συνήθως σε HTML form.

Πεδία εισαγωγής

• <input type="text">: Δημιουργεί ένα πεδίο εισαγωγής κειμένου όπου οι χρήστες μπορούν να εισάγουν αλφαριθμητικούς χαρακτήρες.
• <input type="password">: Εμφανίζει ένα πεδίο εισαγωγής κωδικού πρόσβασης που καλύπτει τους χαρακτήρες που έχετε εισαγάγει.
• <input type="email">: Παρέχει επικύρωση email για πεδία εισαγωγής που απαιτούν έγκυρη διεύθυνση email.
• <input type="number">: Περιορίζει την εισαγωγή μόνο σε αριθμητικές τιμές.
• <input type="checkbox">: Αντιπροσωπεύει ένα πλαίσιο ελέγχου που οι χρήστες μπορούν να επιλέξουν ή να αποεπιλέξουν.
• <input type="radio">: Αντιπροσωπεύει ένα κουμπί επιλογής που επιτρέπει στους χρήστες να επιλέξουν μία επιλογή από μια ομάδα επιλογών.
• <input type="file">: Επιτρέπει στους χρήστες να επιλέγουν και να ανεβάζουν αρχεία.
• <input type="submit">: Εμφανίζει ένα κουμπί που υποβάλλει το form όταν κάνετε κλικ.
• <input type="reset">: Εμφανίζει ένα κουμπί που επαναφέρει το form στην αρχική του κατάσταση.
• <input type="date">: Παρέχει ένα εργαλείο επιλογής ημερομηνίας για την επιλογή ημερομηνιών.
• <input type="time">: Επιτρέπει στους χρήστες να εισάγουν τιμές χρόνου.

Επιλέξτε Στοιχεία

• <select>: Δημιουργεί ένα αναπτυσσόμενο μενού με επιλέξιμες επιλογές.
• <option>: Καθορίζει μια επιλογή στο αναπτυσσόμενο μενού, τοποθετημένη μέσα στην <select> ετικέτα.
• <optgroup>: Ομαδοποιεί τις σχετικές επιλογές μαζί στο αναπτυσσόμενο μενού.
• <select multiple>: Επιτρέπει στους χρήστες να επιλέγουν πολλές επιλογές ταυτόχρονα κρατώντας πατημένο το πλήκτρο Ctrl(ή το πλήκτρο Command στο Mac) ενώ κάνουν κλικ.

Τεξταρέας

<textarea>: Δημιουργεί ένα πεδίο εισαγωγής κειμένου σε πολλές γραμμές όπου οι χρήστες μπορούν να εισάγουν και να επεξεργάζονται μεγαλύτερα τμήματα κειμένου. Μπορεί να αλλάξει το μέγεθός του και να διαμορφωθεί με χαρακτηριστικά όπως rows και cols να ορίσει τις διαστάσεις του.

Κουμπιά

<button>: Αντιπροσωπεύει ένα κουμπί που μπορεί να ενεργοποιήσει διάφορες ενέργειες μέσα σε ένα form. Μπορεί να χρησιμοποιηθεί για την υποβολή ενός form, ανά form συνάρτηση JavaScript ή για πλοήγηση σε διαφορετική σελίδα.

Παράδειγμα χρήσης:

<form action="/submit-form" method="post">  
  <label for="name">Name:</label>  
  <input type="text" id="name" name="name" required>  
    
  <label for="email">Email:</label>  
  <input type="email" id="email" name="email" required>  
    
  <label for="message">Message:</label>  
  <textarea id="message" name="message" rows="4" cols="50"></textarea>  
    
  <label for="newsletter">Subscribe to Newsletter:</label>  
  <input type="checkbox" id="newsletter" name="newsletter">  
    
  <label for="color">Favorite Color:</label>  
  <select id="color" name="color">  
    <option value="red">Red</option>  
    <option value="blue">Blue</option>  
    <option value="green">Green</option>  
  </select>  
    
  <button type="submit">Submit</button>  
</form>

Αυτό το παράδειγμα δείχνει τη χρήση διαφόρων form στοιχείων, συμπεριλαμβανομένων input των πεδίων, textarea, και ενός κουμπιού. Μη διστάσετε να προσαρμόσετε τα στοιχεία και τα χαρακτηριστικά με βάση τις συγκεκριμένες απαιτήσεις σας. checkbox select dropdown submit form