Spear — Learn to Code

HTML Input Types

Elemen <input> memiliki banyak tipe yang berbeda untuk berbagai jenis data.

Text Inputs

text — teks biasa
password — password (tersembunyi)
email — email (validasi otomatis)
url — URL
tel — nomor telepon
search — search box

Number & Date

number — angka dengan spinner
range — slider
date — tanggal
time — waktu
datetime-local — tanggal + waktu
month — bulan + tahun

Lainnya

checkbox — centang
radio — pilihan tunggal
color — color picker
file — upload file
hidden — tersembunyi

<div> <div> <label><strong>Text:</strong></label><br> <input type="text" placeholder="Teks biasa"> </div> <div> <label><strong>Password:</strong></label><br> <input type="password" value="secret123"> </div> <div> <label><strong>Email:</strong></label><br> <input type="email" placeholder="name@email.com"> </div> <div> <label><strong>Number:</strong></label><br> <input type="number" value="5" min="0" max="100"> </div> <div> <label><strong>Range:</strong></label><br> <input type="range" min="0" max="100" value="50"> </div> <div> <label><strong>Date:</strong></label><br> <input type="date"> </div> <div> <label><strong>Color:</strong></label> <input type="color" value="#6DD5C4"> </div> <div> <label><strong>Checkbox:</strong></label><br> <input type="checkbox" id="c1"><label for="c1"> HTML</label> <input type="checkbox" id="c2"><label for="c2"> CSS</label> <input type="checkbox" id="c3" checked><label for="c3"> JS</label> </div> <div> <label><strong>Radio:</strong></label><br> <input type="radio" name="lvl" id="r1"><label for="r1"> Pemula</label> <input type="radio" name="lvl" id="r2" checked><label for="r2"> Menengah</label> <input type="radio" name="lvl" id="r3"><label for="r3"> Lanjutan</label> </div> <div> <label><strong>File:</strong></label><br> <input type="file" accept="image/*"> </div> </div>