Input type file
Tag input dengan atribut type = “file” digunakan untuk upload file. Secara umum, penggunaan atribut type = “file” berkaitan dengan penggunaan PHP. Berikut dibawah ini contoh penulisan dan penggunaan tag <input> dengan tipe “file” pada form 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>Tampilan di browsernya seperti ini:
Browser akan menampilkan sebuah tombol dengan teks keterangan disampingnya, dimana nama tombol dan teks keterangan tersebut berbeda-beda tergantung web browser yang digunakan.
Atribut Accept
Atribut accept digunakan untuk menentukan atau membatasi jenis file yang dapat diupload apakah itu file musik, file dokumen, file gambar ataupun yang lainnya. Atribut ini digunakan ketika Anda menggunakan tag <input> dengan atribut type = “file”. Adapun nilai dari atribut ini yaitu :- File extension : ekstensi file yang diawali dengan tanda titik seperti .doc, .pdf, .jpg.
- audio/*
- image/*
- video/*
<!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>
Setelah kode diatas dijalankan pada browser maka akan tampil seperti gambar dibawah ini:
Input type image
Tag input dengan atribut type = “image” digunakan untuk memasukkan gambar ke dalam form. Dimana gambar tersebut berfungsi sebagai objek form yang dapat diklik oleh pengguna. Kemudian, ketika pengguna mengklik gambar tersebut maka web browser akan menampilkan koordinat titik dimana gambar tersebut di-klik.Meskipun jarang digunakan, Anda dapat menggunakan input type image untuk menampilkan gambar lain ketika user mengklik koordinat tertentu. Berikut dibawah ini contoh code penulisan dan penggunaan input type image pada form 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>
Setelah kode diatas dijalankan pada browser maka akan tampil seperti gambar dibawah ini:
Ketika anda mengklik area gambar, titik koordinat (x dan y) pada area gambar yang anda klik tadi juga ditampilkan pada server.
Itulah penjelasan mengenai kegunaan dari input type file, image dan atribut accept. Pastikan anda terus mengunjungi blog ini untuk mendapatkan update terbaru tutorial belajar HTML untuk pemula.
Tidak ada komentar:
Posting Komentar