#58 membuat input warna dan file pada html

kali ini kita akan belajar cara membuat input warna dan file pada html.

membuat input color

input type=”color” adalah input yang digunakan untuk memilih warna.

nilai atribut type color disebut juga color picker yaitu widget antarmuka pengguna grafis untuk pemilihan warna.

inputan akan berisi string dengan 7 karakter walaupun menentukan RGB akan di convert kedalam format heksadesimal. contoh RGB R: 0 G:) B:0 akan diconvert ke heksadesima #000000.

browser yang mendukung tag input dengan atribut type bernilai color akan membuat inputan seperti tombol, warna default jika value tidak ditentukan akan berwarna hitam.

<!DOCTYPE html>
<html>
<head>
    <title> input warna pada html </title>
</head>
<body>
     <input type="color" >
</body>
</html>Code language: HTML, XML (xml)

ketika mengklik tombol tersebut akan membuga widget warna yang memungkinkan pengguna untuk memilih warna seperti dibawah ini.

tampilan pilihan warna di browser chrome Mac OS Big Sur

*pilihan warna di browser safari Mac OS Big Sur*

setiap pilihan warna akan menampilkan tampilan yang berbeda-beda sesuai dengan Operasi Sistem dan Browsernya.

kita juga bisa menentukan nilai default dengan format heksadesimal. contohnya seperti dibawah ini.

<!DOCTYPE html>
<html>
<head>
    <title> input warna default pada html </title>
</head>
<body>
    <input type="color" value="#0051B9">
</body>
</html>Code language: HTML, XML (xml)

tampilan tombol warna default yang sudah ditentukan.

input file pada html

input file berfungsi bagi pengguna untuk memilih file dari sistem file lokal untuk penggunaan halaman web.

jika input file digunakan bersama elemen <form></form>, maka pengguna bisa mengunggah file ke server.

pengguna menggunakan input file untuk memilih file dari sistem dan mengunggah file ke skrip di server contohnya sebagai berikut.

<!DOCTYPE html>
<html>
<head>
    <title> input file pada html </title>
</head>
<body>
    <form action="upload_file.php" method="post" enctype="multipart/form-data">
        Pilih file untuk diupload: <br><br>
        <input type="file"> <br><br>
        <input type="submit" value="Upload file">
    </form>
</body>
</html>Code language: HTML, XML (xml)

ketika kita klik Choose File maka akan tampil folder pada sistem operasi kita , cari dan pilih file yang akan diupload.

Multiple Files

Gunakan atribut multiple untuk menambahkan file lebih dari satu.

contohnya sebagai berikut, klik tombol Coba Script untuk mencobanya.

<!DOCTYPE html>
<html>
<head>
    <title> input file multiple pada html </title>
</head>
<body>
    <form action="upload_file.php" method="post" enctype="multipart/form-data">
        Pilihlah beberapa file untuk diupload: <br><br>
        <input type="file" multiple=""> <br><br>
        <input type="submit" value="Upload file">
    </form>
</body>
</html>Code language: HTML, XML (xml)

jika menambahkan atribut multiple maka kita bisa memilih banyak file, pada saat memilih pada sistem file lokal tekan tombol Shift dan klik beberapa file yang akan dipilih.

pada gambar diatas pengguna memilih 9 file yang akan diupload.

apabila tidak menambahkan atribut multiple maka tombol shift tidak akan berfungsi.

Accept Files

accept adalah atribut yang menentukan jenis file yang harus diterima input file.

seringkali kita tidak ingin pengguna dapat memilih sembarang jenis file. misalnya jika input file pengguna untuk mengunggah gambar profil, mungkin akan memilih format gambar yang kompatibel dengan web seperti jpeg atau png.

atribut accept berguna untuk menentukan jenis file yang dapat dipilih pengguna, misalnya .png, .gif, .jpeg.

<!DOCTYPE html>
<html>
<head>
    <title> input file hanya gambar pada html </title>
</head>
<body>
    <form action="upload_file.php" method="post" enctype="multipart/form-data">
        Pilih gambar untuk diupload: <br><br>
        <input type="file" accept="image/x-png,image/gif,image/jpeg"> <br><br>
        <input type="submit" value="Upload file">
    </form>
</body>
</html>Code language: HTML, XML (xml)