Είδη Εлементών Φόρμας HTML

Αυτό το κεφάλαιο περιγράφει όλα τα στοιχεία φόρμας HTML.

στοιχείο <input>

Ο πιο σημαντικός στοιχείο φόρμας είναι το <input> στοιχείο.

Το στοιχείο <input> ανάλογα με τον type Οι ιδιότητες μπορούν να αλλάξουν σε διάφορες μορφές.

Σημείωση:Το επόμενο κεφάλαιο εξηγεί όλους τους τύπους εισαγωγής HTML.

Το στοιχείο <select> (λίστα αναδυόμενη)

<select> Το στοιχείο <select> ορίζει τοΛίστα αναδυόμενη:

Παράδειγμα

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

Δοκιμάστε το προσωπικά

<option> Το στοιχείο <option> ορίζει την επιλογή που θα επιλεγεί.

Η λίστα θα δείχνει συνήθως την πρώτη επιλογή ως επιλεγμένη.

Μπορείτε να ορίσετε την προεπιλεγμένη επιλογή προσθέτοντας την ιδιότητα selected.

Παράδειγμα

<option value="fiat" selected>Fiat</option>

Δοκιμάστε το προσωπικά

Το στοιχείο <textarea>

<textarea> Ο στοιχείο <textarea> ορίζει το πεδίο εισαγωγής πολλαπλής γραμμής (Άσκημα κειμένου）：

Παράδειγμα

<textarea name="message" rows="10" cols="30">
Το κουτάβι έπαιζε στον κήπο.
</textarea>

Δοκιμάστε το προσωπικά

Το παρακάτω κώδικα HTML εμφανίζεται στον περιηγητή ως:

Το κουτάβι έπαιζε στον κήπο.

Το στοιχείο <button>

<button> Το στοιχείοΚουμπί:

Παράδειγμα

<button type="button" onclick="alert('Hello World!')">Κλικ μου!</button>

Δοκιμάστε το προσωπικά

Το παρακάτω κώδικα HTML εμφανίζεται στον περιηγητή ως:

Στοιχεία φόρμας HTML5

Το HTML5 προσθέτει τα εξής στοιχεία φόρμας:

  • <datalist>
  • <keygen>
  • <output>

Σημείωση:Προκαθορισμένα, οι περιηγητές δεν εμφανίζουν άγνωστα στοιχεία. Νέα στοιχεία δεν θα καταστρέψουν την ιστοσελίδα σας.

Το στοιχείο <datalist> του HTML5

<datalist> Στοιχείο που ορίζει τη λίστα επιλογών που προκαθορίζονται για το στοιχείο

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

στο στοιχείο list Η ιδιότητα πρέπει να αναφέρεται στο στοιχείο id Ιδιότητες.

Παράδειγμα

Ορίζοντας προκαθορισμένες τιμές στο στοιχείο <input> μέσω του <datalist>:

<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist> 
</form>

Δοκιμάστε το προσωπικά