HTML Input Types

Pelajari berbagai jenis input yang tersedia dalam HTML seperti text, email, number, date, dan lainnya.

Tipe Input HTML (HTML Input Types)

Elemen <input> mendukung berbagai tipe input yang memungkinkan pengguna memasukkan data dalam format yang berbeda. Setiap tipe input memiliki perilaku dan tampilan yang berbeda.

Berikut ini adalah berbagai jenis input yang dapat Anda gunakan dalam HTML:

<input type="button" />
<input type="checkbox" />
<input type="color" />
<input type="date" />
<input type="datetime-local" />
<input type="email" />
<input type="file" />
<input type="hidden" />
<input type="image" />
<input type="month" />
<input type="number" />
<input type="password" />
<input type="radio" />
<input type="range" />
<input type="reset" />
<input type="search" />
<input type="submit" />
<input type="tel" />
<input type="text" />
<input type="time" />
<input type="url" />
<input type="week" />

Contoh Berbagai Tipe Input

<form>
  <label for="text">Teks:</label>
  <input type="text" id="text" name="text"><br /><br />
 
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br /><br />
 
  <label for="number">Angka:</label>
  <input type="number" id="number" name="number"><br /><br />
 
  <label for="date">Tanggal:</label>
  <input type="date" id="date" name="date"><br /><br />
 
  <label for="password">Password:</label>
  <input type="password" id="password" name="password"><br /><br />
 
  <label for="file">Upload File:</label>
  <input type="file" id="file" name="file"><br /><br />
 
  <label for="checkbox">Saya setuju:</label>
  <input type="checkbox" id="checkbox" name="checkbox"><br /><br />
 
  <label for="radio1">Pilihan 1</label>
  <input type="radio" id="radio1" name="radio" value="1">
  <label for="radio2">Pilihan 2</label>
  <input type="radio" id="radio2" name="radio" value="2"><br /><br />
 
  <button type="submit">Kirim</button>
</form>

1. `type="button"`

<input type="button" value="Klik Saya" onclick="alert('Tombol diklik!')">

2. `type="checkbox"`

<label><input type="checkbox" value="Mobil"> Mobil</label>
<label><input type="checkbox" value="Motor"> Motor</label>

3. `type="color"`

<input type="color">

4. `type="date"`

<input type="date">

5. `type="datetime-local"`

<input type="datetime-local">

6. `type="email"`

<input type="email" placeholder="Email">

7. `type="file"`

<input type="file">

8. `type="hidden"`

<input type="hidden" name="userId" value="12345">

9. `type="image"`

<input type="image" src="/submit.png" alt="Kirim">

10. `type="month"`

<input type="month">

11. `type="number"`

<input type="number" min="1" max="10">

12. `type="password"`

<input type="password" placeholder="Password">

13. `type="radio"`

<label><input type="radio" name="gender" value="male"> Pria</label>
<label><input type="radio" name="gender" value="female"> Wanita</label>

14. `type="range"`

<input type="range" min="0" max="100">

15. `type="reset"`

<input type="reset" value="Reset">

16. `type="search"`

<input type="search" placeholder="Cari sesuatu...">

17. `type="submit"`

<input type="submit" value="Kirim">

18. `type="tel"`

<input type="tel" placeholder="08xxxxxxxxxx">

19. `type="text"`

<input type="text" placeholder="Masukkan nama">

20. `type="time"`

<input type="time">

21. `type="url"`

<input type="url" placeholder="https://mulaicode.com">

22. `type="week"`

<input type="week">

Catatan

Pastikan tipe input sesuai dengan data yang ingin dikumpulkan.
Beberapa tipe seperti email, number, dan date memiliki validasi bawaan dari browser.
Gunakan label yang sesuai agar form lebih ramah pengguna dan aksesibel.

HTML Input Types

On this page