Apprendimento dell'HTML Parte 29: Utilizzo degli attributi Readonly, Disabled e Target nei moduli HTML
Conoscerai sicuramente già il tag <input>la sua funzione nell'articolo precedente. Questo tag viene utilizzato per creare elementi utilizzati per richiedere informazioni all'utente. Questo tag può generalmente essere sotto forma di caselle di testo, pulsanti, caselle di selezione e altro.
Nel tutorial precedente, abbiamo discussosull'uso dei tag di input in HTML e i relativi valori del tipo di input come testo, password e invio. Bene, in questo tutorial discuteremo di usare gli attributi di sola lettura, disabilitati e target nei moduli HTML. Questi tre attributi hanno certamente funzioni diverse nella loro implementazione. Per maggiori dettagli sui tre attributi, diamo un'occhiata al seguente tutorial:
Attributi di sola lettura e disabilitati
In generale, gli attributi sono di sola lettura e disabilitatiusato per rendere inutilizzabile la casella di testo. Per alcuni scopi, sono certamente necessari questi due attributi in modo che la casella di testo non possa essere modificata, ad esempio per una casella di testo con un valore predefinito. Di seguito è una spiegazione di questi due attributi.
1. Attributo di sola lettura
L'attributo readonly viene utilizzato per specificare che l'elemento <input> può essere letto solo senza essere modificabile. Di seguito è riportato un esempio di scrittura e utilizzo dell'attributo readonly in un modulo 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>Dopo che il codice sopra è stato eseguito nel browser, apparirà come mostrato di seguito:
Nella colonna Codice articolo, non puoi inviarel'ingresso dati perché alla colonna è stato assegnato l'attributo readonly, quindi la colonna può essere solo di sola lettura e non può essere modificata o modificata.
2. Attributi disabilitati
L'attributo disabilitato viene utilizzato per disabilitareun elemento (ad esempio un elemento di input). Simile all'attributo readonly, questo attributo non ha bisogno di essere annotato, basta scrivere disabilitato. Di seguito è riportato un esempio di scrittura e utilizzo di attributi disabilitati su moduli 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>Dopo che il codice sopra è stato eseguito nel browser, apparirà come mostrato di seguito:
Differenze negli attributi di sola lettura e disabilitati
Dai due esempi di codice sopra, puoi vederedifferenza dall'uso degli attributi di sola lettura e disabilitati. L'attributo readonly mantiene la casella di testo come al solito mentre l'attributo disabilitato rende grigia la casella di testo. Tuttavia, c'è una differenza che devi sapere che quando fai clic sul pulsante Invia, il valore nell'attributo readonly viene comunque inviato al server mentre l'attributo disabilitato non lo è.
Attributo di sola lettura: valore Codice articolo inviato al server
Attributo disabilitato: valore Codice articolo non inviato al server
3. Attributi target
L'attributo target viene utilizzato per determinare il luogodella risposta ricevuta dopo che il modulo è stato inviato con successo. I valori degli attributi di destinazione sono _blank, _self, _parent e _top. L'uso di questo attributo target ho spiegato nell'articolo come creare collegamenti in HTML.
Di seguito è riportato un esempio del codice di scrittura e dell'utilizzo dell'attributo target nel modulo 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>Dopo che il codice sopra è stato eseguito nel browser, apparirà come mostrato di seguito:
Quando si fa clic sul pulsante Invia, i risultati della risposta ricevuta verranno visualizzati in una nuova scheda.
Questo è tutto il materiale che utilizza gli attributi di sola lettura, destinazione e disabilitazione nel modulo HTML. Continua a visitare questo blog perché i materiali di apprendimento HTML per i principianti saranno sempre aggiornati.
