Assalamu‘alaikum wr. wb.
Halo gais, Kembali lagi bersama Inzaghi's Blog! Dalam membuat Website, kita tentunya mengenal HTML. Dalam HTML banyak sekali yang bisa kita pelajari untuk membangun sebuah Website. Adapun dasar-dasar dalam mempelajari dari HTML adalah Input Type seperti Teks, Password, Button, Checkbox, dll.
 |
| Ilustrasi HTML Input Type |
Sumber Artikel Materi : Dosenit.com, Jagongoding.com, Javatpoint.com, W3schools.com, dan Freecodecamp.org
Dalam HTML <input type=" "> adalah elemen penting dari bentuk HTML. Atribut "type" dari elemen input dapat berupa berbagai jenis, yang mendefinisikan bidang informasi. Seperti <input type="text" name="name"> memberikan kotak teks.
1. Input Tipe Text
Jenis pertama adalah jenis text. Tipe ini merupakan tipe yang paling dasar dalam sebuah <input>, bahkan tanpa mendefinisikan atribut type pun browser akan memilih tipe ini sebagai default.
Contoh :
<p><label for="namadepan">Nama depan</label> <br /><input id="namadepan" type="text" /></p><p><label for="namabelakang">Nama belakang</label> <br /><input id="namabelakang" type="text" /></p>
Output :
2. Input Tipe Email
Untuk Tipe Email ini memiliki validasi dimana jika Input-an kita tidak dalam format email yang valid maka form tidak dapat di-submit.
Contoh :
<form><label for="isian-email">Masukkan Email :</label> <br /><input id="isian-email" type="email" value="" /> <br /><br /><button>Submit</button></form>
Output :
Jika kita menekan tombol di atas saat nilai input tidak dalam format Email, browser akan memberikan peringatan dan formulir tidak dapat dikirimkan.
3. Input Tipe Password
Berikutnya adalah tipe password. Tipe ini akan mengubah semua karakter yang kita ketik ke dalam karakter bintang *.
Contoh :
<form><label for="username">Masukkan Username :</label><br /><input type="text" id="username" name="username" /><br /><label for="pwd">Masukkan Password :</label><br /><input type="password" id="pwd" name="pwd" /></form>
Output :
4. Input Tipe Number
Berikutnya adalah tipe number. Tipe ini membatasi isian user hanya pada karakter numerik saja. Sehingga user tidak bisa mengisi karakter huruf, karakter putih, dan lain sebagainya.
Plus : Browser akan menambahkan dua buah tombol atas dan bawah untuk mengubah angka isian.
Contoh :
<label for="isian-usia">Masukkan Usia Anda!</label><br /><input id="isian-usia" type="number" name="usia" min="18" max="60" />
Output :
Catatan : selain mengklik tombol atas dan bawah, kita juga bisa menggunakan tombol navigasi atas bawah di keyboard untuk mengubah angka.
Beberapa atribut untuk type number :
- min - menentukan angka minimal
- max - menentukan angka maksimal
- step - menentukan kelipatan (nilai yang tidak sesuai kelipatan tidak bisa di-input, dan default dari atribut ini adalah 1)
Contoh (Penggunaan atribut step) :
<label for="isian-1">Kelipatan 1000</label><br><inputid="isian-1"type="number"step="1000"min="0"max="100000"><br><br><label for="isian-2">Kelipatan 0.5</label><br><inputid="isian-2"type="number"step="0.5"min="0"max="100000">
Output :
5. Input Tipe Url
Berikutnya adalah tipe url. Sesuai dengan namanya, tipe ini akan memvalidasi suatu isian apakah ia sudah sesuai format URL yang valid atau tidak. Jika tidak sesuai, maka form tidak akan bisa disubmit.
Contoh :
<form><label for="isian-url">Masukkan Website Blog Anda!</label> <br /><input id="isian-url" type="url" name="website" /><br /><br /><button>Submit</button></form>
Output :
6. Input Tipe Telepon (Tel Input Type)
Tipe tel adalah sebuah input untuk memasukkan nomor telepon. Akan tetapi yang perlu diperhatikan adalah tipe tel ini tidak sama dengan tipe email mau pun tipe url yang otomatis memvalidasi isian user.
Pada tipe tel, kita masih harus mendefinisikan secara manual pola dari nomor telpon yang kita inginkan. Hal ini karena nomor telpon di berbagai negera memiliki format yang berbeda-beda.
Contoh :
<form><label for="isian-telpon">Masukkan Nomor Telepon Anda :</label> <br /><input id="isian-telpon" type="tel" pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}" /><br /><br /><button>Submit</button></form>
Output :
Pada contoh di atas, isian hanya akan dikatakan valid jika untuk format seperti ini :
- 1234-1234-1234
- 0837-3021-3222
- dan seterusnya
7. Input Tipe Date
Tipe input selanjutnya yang bisa kita gunakan adalah tipe date.
Tipe ini akan menampilkan sebuah datepicker tergantung dari Browser dan juga OS. Tampilan date picker di Windows akan berbeda dengan yang ada di macOS, begitu juga Date Picker di Android akan berbeda dengan iOS.
Contoh :
<label for="isian-tanggal-lahir">Tanggal Lahir</label> <br /><input id="isian-tanggal-lahir" name="tanggal_lahir" type="date" />
Output :
Kita juga bisa memanfaatkan atribut min dan max untuk mengatur tanggal minimum dan tanggal maximum.
Nilai min dan max tersebut ditulis dengan format: YYYY-MM-dd.
Selain itu kita juga bisa mengatur tanggal menggunakan atribut value dengan format yang sama.
Contoh :
<label for="isian-1">Tanggal Awal</label> <br><inputid="isian-1"name="tanggal_awal"type="date"min="2021-01-01"value="2021-02-20"><br><br><label for="isian-2">Tanggal Akhir</label> <br><inputid="isian-2"name="tanggal_awal"type="date"min="2021-12-31">
Output :
8. Input Tipe Date Local
Tipe input berikutnya adalah datetime-local.
Tipe ini akan menampilkan date picker + time picker. Jadi tidak hanya tanggal saja, tapi kita bisa juga memilih jam.
Kita tinggal rubah kode sebelumnya dari type date menjadi datetime-local :
<label for="isian-waktu-bayar">Waktu Pembayaran :</label> <br /><input id="isian-waktu-bayar" name="waktu_pembayaran" type="datetime-local" />
Output :
Dan untuk mengatur nilai default, kita bisa menggunakan atribut value dengan format : YYYY:MM:DDThh:mm (dalam waktu UTC).
Jadi misal kita ingin mengatur nilai default menjadi tanggal 17 Agustus 2021 jam 7 WIB, maka kita bisa tulis seperti ini :
2021-08-17T01:00.
Contoh :
<label for="isian-waktu-bayar">Waktu Pembayaran :</label> <br /><inputid="isian-waktu-bayar"name="waktu_pembayaran"type="datetime-local"value="2021-08-17T01:00"/>
Output :
Penting : meskipun hasil keluarannya ditampilkan pukul 01:00 AM, tapi format waktu YYYY:MM:DDThh:mm adalah waktu UTC. Sehingga jika dikonversi ke waktu WIB (UTC+7), hasilnya menjadi pukul 07:00 pagi.
9. Input Tipe Time
Tipe input berikutnya adalah tipe input time, Tipe ini akan membuat kolom isian berupa pilihan jam.
Contoh :
<label for="isian-waktu">Waktu Pembayaran :</label> <br /><input id="isian-waktu" name="waktu_pembayaran" type="time" />
Output :
10. Input Tipe Month
Tipe berikutnya adalah tipe month, berfungsi untuk membuat kolom isian bulan.
Contoh :
<label for="isian-bulan">Bulan Lahir Anda :</label> <br /><input id="isian-bulan" name="bulan_lahir" type="month" />
Output :
11. Input Tipe Week
Hampir sama dengan tipe input month, hanya saja tipe input week digunakan untuk mengambil pekan dalam tahun.
Jadi pekan pertama di bulan Januari adalah pekan 1. Sedangkan pekan kedua di bulan Februari adalah pekan ke 5 dan seterusnya.
Contoh :
<form><label>Pilih Pekan terbaik Anda dalam Setahun :</label><br /><br /><input type="week" name="bestweek" /><input type="submit" value="Kirim data" /></form>
Output :
12. Input Tipe Radio
Berikutnya adalah kolom isian dengan tipe radio. Ia merupakan kolom isian bertipe pilihan di mana kita bisa menawarkan beberapa opsi kepada user. Akan tetapi hanya satu opsi saja yang boleh dipilih.
Contoh :
<form>Jenis Kelamin : <br /><div><input id="lk" type="radio" name="jenis_kelamin" /><label for="lk">Laki-Laki</label></div><div><input id="pr" type="radio" name="jenis_kelamin" /><label for="pr">Perempuan</label></div>Bahasa Pemrograman Favorit : <br /><div><input id="python" type="radio" name="bahasa_pemrograman" /><label for="python">Python</label></div><div><input id="java" type="radio" name="bahasa_pemrograman" /><label for="java">Java</label></div><div><input id="php" type="radio" name="bahasa_pemrograman" /><label for="php">PHP</label></div><div><input id="cpp" type="radio" name="bahasa_pemrograman" /><label for="cpp">C++</label></div></form>
Output :
Pada pilihan di atas, kita hanya bisa memilih masing-masing satu saja.
Yang perlu diperhatikan adalah atribut name dari tiap radio button harus memiliki nilai yang sama dalam satu set pilihan. Pada contoh di atas, kita memiliki 2 buah set pilihan oleh karena itu namanya pun ada 2 yaitu jenis_kelamin dan bahasa_pemrograman.
13. Input Tipe Checkbox
Selanjutnya adalah tipe input checkbox atau cek list. Bedanya dengan radio, kita bisa memilih lebih dari satu pilihan dalam satu set opsi.
Mari kita ganti semua type="radio" pada kode sebelumnya menjadi type="checkbox".
Contoh :
<form>Jenis Kelamin : <br /><div><input id="lk" type="checkbox" name="jenis_kelamin" /><label for="lk">Laki-Laki</label></div><div><input id="pr" type="checkbox" name="jenis_kelamin" /><label for="pr">Perempuan</label></div>Bahasa Pemrograman Favorit : <br /><div><input id="python" type="checkbox" name="bahasa_pemrograman" /><label for="python">Python</label></div><div><input id="java" type="checkbox" name="bahasa_pemrograman" /><label for="java">Java</label></div><div><input id="php" type="checkbox" name="bahasa_pemrograman" /><label for="php">PHP</label></div>
<div><input id="cpp" type="checkbox" name="bahasa_pemrograman" /><label for="cpp">C++</label></div></form>
Output :
14. Input Tipe File
Selanjutnya adalah tipe input file, tipe ini akan membuat tombol “Browser” pada browser. Dan ketika tombol tersebut diklik, Browser akan menampilkan Jendela baru (Bagi pengguna Desktop) untuk mengambil file, ada pun untuk Android dan iOS, Browser akan membuka File Explorer atau aplikasi yang sejenis di Windows, macOS, ataupun di Linux.
Contoh :
<label for="isian-foto">Upload Foto :</label> <br /><input id="isian-foto" name="foto" type="file" />
Output :
Kita bisa menambahkan atribut accept untuk mengatur file apa saja yang boleh di-Upload. Misalkan kita ingin mengizinkan hanya file gambar seperti .png, .jpg atau .jpeg, maka atribut accept akan terlihat seperti ini :
<label for="isian-foto">Upload Foto :</label> <br /><inputid="isian-foto"name="foto"type="file"accept="image/png, image/jpg, image/jpeg"/>
Output :
15. Input Tipe Range
Berikutnya adalah Tipe Input range, ini adalah tipe isian berupa slider. Kita bisa menemukannya di pengaturan volume.
Contoh :
<label for="isian-volume">Atur Volume :</label> <br /><input id="isian-volume" name="foto" type="range" />
Output :
Rentang nilai default untuk tipe range adalah 0 sampai 100. Kita bisa menggantinya menggunakan atribut min dan max.
16. Input Tipe Color
Berikutnya adalah tipe input color, tipe ini akan memunculkan sebuah color picker ketika diklik.
Contoh :
<label for="isian-warna">Pilih Warna Favoritmu!</label> <br /><input id="isian-warna" name="warna" type="color" />
Output :
17. Input Tipe Search
Tipe berikutnya adalah tipe search, yang tidak memiliki karakteristik khusus. Ini mirip dengan teks biasa, tetapi jika kita mengetik sesuatu, tombol x akan muncul di sebelah kanan input.
Contoh :
<label for="isian-pencarian">Cari di sini!</label> <br /><input id="isian-pencarian" name="keyword" type="search" />
Output :
18. Input Tipe Submit
Tipe input berikutnya adalah tipe submit. Ia adalah sebuah <input> yang ditampilkan dalam bentuk tombol. Jika tombol ini diklik, maka form akan tersubmit dan browser akan mulai mengirim data.
Contoh :
<form><input type="text" name="nama" value="Inzaghi" /> <br /><input type="submit" value="Simpan" /></form>
Output :
Atau juga bisa membuat seperti ini :
Contoh :
<form><label>Masukkan Username :</label><br /><input type="text" name="firstname" /><br /><br /><label>Masukkan Password :</label><br /><input type="Password" name="password" /><br /><br /><input type="submit" value="Submit" /></form>
Output :
19. Input Tipe Reset
Selanjutnya adalah tipe reset. Tipe ini akan mengembalikan state atau data dari suatu form ke nilai awalnya.
Jika nilai awal sebuah input adalah kosong, saat reset itu akan mengembalikan nilai kosong. Namun jika nilai awal sudah diisi oleh sesuatu, maka pada reset data akan kembali seperti yang diset sebelumnya.
Contoh :
<form><label for="isian-nama">Nama :</label> <br /><input id="isian-nama" name="nama" type="text" value="Inzaghi Posuma" /><br /><br /><input type="reset" value="Reset" /></form>
Output :
Atau juga bisa membuat seperti ini :
Contoh :
<form><label>User ID : </label><input type="text" name="user-id" value="user" /><br /><br /><label>Password : </label><input type="password" name="pass" value="pass" /><br /><br /><input type="submit" value="Login" /><input type="reset" value="Reset" /></form>
Output :
20. Input Tipe Hidden
Yang terakhir adalah tipe input hidden. Seperti namanya, tipe input ini tidak akan menampilkan input apa pun pada halaman web. Namun, nama dan nilai bidang akan tetap dikirim ke server setelah pengiriman.
Contoh :
<form><label for="fname">Nama depan :</label><input type="text" id="fname" name="fname" /><br /><br /><input type="hidden" id="custId" name="custId" value="3487" /><input type="submit" value="Submit" /></form>
Output :
[Penerapan dari Input Type di HTML]
Dan inilah Contoh pembuatan Form sederhana dengan menggunakan HTML dan juga penerapan dari HTML Input Types (Sumber : Javatpoint.com) :
<!DOCTYPE html><html><head><title>Create a Registration form</title></head><body>Tag berikut digunakan dalam kode HTML ini untuk membuat formulir Pendaftaran:<br /><br /><form><label> Nama depan : </label><input type="text" name="firstname" size="15" /> <br /><br /><label> Nama belakang : </label><input type="text" name="lastname" size="15" /> <br /><br /><label> Kelas : </label><select><option value="Course">Course</option><option value="Database">Database</option><option value="WP">Web Programming</option><option value="Data Science">Data Science</option><option value="ML">Machine Learning</option><option value="IoT">Internet of Things (IoT)</option><option value="AI">Artificial Intelligence (AI)</option></select><br /><br /><label> Gender : </label><br /><input type="radio" name="gender" /> Laki-laki <br /><input type="radio" name="gender" /> Perempuan <br /><input type="radio" name="gender" /> Other<br /><br /><label> Hobi : </label><br /><input type="checkbox" name="Programming" /> Programming <br /><input type="checkbox" name="Drawing" /> Menggambar <br /><input type="checkbox" name="Cycling" /> Bersepeda <br /><input type="checkbox" name="Reading" /> Membaca buku <br /><br /><br /><label> No. Telepon : </label><input type="text" name="phone" size="10" /> <br /><br />Alamat :<br /><textarea cols="80" rows="5" value="address"> </textarea><br /><br />Email :<input type="email" id="email" name="email" /> <br /><br /><br />Password :<input type="Password" id="pass" name="pass" /> <br /><br /><br /><input type="submit" value="Submit" /><input type="reset" value="Reset" /></form></body></html>
Semoga saja Artikel ini sangat bermanfaat bagi para IT Pemula. Terima Kasih 😄😘👌👍 :)
Wassalamu‘alaikum wr. wb.