Apprendimento HTML parte 33: utilizzo di file di tipo input, accettazione di attributi e immagine del tipo di input su moduli HTML

Per alcuni scopi, lo sei sicuramenteè necessario un modulo in grado di caricare file o allegati di immagini sul tuo sito Web, ad esempio allegati CV, portafogli, foto e altri. Ora, per rendere la funzione di caricamento utilizzare il tag <input>. Il tag <input> viene utilizzato per creare elementi per richiedere informazioni all'utente.

Nei tutorial precedenti, abbiamoapprendere l'uso dei tag <input> con tipi di input, ovvero testo, password, invio, casella di controllo e radio. Bene, in questo tutorial verrà discusso l'uso del tag <input> con il tipo di file di input e la seguente immagine con l'attributo accetta. Per maggiori dettagli sui due valori e attributi del tipo di input, diamo un'occhiata al tutorial seguente:

Tipo di file di input

Vengono utilizzati i tag di input con l'attributo type = "file"per caricare file. In generale, l'uso dell'attributo type = "file" è correlato all'uso di PHP. Di seguito è riportato un esempio di scrittura e utilizzo del tag <input> con il tipo "file" nel modulo HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Input Tipe File pada form HTML</title>
</head>
<body>
<form action="proses_input.php" method="get">
NIM : <input type="text" name="nim" size="11" maxlength="9"> <br><br>
Upload CV : <input type="file" name="cv"> <br><br>
<input type="submit" value="SUBMIT">
</form>
</body>
</html>

La visualizzazione nel browser in questo modo:

Il browser visualizzerà un pulsante con accanto il testo della didascalia, in cui il nome del pulsante e il testo della didascalia differiscono a seconda del browser Web utilizzato.

Attributo Accetta

L'attributo accetta viene utilizzato per specificare olimitare i tipi di file che possono essere caricati sia file musicali, file di documenti, file di immagini o altro. Questo attributo viene utilizzato quando si utilizza il tag <input> con l'attributo type = "file". I valori di questo attributo sono:

Estensione file: estensione file che inizia con un punto come .doc, .pdf, .jpg.
audio / *
immagine / *
video / *

Anche usando l'attributo accetta, utentepuò facilmente cambiare il tipo di file caricato. Pertanto, è meglio se la limitazione del tipo di file viene determinata anche sul lato server Web con PHP. Di seguito è riportato un esempio di scrittura e utilizzo dell'attributo accetta in moduli HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Atribut Accept pada form HTML</title>
</head>
<body>
<form action="proses_input.php" method="get">
Judul Lagu : <input type="text" name="lagu" size="11"> <br><br>
Mp3 : <input type="file" name="file_musik" accept="audio/*"> <br><br>
<input type="submit" value="SUBMIT">
</form>
</body>
</html>

Dopo che il codice sopra è stato eseguito nel browser, apparirà come mostrato di seguito:

Tipo di immagine in ingresso

Vengono utilizzati i tag di input con l'attributo type = "image"per inserire un'immagine nel modulo. Dove l'immagine funge da oggetto modulo a cui l'utente può fare clic. Quindi, quando l'utente fa clic sull'immagine, il browser Web visualizzerà le coordinate del punto in cui è stata cliccata l'immagine.

Anche se usato raramente, puoi usareinput type image per visualizzare altre immagini quando l'utente fa clic su determinate coordinate. Di seguito è riportato un codice di esempio per la scrittura e l'utilizzo di immagini di tipo input in moduli HTML:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Input Type Image pada Form HTML</title>
</head>
<body>
<h4>Contoh Penggunaan Input Type Image pada Form HTML</h4>
<form action="proses_gambar.php" method="get">
<input type="image" src="pantai.jpg" alt="pantai" width="400">
</form>
</body>
</html>

Dopo che il codice sopra è stato eseguito nel browser, apparirà come mostrato di seguito:

Quando si fa clic sull'area di disegno, le coordinate (xey) nell'area dell'immagine su cui si è fatto clic vengono visualizzate anche sul server.

Questa è una spiegazione dell'uso di tipi di file di input, immagini e attributi di accettazione. Assicurati di continuare a visitare questo blog per ottenere gli ultimi aggiornamenti del tutorial di apprendimento HTML per i principianti.

</ P>

Leggi di più: