JOKAM INFORMATIKA [OFFICIAL]: Belajar Pemrograman HTML Input Tag Element

Belajar Pemrograman HTML Input Tag <input> Element

Belajar Pemrograman HTML Input Tag Element - JOKAM INFORMATIKA

Tahukah sobat Jokam Informatika dengan yang namanya Form Input ?. Kalian tentunya sudah pernah login ke dalam facebook bukan ?. Nah, kalian pastinya menjumpai form tempat untuk memasukkan email dan password. Itulah yang dinamakan form input.

Di bawah ini anda dapat mempelajarinya selengkapnya,

Input <input> - bentuk dari kolom input biasanya bervariasi tergantung selera si pembuat, ada yang berbentuk persegi panjang ada pula yang berbentuk jajar genjang. Form input ini juga dapat menampung berbagai karakter mulai dari angka sampai huruf maupun simbol. Form input ada tersebut untuk kebutuhan pemasukan input data sebelum dikirim ke dalam server. Misalkan Nama Email, Password, Alamat dan lain sebagainya.

Salah satu ciri khas dari input form ini adalah tidak memiliki tag penutup, tidak seperti komponen yang lain yang mana selalu memakai penutup pada baris perintahnya. Akan tetapi komponen ini dapat bekerja meski tidak memiliki tag penutup.

Atribut HTML Tag <input> Element

accept
Apabila <input> memiliki attribute type="file", maka attribut 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.
Value :
file extension : yaitu extensi file yang diawali dengan tanda titik (contoh: .Doc dan .Jpeg)

audio/* - meliputi musik yakni : .mp3, .wav, .mpeg dan audio lain sebagainya.
image/* - meliputi gambar yakni : .gif, .png, .jpeg dan gambar lain sebagainya.
video/* - meliputi video yakni : .mp4, .mkv, 3gp dan video lain sebagainya.

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

autocomplete
Menentukkan apakah input (control) secara otomatis melengkapi konten yang sebelumnya telah ditulis atau tidak oleh pengunjung. Hal ini dilakukan otomatis (jika on) oleh browser untuk menampilkan tulisan yang sebelumnya telah diinput untuk menghindari penulisan berulang kali.
Value : off atau on

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

checked
Jika <input> memiliki attribute type="radio" atau type="checkbox", maka checked digunakan untuk menentukkan bahwa pilihan dari element tersebut terseleksi atau tercentang pertama kali ketika halaman dimuat.
Value : checked

disabled
Menonaktifkan (tidak dapat diseleksi) <input> element.
Value : disabled

form
element input yang menyertakan attribute form dengan value nama id dari sebuah <form> element lain maka ia akan menunjukkan element input lain tersebut dibuat untuknya pada <form> dengan id tersebut pula.
Value : form_id

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.
Value: URL Address

formenctype
Berguna untuk menunjukkan encoding type jenis inputan. Konten MIME type yang digunakan untuk mengirimkan data form pada sebuah server. Ini, hanya berlaku untuk input dengan attribute type="submit" dan type="image".
Value :

application/x-www-form-urlencoded - nilai bawaan (default value) jika attribute tidak disebutkan.
multipart/form-data - nilai ini hanya digunakan jika terdapat <input> element dengan tipe attribute file.

formmethod
Jika <input> memiliki attribute type="submit" atau type="image", maka attribut ini digunakan untuk menentukkan HTPP method yang digunakan oleh browser untuk mengirim data form.
Value :

post : berkaitan dengan HTTP POST method. Metode ini digunakan untuk mengirim data form yang disisipkan pada body form dan dikirim ke server.
get : berkaitan dengan HTTP GET method. Metode ini digunakan untuk mengirim data form yang disisipkan pada URI action attribute dengan tanda tanya ( ? ) sebagai pemisah, kemudian dikirim ke server. Karakter yang digunakan adalah ASCI.

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

formtarget
Menentukkan tempat (target) dari respon yang diterima setelah mengirim form. Hanya untuk input element yang memiliki attribute type="submit" dan type="image"
Value : _blank | _self | _parent | _top | nama frame

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

list
Digunakan untuk menentukkan id dari sebuah <datalist> element yang digunakan untuk memberi daftar inputan otomatis pilihan yang diberikan.
Value : datalist_id

max
Menentukkan nomor atau tanggal maksimum yang boleh dimasukkan pada sebuah element <input>.
Value : nomor, tanggal dan lain sebagainya.

maxlengt
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".
Value : nomor

min
Menentukkan nomor atau tanggal minimum yang boleh dimasukkan pada sebuah element <input>.
Value : nomor dan tanggal

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

name
Menentukkan nama untuk sebuah control yang akan dikirim bersamaan dengan data form
Value : teks

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

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.
Value : teks

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

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

size
Menentukkan ukuran lebar sebuah kontrol dalam hitungan pixels.
Value : nomor

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

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

type
Tipe atau jenis dari control yang akan ditampilkan pada jendela browser. Jika attribute ini tidak disebutkan, maka nilainya adalah text secara default.
Value : button | checkbox | color | date | datetime | datetime-local | email | file | hidden | image | month | number | password | radio | range | reset | search | submit | tel | text | url | week

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".
Value : teks

width
Digunakan untuk input dengan attribute type="image" sehingga gambar dapat diperlebar atau dipersempit seperti sebuah tombol.
Value: pixels

Contoh penerapan dari tag HTML input adalah sebagai berikut ini :


<form>

<label>Nama : <input type="text" name="user_name"  placeholder="Nama Kamu" /></label><br />
<label>Email : <input type="email" name="user_email" placeholder="Email Kamu" /></label><br />
<label>Password : <input type="password" name="user_password" placeholder="Password Kamu" /></label><br />
<input type="submit" value="Masuk" />

</form>