Φόρμες στην HTML (HTML forms)

Φόρμες στην HTML

Οι φόρμες στην HTML μας δίνουν τη δυνατότητα να πάρουμε πληροφορίες από το χρήστη με διάφορους τρόπους ανάλογα με τις ανάγκες τις σελίδας μας. Οι φόρμες ανοίγουν και κλείνουν με τις ετικέτες <form> και </form>.

Κάποιες από τις ιδιότητες της ετικέτας form είναι οι name, method και action.

Παράδειγμα

<form name="myform" method="get" action="example.php">
  form elements...
</form>

Η ετικέτα <input> μαζί με την ιδιότητα type είναι αυτές που καθορίζουν το είδος της φόρμας που θα χρησιμοποιήσουμε. Τα είδη των φορμών είναι:

• Radio Buttons (Κουμπιά Επιλογής)
• Check Boxes (Κουμπιά Πολλαπλής Επιλογής)
• Drop-Down List (Αναπτυσσόμενες Λίστες)
• Text Fields (Πεδία Κειμένου)
• Text Areas (Περιοχές Κειμένου)
• Buttons (Κουμπιά)

Radio Buttons

Τα Κουμπιά Επιλογής δίνουν τη δυνατότητα στο χρήστη να διαλέξει μία επιλογή από τα διαθέσιμα κουμπιά.

Παράδειγμα

<form>
  <input type="radio" name="gender" value="male" checked> Άντρας<br>
  <input type="radio" name="gender" value="female"> Γυναίκα<br>
  <input type="radio" name="gender" value="other"> Άλλο
</form>

Αποτέλεσμα

Check Βoxes

Τα Κουμπιά Πολλαπλής Επιλογής δίνουν τη δυνατότητα στο χρήστη να διαλέξει παραπάνω από μία επιλογές από τα διαθέσιμα κουμπιά.

Παράδειγμα

<form>
  <input type="checkbox" name="vehicle1" value="Bike"> Ποδήλατο<br>
  <input type="checkbox" name="vehicle2" value="Motorcycle"> Μοτοσυκλέτα<br>
  <input type="checkbox" name="vehicle3" value="Car"> Αυτοκίνητο<br>
</form>

Αποτέλεσμα

Drop-Down List

Οι Αναπτυσσόμενες Λίστες δίνουν τη δυνατότητα στο χρήστη να διαλέξει μία επιλογή από αυτήν.

Παράδειγμα

<form>
  <select name="language">
    <option value="Greek">Greek</option>
    <option value="English">English</option>
    <option value="Spanish">Spanish</option>
    <option value="Italian">Italian</option>
  </select>
</form>

Αποτέλεσμα

Text Fields

Τα πεδία κειμένων δίνουν τη δυνατότητα στο χρήστη να εισάγει κείμενο.

Παράδειγμα

<form>
  Όνομα:<br>
  <input type="text" name="firstname"><br>
  Επίθετο:<br>
  <input type="text" name="lastname">
</form>

Αποτέλεσμα

Text Areas

Οι Περιοχές Κειμένων δίνουν και αυτές τη δυνατότητα στο χρήστη να εισάγει κείμενο αλλά το πλαίσιο της περιλαμβάνει περισσότερες γραμμές, με αποτέλεσμα να χωρά μεγαλύτερο κείμενο.

Παράδειγμα

<form>
  Γράψτε εδώ το μήνυμά σας. <br>
  <textarea name="message" rows="10" cols="30">
  </textarea>
</form>

Αποτέλεσμα

Buttons

Τα κουμπιά δίνουν τη δυνατότητα στο χρήστη, μόλις ολοκληρώσει τη συμπλήρωση των φορμών να στείλει τις πληροφορίες.

Παράδειγμα

<form>
 Όνομα:<br>
 <input type="text" name="firstname" value="Όνομα"><br>
 Επίθετο:<br>
 <input type="text" name="lastname" value="Επίθετο"><br><br>
 <input type="submit" value="Αποστολή">
</form>

Αποτέλεσμα