Campus Life · Sainstek · Tekno

Tipe Input Dasar dalam HTML (HTML Input Types) [Part 1]

28 Jan 2023 0

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 :

Nama depan

Nama belakang

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 :

Masukkan Email :

Submit

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 :

Masukkan Username :

Masukkan Password :

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 :

Masukkan Usia Anda!

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>
<input
  id="isian-1"
  type="number"
  step="1000"
  min="0"
  max="100000"
>
<br><br>

<label for="isian-2">Kelipatan 0.5</label><br>
<input
  id="isian-2"
  type="number"
  step="0.5"
  min="0"
  max="100000"
>

Output :

Kelipatan 1000

Kelipatan 0.5

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 :

Masukkan Website Blog Anda!

Submit

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 :

Masukkan Nomor Telepon Anda :

Submit

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 :

Tanggal Lahir

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>
<input
  id="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>
<input
  id="isian-2"
  name="tanggal_awal"
  type="date"
  min="2021-12-31"
>

Output :

Tanggal Awal

Tanggal Akhir

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 :

Waktu Pembayaran :

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 />
<input
  id="isian-waktu-bayar"
  name="waktu_pembayaran"
  type="datetime-local"
  value="2021-08-17T01:00"
/>

Output :

Waktu Pembayaran :

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 :

Waktu Pembayaran :

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 :

Bulan Lahir Anda :

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 :

Pilih Pekan terbaik Anda dalam Setahun :

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 :

Jenis Kelamin :

Laki-Laki

Perempuan

Bahasa Pemrograman Favorit :

Python

Java

PHP

C++

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 :

Jenis Kelamin :

Laki-Laki

Perempuan

Bahasa Pemrograman Favorit :

Python

Java

PHP

C++

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 :

Upload Foto :

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 />
<input
  id="isian-foto"
  name="foto"
  type="file"
  accept="image/png, image/jpg, image/jpeg"
/>

Output :

Upload Foto :

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 :

Atur Volume :

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 :

Pilih Warna Favoritmu!

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 :

Cari di sini!

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 :

Masukkan Username :

Masukkan Password :

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 :

Nama :

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 :

User ID :

Password :

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 :

Nama depan :

[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>

Create a Registration form Tag berikut digunakan dalam kode HTML ini untuk membuat formulir Pendaftaran :

Nama depan :

Nama belakang :

Kelas :

Gender :
Laki-laki
Perempuan
Other

Hobi :
Programming
Menggambar
Bersepeda
Membaca buku

No. Telepon :

Alamat :

Email :

Password :

Semoga saja Artikel ini sangat bermanfaat bagi para IT Pemula. Terima Kasih 😄😘👌👍 :)

Wassalamu‘alaikum wr. wb.

Campus Life Sainstek Tekno

Join the conversation

Tipe Input Dasar dalam HTML (HTML Input Types) [Part 1]

Keep reading

Apa itu OpenCode? Open Source AI Coding Agent Secara Gratis (Beserta dengan Tutorial Penggunaannya)

Program Deret Bilangan Ganjil-Genap dengan JavaScript dan HTML (Input Type)

Program Deret Bilangan Ganjil-Genap dengan PHP dan HTML (Input Type)