HTML input tag | belajar <input> element
Referensi Belajar HTML input tag. Tutorial dan panduan mengenai element <input /> yang digunakan untuk menginput data yang biasanya dipakai dalam sebuah form. Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <input>.
Deskripsi
Penjelasan HTML input
HTML <input> element digunakan untuk menunjukkan sebuah inputan (masukkan) dalam bentuk kotak dan sejenisnya yang dapat diedit/diketik untuk diisi data tertentu (seperti memasukkan data diri nama, email, tanggal dan lain sebagainya).
<input> merupakan element interaktif yang biasanya ditulis bersamaan dengan form control.
Arti semantic dan fungsi dari <input> element dapat beraneka ragam tergantung dari attribute type yang digunakan.
<input> adalah element yang tidak memiliki tag penutup (closing tag) dan merupakan element kosong yang tidak memiliki konten, hanya terdapat attribute saja.
Attributes
Atribut HTML Tag <input>
Apabila <input> memiliki attribute type="file", maka attribute accept digunakan untuk menentukkan tipe file yang diterima oleh server. Contohnya, ketika digunakan untuk upload sebuah file, attribute ini digunakan untuk membatasi tipe file apa saja yang boleh diupload.
Jika <input> memiliki attribute type="image", maka alt digunakan sebagai teks alternatif pengganti dari image/gambar tersebut.
Menentukkan apakah input (control) secara otomatis melengkapi konten yang sebelumnya telah ditulis atau tidak. Hal ini dilakukan otomatis (jika on) oleh browser untuk menampilkan tulisan yang sebelumnya telah diinput untuk menghindari penulisan berulang kali.
Menentukkan bahwa sebuah form harus fokus pada<input> element yang memiliki atribut autofocus ketika halaman dimuat.
Jika <input> memiliki attribute type="radio" atau type="checkbox", maka checked digunakan untuk menentukkan bahwa pilihan dari element tersebut terseleksi pertama kali ketika halaman dimuat.
Menonaktifkan (tidak dapat diseleksi) <input> element.
<input> element yang menyertakan attribute form dengan value nama id dari sebuah <form> element, menunjukkan element input dibuat untuknya (<form> dengan id tersebut).
Jika <input> memiliki attribute type="submit" atau type="image", maka formaction digunakan untuk menentukkan alamat URL sebuah file yang akan memproses input control tersebut ketika form dikirim.
Menunjukkan encoding type. Konten MIME type yang digunakan untuk mengirimkan data form pada sebuah server. Ini, hanya berlaku untuk input dengan attribute type="submit" dan type="image".
Jika <input> memiliki attribute type="submit" atau type="image", maka attribute ini digunakan untuk menentukkan HTPP method yang digunakan oleh browser untuk mengirim data form.
Menunjukkan bahwa element form tidak perlu divalidasi ketika dikirim pada sebuah server.
Menentukkan tempat (target) dari respon yang diterima setelah mengirim form. Hanya untuk input element yang memiliki attribute type="submit" dan type="image"
Menentukkan tinggi dari element <input>. Hanya untuk input element yang memiliki attribute type="image".
Digunakan untuk menentukkan id dari sebuah <datalist> element yang digunakan untuk memberi daftar inputan otomatis pilihan yang diberikan. Pelajari juga HTML <datalist> element.
Menentukkan nomor atau tanggal maksimum yang boleh dimasukkan pada sebuah element <input>.
Menentukkan maksimum jumlah karakter yang boleh disisipkan pada <input> element. Digunakan pada input dengan attribute type="text", type="email", type="search", type="password", type="tel" dan type="url".
Menentukkan nomor atau tanggal minimum yang boleh dimasukkan pada sebuah element <input>.
Menentukkan bahwa user boleh menyisipkan lebih dari satu value/teks. Attribute ini hanya berlaku untuk input dengan attribute type="email" dan type="file".
Menentukkan nama untuk sebuah control yang akan dikirim bersamaan dengan data form.
Menentukkan pola bahasa regular expression yang akan diberlakukan pada nilai untuk sebuah <input> element. Regular expression merupakan bahasa yang sama dengan javascript.
Menentukkan teks yang dijadikan isyarat untuk user apa yang seharusnya mereka tulis. Teks ini biasanya terlihat untuk sementara dan apabila user hendak menyisipkan karakter didalam element <input>, teks akan menghilang dengan sendirinya atau berpindah tempat.
Menentukkan bahwa <input> element hanya dapat dibaca (read only), tidak dapat diedit.
Menentukkan bahwa konten didalam <input> element diperlukan, harus diisi dan tidak boleh dikosongkan sebelum data dikirim ke server.
Menentukkan ukuran lebar sebuah kontrol dalam hitungan pixels. Nilai awal adalah 20
Untuk input type="image", nilai dari src attribute digunakan untuk merujuk (URL) file sumber gambar.
Menentukkan interval waktu atau jumlah dalam hitungan tertentu (penambahan atau kelipatannya). Attribute ini bekerja dengan attribute lain yaitu min dan max.
Tipe atau jenis dari control yang akan ditampilkan pada jendela browser. Jika attribute ini tidak disebutkan, maka nilainya adalah text secara default.
Menentukkan nilai/teks untuk sebuah kontrol input. Attribute ini hanya bersifat opsional (boleh ditulis atau tidak) kecuali untuk input dengan attribute type="radio" dan type="checkbox".
Digunakan untuk input dengan attribute type="image" sehingga gambar dapat diperlebar atau dipersempit seperti sebuah tombol.
Global Attributes
Atribut Secara Global (Keseluruhan)
<input> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.
Event Attributes
Atribut event (Peristiwa)
<input> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.
Example
Contoh HTML <input> element
Contoh 1
<input type="text"> <br />
<input type="email" name="email" placeholder="email-kamu@domain.com">
Contoh 2
<form action="formpendaftaran.php" method="get">
<label>Nama: <input type="text" name="user_name" /></label><br />
<label>Email/Surel: <input type="email" name="user_email" /></label><br />
<input type="submit" value="Kirim" />
</form>
Contoh Lengkap
Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo HTML input tag</title>
<style>
</style>
</head>
<body>
<h3>Example 1</h3>
<input type="text"> <br />
<input type="email" name="email" placeholder="email-kamu@domain.com">
<hr />
<h3>Example 2</h3>
<form action="formpendaftaran.php" method="get">
<label>Nama: <input type="text" name="user_name" /></label><br />
<label>Email/Surel: <input type="email" name="user_email" /></label><br />
<input type="submit" value="Kirim" />
</form>
<p>Form di atas hanya contoh demo dan tidak bisa submit data</p>
</body>
</html>
SHARE