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>

accept

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.

alt

Jika <input> memiliki attribute type="image", maka alt digunakan sebagai teks alternatif pengganti dari image/gambar tersebut.

autocomplete

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.

autofocus

Menentukkan bahwa sebuah form harus fokus pada<input> element yang memiliki atribut autofocus ketika halaman dimuat.

checked

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.

disabled

Menonaktifkan (tidak dapat diseleksi) <input> element.

form

<input> element yang menyertakan attribute form dengan value nama id dari sebuah <form> element, menunjukkan element input dibuat untuknya (<form> dengan id tersebut).

formaction

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.

formenctype

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".

formmethod

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.

formnovalidate

Menunjukkan bahwa element form tidak perlu divalidasi ketika dikirim pada sebuah server.

formtarget

Menentukkan tempat (target) dari respon yang diterima setelah mengirim form. Hanya untuk input element yang memiliki attribute type="submit" dan type="image"

height

Menentukkan tinggi dari element <input>. Hanya untuk input element yang memiliki attribute type="image".

list

Digunakan untuk menentukkan id dari sebuah <datalist> element yang digunakan untuk memberi daftar inputan otomatis pilihan yang diberikan. Pelajari juga HTML <datalist> element.

max

Menentukkan nomor atau tanggal maksimum yang boleh dimasukkan pada sebuah element <input>.

maxlength

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".

min

Menentukkan nomor atau tanggal minimum yang boleh dimasukkan pada sebuah element <input>.

multiple

Menentukkan bahwa user boleh menyisipkan lebih dari satu value/teks. Attribute ini hanya berlaku untuk input dengan attribute type="email" dan type="file".

name

Menentukkan nama untuk sebuah control yang akan dikirim bersamaan dengan data form.

pattern

Menentukkan pola bahasa regular expression yang akan diberlakukan pada nilai untuk sebuah <input> element. Regular expression merupakan bahasa yang sama dengan javascript.

placeholder

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.

readonly

Menentukkan bahwa <input> element hanya dapat dibaca (read only), tidak dapat diedit.

required

Menentukkan bahwa konten didalam <input> element diperlukan, harus diisi dan tidak boleh dikosongkan sebelum data dikirim ke server.

size

Menentukkan ukuran lebar sebuah kontrol dalam hitungan pixels. Nilai awal adalah 20

src

Untuk input type="image", nilai dari src attribute digunakan untuk merujuk (URL) file sumber gambar.

step

Menentukkan interval waktu atau jumlah dalam hitungan tertentu (penambahan atau kelipatannya). Attribute ini bekerja dengan attribute lain yaitu min dan max.

type

Tipe atau jenis dari control yang akan ditampilkan pada jendela browser. Jika attribute ini tidak disebutkan, maka nilainya adalah text secara default.

value

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".

width

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
Demo dengan Source Code Editor

Demo Editor
Demo HTML <input>
Code Editor