Εκμάθηση HTML Μέρος 29: Χρήση Readonly, Disabled και Target Attributes σε φόρμες HTML
Σίγουρα γνωρίζετε ήδη την ετικέτα <input>τη λειτουργία του στο προηγούμενο άρθρο. Αυτή η ετικέτα χρησιμοποιείται για τη δημιουργία στοιχείων που χρησιμοποιούνται για την αίτηση πληροφοριών από το χρήστη. Αυτή η ετικέτα μπορεί γενικά να έχει τη μορφή πλαισίων κειμένου, κουμπιών, κουτιών επιλογής και άλλων.
Στο προηγούμενο σεμινάριο, συζητήσαμεσχετικά με τη χρήση ετικετών εισόδου σε HTML και τις τιμές τύπου εισόδου, όπως κείμενο, κωδικό πρόσβασης και υποβολή. Λοιπόν, σε αυτό το σεμινάριο θα συζητήσουμε τη χρήση αναγνωρισμένων αναγνωριστικών, αναπήρων και στόχων σε φόρμες HTML. Αυτά τα χαρακτηριστικά έχουν σίγουρα διαφορετικές λειτουργίες στην εφαρμογή τους. Για περισσότερες λεπτομέρειες σχετικά με τα τρία χαρακτηριστικά, ας δούμε το παρακάτω σεμινάριο:
Χαρακτηριστικά ανάγνωσης και Απενεργοποίηση
Γενικά, τα χαρακτηριστικά είναι readonly και απενεργοποιημέναχρησιμοποιείται για να καταστεί το πλαίσιο κειμένου άχρηστο. Για ορισμένους σκοπούς, χρειάζεστε σίγουρα αυτά τα δύο χαρακτηριστικά, ώστε το πλαίσιο κειμένου να μην μπορεί να αλλάξει, για παράδειγμα για ένα πλαίσιο κειμένου που έχει μια προεπιλεγμένη τιμή. Τα παρακάτω είναι μια εξήγηση για αυτά τα δύο χαρακτηριστικά.
1. Χαρακτηριστικό readonly
Το χαρακτηριστικό readonly χρησιμοποιείται για να καθορίσει ότι το στοιχείο <input> μπορεί να διαβαστεί μόνο χωρίς να είναι επεξεργάσιμο. Το παρακάτω είναι ένα παράδειγμα γραφής και χρήσης του χαρακτηριστικού readonly σε μια φόρμα HTML:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Readonly pada Form HTML</title>
</head>
<body>
<form action="proses_input.php" method="get">
Kode Barang :
<input type="text" name="kode" value ="BRG01" readonly> <br><br>
Jumlah Barang :
<input type="text" name="jumlah"><br><br>
Harga per satuan :
<input type="text" name="harga"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>Αφού εκτελεστεί ο παραπάνω κώδικας στο πρόγραμμα περιήγησης, θα εμφανιστεί όπως φαίνεται παρακάτω:
Στη στήλη Κωδικός στοιχείου, δεν μπορείτε να στείλετετην είσοδο δεδομένου ότι στη στήλη δόθηκε το αναγνωριστικό ανάγνωσης, οπότε η στήλη μπορεί να διαβάζεται μόνο και δεν μπορεί να επεξεργαστεί ή να αλλάξει.
2. Απενεργοποιημένα χαρακτηριστικά
Το απενεργοποιημένο χαρακτηριστικό χρησιμοποιείται για την απενεργοποίησηένα στοιχείο (για παράδειγμα ένα στοιχείο εισόδου). Παρόμοια με το χαρακτηριστικό readonly, αυτό το χαρακτηριστικό δεν χρειάζεται να καταγραφεί, απλά γράψτε απενεργοποιημένο. Ακολουθεί ένα παράδειγμα γραφής και χρήσης χαρακτηριστικών που έχουν απενεργοποιηθεί σε φόρμες HTML:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Disabled pada Form HTML</title>
</head>
<body>
<form action="proses_input.php" method="get">
Kode Barang :
<input type="text" name="kode" value ="BRG01" disabled> <br><br>
Jumlah Barang :
<input type="text" name="jumlah"><br><br>
Harga per satuan :
<input type="text" name="harga"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>Αφού εκτελεστεί ο παραπάνω κώδικας στο πρόγραμμα περιήγησης, θα εμφανιστεί όπως φαίνεται παρακάτω:
Διαφορές στις ιδιότητες Readonly και Disabled
Από τα δύο παραπάνω δείγματα κώδικα μπορείτε να δείτεδιαφορά από τη χρήση αναγνωρισμένων και απενεργοποιημένων χαρακτηριστικών. Το χαρακτηριστικό readonly διατηρεί το πλαίσιο κειμένου όπως συνήθως, ενώ το χαρακτηριστικό απενεργοποίησης καθιστά το πλαίσιο κειμένου γκρι. Ωστόσο, υπάρχει μια διαφορά που πρέπει να ξέρετε ότι όταν κάνετε κλικ στο κουμπί Υποβολή, η τιμή στο χαρακτηριστικό readonly εξακολουθεί να στέλνεται στο διακομιστή ενώ το χαρακτηριστικό απενεργοποίησης δεν είναι.
Χαρακτηρισμός readonly: value Κωδικός στοιχείου αποστολή στον διακομιστή
Απενεργοποιημένο χαρακτηριστικό: τιμή Κωδικός στοιχείου δεν έχουν σταλεί στον διακομιστή
3. Χαρακτηριστικά στόχων
Το χαρακτηριστικό στόχος χρησιμοποιείται για τον προσδιορισμό του τόπουτης απάντησης που ελήφθη μετά την επιτυχή υποβολή του εντύπου. Οι τιμές των χαρακτηριστικών στόχων είναι _blank, _self, _parent, and _top. Η χρήση αυτού του χαρακτηριστικού στόχου εξήγησα στο άρθρο πώς να δημιουργήσω συνδέσμους σε HTML.
Το παρακάτω είναι ένα παράδειγμα του κώδικα εγγραφής και της χρήσης του χαρακτηριστικού στόχου στη φόρμα HTML:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Target di HTML Forms</title>
</head>
<body>
<form action="proses_input.php" method="get" target="_blank">
Nama Depan: <input type="text" name="ndepan"><br>
Nama Belakang: <input type="text" name="nbelakang"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>Αφού εκτελεστεί ο παραπάνω κώδικας στο πρόγραμμα περιήγησης, θα εμφανιστεί όπως φαίνεται παρακάτω:
Όταν κάνετε κλικ στο κουμπί Υποβολή, τα αποτελέσματα της απάντησης που θα λάβετε θα εμφανιστούν σε μια νέα καρτέλα.
Αυτό είναι όλο το υλικό που χρησιμοποιεί τα χαρακτηριστικά ανάγνωσης, στόχευσης και απενεργοποίησης στη φόρμα HTML. Συνεχίστε να επισκέπτεστε αυτό το blog επειδή τα εκπαιδευτικά υλικά HTML για αρχάριους θα ενημερώνονται πάντα.
