Input dalam HTML
Apakah Input
oleh: Suryo Adhy Chandra, ST
Pengertian Input dalam HTML
Dalam HTML, <input> adalah elemen yang digunakan untuk menerima data dari pengguna melalui sebuah form. Elemen ini sangat penting karena memungkinkan interaksi antara pengguna dan website, misalnya untuk login, pendaftaran, pencarian, atau pengisian data.
- Definisi: <input> adalah tag HTML yang berfungsi sebagai form field untuk memasukkan data ke dalam sebuah form.
- Fungsi utama: Menangkap data dari pengguna (teks, angka, email, file, dll.) dan mengirimkannya ke server untuk diproses.
- Letak penggunaan: Biasanya ditempatkan di dalam tag <form> agar data bisa dikirim menggunakan metode GET atau POST.
Berikut beberapa tipe input yang sering digunakan:
| Input type | Contoh Tampilan | Fungsi |
text |
Kolom teks biasa yang bisa diisi semua karakter | |
number |
Kolom teks yang hanya bisa dimasukkan angka | |
password |
Kolom teks untuk password | |
|
|
Kolom teks email, di dalamnya ada validasi untuk email | |
date |
Kolom input untuk memilih tanggal | |
file |
Kolom input untuk memilih file dan melakukan upload | |
checkbox |
|
Input berbentuk checkbox |
radio |
|
Input berbentuk radio button |
button |
Input berbentuk tombol biasa | |
submit |
Input berbentuk tombol submit ketika digunakan bersama <form> |
Atribut yang sering dipakai dalam input
| Nama Atribut | Penjelasan |
|---|---|
value |
Untuk memasukkan nilai default pada input |
min |
untuk memberi batasan nilai minimun dari suatu inputan |
max |
untuk memberi batasan nilai maksimum dari suatu inputan |
placeholder |
untuk memberi informasi yang akan ditampilkan ketika inputan masih kosong,contoh: |
title |
untuk memberi informasi ketika mouse menuju ke input yang bersangkutan,contoh: |
required |
Menandakan input wajib diisi, validasi required ini biasa dipakai di <form> dengan method="post" (nanti kita pelajari setelah ini) |
readonly |
Menandakan inputan tidak bisa diedit, contohnya: |
disabled |
Menandakan inputan tidak aktif, contohnya: Nah untuk disabled ini di <form> tidak akan dimasukkan sebagai variabel yang akan diinput |
name |
Menandakan nama dari inputan, biasa akan dipakai dalam <form> |
id |
Menandakan identitas inputan tersebut, untuk id harus unik dalam 1 halaman html, artinya tidak boleh ada id yang sama dalam 1 halaman html |
Contoh Apabila kita membuat formulir untuk login, biasa yang harus ada adalah:
- Username/ email
- Password
- Tombol Login
Yuk kita ulik bareng-bareng, coba kalian copy dan paste script di bawah ini:
Nama: <input type="text" name="nama" placeholder="Masukkan nama"><br>
Email: <input type="email" name="email" required><br>
Password: <input type="password" name="password"><br>
<input type="submit" value="Kirim">
apa hasilnya?dari sini kira2 apa sudah paham?
Sekarang kita coba bersama-sama untuk membuat tampilan sederhana website kita!