Στην ενότητα αυτή παρουσιάζονται οι νέες ιδιότητες που εισήγαγε η HTML5.
Νέες ιδιότητες στην ετικέτα <form>
Ιδιότητα autocomplete
Όταν ένα πεδίο είναι autocomplete, τότε με την πληκτρολόγηση των πρώτων χαρακτήρων, εμφανίζει μια λίστα με τις λέξεις ή τις προτάσεις που έχουμε πληκτρολογήσει στο παρελθόν, στο συγκεκριμένο πεδίο και στην συγκεκριμένη ιστοσελίδα
Η ύπαρξη της ιδιότητας autocomplete στην ετικέτα <form> ορίζει όλα τα πεδία της σαν autocomplete. Τα πεδία που μπορούν να είναι autocomplete είναι τα πεδία με input types: text, search, url, telephone, email, password, ημερολογιακά και ωρολογιακά πεδία όπως το date και time, range και color.
Οι τιμές που μπορεί να πάρει η ιδιότητα autocomplete είναι on και off.
Ιδιότητα novalidate
Η ιδιότητα novalidate, κάθε φορά που γίνεται submit, δεν επιτρέπει τον αυτόματο έλεγχο της ορθότητας των τιμών που πληκτρολογούν οι χρήστες στα πεδία της φόρμας.
Οι τιμές που μπορεί να πάρει είναι true και false.
Όταν ένα πεδίο είναι autocomplete, τότε με την πληκτρολόγηση των πρώτων χαρακτήρων, εμφανίζει μια λίστα με τις λέξεις ή τις προτάσεις που έχουμε πληκτρολογήσει στο παρελθόν, στο συγκεκριμένο πεδίο και στην συγκεκριμένη ιστοσελίδα
Η ύπαρξη της ιδιότητας autocomplete στην ετικέτα <form> ορίζει όλα τα πεδία της σαν autocomplete. Τα πεδία που μπορούν να είναι autocomplete είναι τα πεδία με input types: text, search, url, telephone, email, password, ημερολογιακά και ωρολογιακά πεδία όπως το date και time, range και color.
Οι τιμές που μπορεί να πάρει η ιδιότητα autocomplete είναι on και off.
Η ιδιότητα autocomplete
<form action="demo_form.asp" method="get" autocomplete="on">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>
Ιδιότητα novalidate
Η ιδιότητα novalidate, κάθε φορά που γίνεται submit, δεν επιτρέπει τον αυτόματο έλεγχο της ορθότητας των τιμών που πληκτρολογούν οι χρήστες στα πεδία της φόρμας.
Οι τιμές που μπορεί να πάρει είναι true και false.
Η ιδιότητα novalid
<form action="demo_form.asp" method="get" novalidate="true">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>
Νέες ιδιότητες στην ετικέτα <input>
Ιδιότητα autocomplete
Όταν ένα πεδίο είναι autocomplete, τότε με την πληκτρολόγηση των πρώτων χαρακτήρων, εμφανίζει μια λίστα με τις λέξεις ή τις προτάσεις που έχουμε πληκτρολογήσει στο παρελθόν, στο συγκεκριμένο πεδίο και στην συγκεκριμένη ιστοσελίδα
Η ύπαρξη της ιδιότητας autocomplete στην ετικέτα <input> ορίζει το πεδίο αυτό σαν autocomplete. Τα πεδία που μπορούν να είναι autocomplete είναι αυτά που έχουν input types: text, search, url, telephone, email, password, ημερολογιακά και ωρολογιακά πεδία όπως το date και time, range και color.
Οι τιμές που μπορεί να πάρει η ιδιότητα autocomplete είναι on και off.
Ιδιότητα autofocus
Η ύπαρξη της ιδιότητας autofocus σε ένα πεδίο σημαίνει ότι κάθε φορά που φορτώνεται η σελίδα, ο κέρσορας του πληκτρολογίου θα αναβοσβήνει στο πεδίο αυτό, όπως γίνεται στο Google (κάθε φορά που φορτώνει η σελίδα του Google, ο κέρσορας του πληκτρολογίου αναβοσβήνει στο πεδίο αναζήτησης περιμένοντας από τον χρήστη να πληκτρολογήσει τις λέξεις-κλειδιά της αναζήτησης)
Η τιμή που μπορεί να πάρει είναι autofocus
Η ιδιότητα form
Ένα πεδίο μιας φόρμας, μπορεί να ανήκει και σε μια άλλη φόρμα ή και σε μια τρίτη φόρμα κ.ο.κ. Η ιδιότητα form της ετικέτας <input>, μπορεί να πάρει σαν τιμές τις τιμές των id των φορμών που ανήκει, χωρισμένες με κενό.
Ιδιότητες παράκαμψης
Οι ιδιότητες παράκαμψης, παρακάμπτουν συγκεκριμένες λειτουργίες τις οποίες ορίζουν άλλες ιδιότητες στην ετικέτα <form>. Οι ιδιότητες παράκαμψης τοποθετούνται στα πεδία input type="submit" και input type="image" και είναι οι εξής:
- formaction - παρακάμπτει την ιδιότητα action
- formenctype - παρακάμπτει την ιδιότητα enctype
- formmethod - παρακάμπτει την ιδιότητα method
- formnovalidate - παρακάμπτει την ιδιότητα novalidate
- formtarget - παρακάμπτει την ιδιότητα target
Οι ιδιότητες width και height
Οι ιδιότητες αυτές ορίζουν το μήκος και το ύψος της εικόνας που έχει οριστεί σαν input type="image"
Η ιδιότητα list
Η τιμή της ιδιότητα list σε ένα πεδίο, είναι η τιμή που έχει η ιδιότητα id μιας ετικέτας <datalist>. Με αυτόν τον τρόπο ορίζεται ένα επιτρεπτό σύνολο τιμών (datalist) για ένα πεδίο. Η ιδιότητα αυτή μπορεί να χρησιμοποιηθεί στα input types: text, search, url, telephone, email, ημερολογιακά και ωρολογιακά πεδία, number, range, και color.
Οι ιδιότητες min, max και step
Οι ιδιότητες αυτές μπορούν να χρησιμοποιηθούν στα πεδία με input types: number, range και ημερολογιακά και ωρολογιακά πεδία.
Η ιδιότητα max ορίζει τον μέγιστο αριθμό που μπορεί να πάρει ένα πεδίο.
Η ιδιότητα min ορίζει τον μικρότερο αριθμό που μπορεί να πάρει ένα πεδίο
Η ιδιότητα step ορίζει το σύνολο των αριθμών που μπορεί να πάρει ένα πεδίο. Για παράδειγμα, αν ορίσουμε στην ιδιότητα την τιμή 5, τότε οι επιτρεπτοί αριθμοί είναι οι: ...,-10, -5, 0, 5,10,15...κτλ.
Ιδιότητα multiple
Η ιδιότητα multiple μπορεί να χρησιμοποιηθεί στα πεδία με input types: email και file.
Η ύπαρξη της ιδιότητας αυτής σε ένα πεδίο σημαίνει πως μπορούμε να επιλέξουμε σε αυτό περισσότερες από μια τιμές.
Η τιμή που μπορεί να πάρει είναι multiple
Ιδιότητα novalidate
Η ιδιότητα novalidate, κάθε φορά που γίνεται submit, δεν επιτρέπει τον αυτόματο έλεγχο της ορθότητας των τιμών που πληκτρολογούν οι χρήστες στα πεδίο της φόρμας το οποίο περιέχει την ιδιότητα αυτή
Οι τιμές που μπορεί να πάρει είναι true και false
Η ιδιότητα pattern
Η ιδιότητα pattern ορίζει σε ένα πεδίο ένα σύνολο χαρακτήρων που μπορεί να πάρει το πεδίο αυτό. Το σύνολο χαρακτήρων προκύπτει από την μέθοδο RegExp της JavaScript. Μάθετε περισσότερα
Η ιδιότητα αυτή μπορεί να χρησιμοποιηθεί σε πεδία με input type: text, search, url, telephone, email, και password
Η ιδιότητα placeholder
Η ιδιότητα placeholder ορίζει ένα σύντομο κείμενο το οποίο περιγράφει την τιμή που παίρνει ένα πεδίο. Το κείμενο αυτό σβήνεται όταν ο χρήστης τοποθετεί τον κέρσορα του ποντικιού του στο πεδίο αυτό.
Η ιδιότητα required
Η ιδιότητα required ορίζει τα πεδία που απαραίτητα πρέπει να συμπληρωθούν από τον χρήστη πριν την υποβολή (submit) της φόρμας.
Η ιδιότητα μπορεί να χρησιμοποιηθεί σε πεδία με input types: text, search, url, telephone, email, password, ημερολογιακά πεδία, number, checkbox, radio, και file.
Η τιμή που μπορεί να πάρει είναι required
Όταν ένα πεδίο είναι autocomplete, τότε με την πληκτρολόγηση των πρώτων χαρακτήρων, εμφανίζει μια λίστα με τις λέξεις ή τις προτάσεις που έχουμε πληκτρολογήσει στο παρελθόν, στο συγκεκριμένο πεδίο και στην συγκεκριμένη ιστοσελίδα
Η ύπαρξη της ιδιότητας autocomplete στην ετικέτα <input> ορίζει το πεδίο αυτό σαν autocomplete. Τα πεδία που μπορούν να είναι autocomplete είναι αυτά που έχουν input types: text, search, url, telephone, email, password, ημερολογιακά και ωρολογιακά πεδία όπως το date και time, range και color.
Οι τιμές που μπορεί να πάρει η ιδιότητα autocomplete είναι on και off.
Η ιδιότητα autocomplete
User name: <input type="text" name="user_name" autocomplete="on" />
Ιδιότητα autofocus
Η ύπαρξη της ιδιότητας autofocus σε ένα πεδίο σημαίνει ότι κάθε φορά που φορτώνεται η σελίδα, ο κέρσορας του πληκτρολογίου θα αναβοσβήνει στο πεδίο αυτό, όπως γίνεται στο Google (κάθε φορά που φορτώνει η σελίδα του Google, ο κέρσορας του πληκτρολογίου αναβοσβήνει στο πεδίο αναζήτησης περιμένοντας από τον χρήστη να πληκτρολογήσει τις λέξεις-κλειδιά της αναζήτησης)
Η τιμή που μπορεί να πάρει είναι autofocus
Η ιδιότητα autofocus
User name: <input type="text" name="user_name" autofocus="autofocus" />
Η ιδιότητα form
Ένα πεδίο μιας φόρμας, μπορεί να ανήκει και σε μια άλλη φόρμα ή και σε μια τρίτη φόρμα κ.ο.κ. Η ιδιότητα form της ετικέτας <input>, μπορεί να πάρει σαν τιμές τις τιμές των id των φορμών που ανήκει, χωρισμένες με κενό.
Η ιδιότητα form
<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />
Ιδιότητες παράκαμψης
Οι ιδιότητες παράκαμψης, παρακάμπτουν συγκεκριμένες λειτουργίες τις οποίες ορίζουν άλλες ιδιότητες στην ετικέτα <form>. Οι ιδιότητες παράκαμψης τοποθετούνται στα πεδία input type="submit" και input type="image" και είναι οι εξής:
- formaction - παρακάμπτει την ιδιότητα action
- formenctype - παρακάμπτει την ιδιότητα enctype
- formmethod - παρακάμπτει την ιδιότητα method
- formnovalidate - παρακάμπτει την ιδιότητα novalidate
- formtarget - παρακάμπτει την ιδιότητα target
Η ιδιότητα παράκαμψης formaction
<form action="demo_form.asp" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" />
<br />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
<br />
<input type="submit" formnovalidate="true"
value="Submit without validation" />
<br />
</form>
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" />
<br />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
<br />
<input type="submit" formnovalidate="true"
value="Submit without validation" />
<br />
</form>
Οι ιδιότητες width και height
Οι ιδιότητες αυτές ορίζουν το μήκος και το ύψος της εικόνας που έχει οριστεί σαν input type="image"
Μέγεθος του κουμπιού submit
<input type="image" src="/img_submit.gif" width="24" height="24" />
Η ιδιότητα list
Η τιμή της ιδιότητα list σε ένα πεδίο, είναι η τιμή που έχει η ιδιότητα id μιας ετικέτας <datalist>. Με αυτόν τον τρόπο ορίζεται ένα επιτρεπτό σύνολο τιμών (datalist) για ένα πεδίο. Η ιδιότητα αυτή μπορεί να χρησιμοποιηθεί στα input types: text, search, url, telephone, email, ημερολογιακά και ωρολογιακά πεδία, number, range, και color.
Ορισμός λίστας επιτρεπτών επιλογών για ένα πεδίο κειμένου
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3schools.com" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3schools.com" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
Οι ιδιότητες min, max και step
Οι ιδιότητες αυτές μπορούν να χρησιμοποιηθούν στα πεδία με input types: number, range και ημερολογιακά και ωρολογιακά πεδία.
Η ιδιότητα max ορίζει τον μέγιστο αριθμό που μπορεί να πάρει ένα πεδίο.
Η ιδιότητα min ορίζει τον μικρότερο αριθμό που μπορεί να πάρει ένα πεδίο
Η ιδιότητα step ορίζει το σύνολο των αριθμών που μπορεί να πάρει ένα πεδίο. Για παράδειγμα, αν ορίσουμε στην ιδιότητα την τιμή 5, τότε οι επιτρεπτοί αριθμοί είναι οι: ...,-10, -5, 0, 5,10,15...κτλ.
Οι ιδιότητες min, max και step
Points: <input type="number" name="points" min="0" max="10" step="3" />
Ιδιότητα multiple
Η ιδιότητα multiple μπορεί να χρησιμοποιηθεί στα πεδία με input types: email και file.
Η ύπαρξη της ιδιότητας αυτής σε ένα πεδίο σημαίνει πως μπορούμε να επιλέξουμε σε αυτό περισσότερες από μια τιμές.
Η τιμή που μπορεί να πάρει είναι multiple
Η ιδιότητα multiple
Select images: <input type="file" name="img" multiple="multiple" />
Ιδιότητα novalidate
Η ιδιότητα novalidate, κάθε φορά που γίνεται submit, δεν επιτρέπει τον αυτόματο έλεγχο της ορθότητας των τιμών που πληκτρολογούν οι χρήστες στα πεδίο της φόρμας το οποίο περιέχει την ιδιότητα αυτή
Οι τιμές που μπορεί να πάρει είναι true και false
Η ιδιότητα novalidate
<form action="demo_form.asp" method="get">
E-mail: <input type="email" name="user_email" novalidate="true" />
<input type="submit" />
</form>
E-mail: <input type="email" name="user_email" novalidate="true" />
<input type="submit" />
</form>
Η ιδιότητα pattern
Η ιδιότητα pattern ορίζει σε ένα πεδίο ένα σύνολο χαρακτήρων που μπορεί να πάρει το πεδίο αυτό. Το σύνολο χαρακτήρων προκύπτει από την μέθοδο RegExp της JavaScript. Μάθετε περισσότερα
Η ιδιότητα αυτή μπορεί να χρησιμοποιηθεί σε πεδία με input type: text, search, url, telephone, email, και password
Η ιδιότητα pattern
Country code: <input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" />
pattern="[A-z]{3}" title="Three letter country code" />
Η ιδιότητα placeholder
Η ιδιότητα placeholder ορίζει ένα σύντομο κείμενο το οποίο περιγράφει την τιμή που παίρνει ένα πεδίο. Το κείμενο αυτό σβήνεται όταν ο χρήστης τοποθετεί τον κέρσορα του ποντικιού του στο πεδίο αυτό.
Η ιδιότητα placeholder
<input type="search" name="user_search" placeholder="Search..." />
Η ιδιότητα required
Η ιδιότητα required ορίζει τα πεδία που απαραίτητα πρέπει να συμπληρωθούν από τον χρήστη πριν την υποβολή (submit) της φόρμας.
Η ιδιότητα μπορεί να χρησιμοποιηθεί σε πεδία με input types: text, search, url, telephone, email, password, ημερολογιακά πεδία, number, checkbox, radio, και file.
Η τιμή που μπορεί να πάρει είναι required
Η ιδιότητα required
<input type="text" name="usr_name" required="required" />
