Tutorial HTML <input>
HTML input Tag - belajar html input, element input menentukan kolom isian yang nantinya dapat di isi dan dieksekusi oleh user. Element
<input>
merupakan bagian dari element <form>
sebagai kontrol dari form itu sendiri. Kolom input dapat bervariasi dengan banyak cara, tergantung pada jenis attribut yang disematkan.Meskipun element
<input>
merupakan bagian dari element <form>
, element input juga bisa diletakkan diluar element form
, tergantung fungsi yang diperlukan. Dari semua element html ada dua jenis element html yang saya sangat sukai karena metode yang digunakan tanpa batas dan tingkat kerumitannya yang tinggi, yaitu : element <canvas>
dan <form>
(element input bagian element form).Contoh HTML <input>
<input type="text" value="type text"/>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <input type="text" value="type text"/> </body> </html>
Contoh 2 HTML <input>
<form id="form-lamaran">
<fieldset id="personal">
<legend>BIODATA</legend>
<label for="namadepan">Nama Depan : </label>
<input name="namadepan" id="namadepan" type="text"/>
<br />
<label for="namabelakang">Nama Belakang : </label>
<input name="namabelakang" id="namabelakang" type="text"/>
<br />
<label for="alamat">alamat : </label>
<input name="alamat" id="alamat" type="text"/>
</fieldset>
<fieldset id="medical">
<legend>RIWAYAT KESEHATAN</legend>
<label for="cacar">cacar : </label>
<input name="cacar" id="cacar" type="checkbox" value="cacar"/>
<br />
<label for="gondok">gondok : </label>
<input name="gondok" id="gondok" type="checkbox" value="gondok"/>
<br />
<label for="pusing">pusing : </label>
<input name="pusing" id="pusing" type="checkbox" value="gondok"/>
<br />
<label for="tidakadariwayat">tidak ada : </label>
<input name="tidakadariwayat" id="tidakadariwayat" type="checkbox" value="hepatitis"/>
</fieldset>
<fieldset id="opt">
<legend>POSISI PEKERJAAN</legend>
<select name="choice">
<option selected="selected" label="none" value="Pilih">Pilih</option>
<optgroup label="Administrasi">
<option id="data_1a" value="data_1a">xxxxxxxxxxxxxx</option>
<option id="data_1b" value="data_1b">xxxxxxxxxxxxxx</option>
<option id="data_1c" value="data_1c">xxxxxxxxxxxxxx</option>
</optgroup>
<optgroup label="Keuangan">
<option id="data_2a" value="data_2a">xxxxxxxxxxxxxx</option>
<option id="datal_2a" value="datal_2a">xxxxxxxxxxxxxx</option>
</optgroup>
<optgroup label="Komputer">
<option id="data_3a" value="data_3a">xxxxxxxxxxxxxx</option>
<option id="data_3" value="data_3b">xxxxxxxxxxxxxx</option>
</optgroup>
</select>
</fieldset>
<fieldset id="pengalaman-kerja">
<legend>PENGALAMAN KERJA</legend>
<p>Apakah anda sudah berpengalaman pada pekerjaan yang dipilih</p>
<label for="ya-berpengalaman">ya : </label>
<input name="ya-berpengalaman" id="ya-berpengalaman" type="checkbox" value="ya"/>
<br />
<label for="tidak-berpengalaman">tidak : </label>
<input name="tidak-berpengalaman" id="tidak-berpengalaman" type="checkbox" value="tidak"/>
<br />
<p>Apa alasan anda mengambil jenis pekerjaan yang anda pilih :</p>
<textarea style="width:100%;height:150px;" name="area-alasan" id="area-alasan" placeholder="masukan jawaban anda"></textarea>
</fieldset>
<p>
<input id="button1" type="button" value="KIRIM" onclick="alert('Hanya untuk Demo')" />
<input id="button2" type="RESET" />
</p>
</form>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <form id="form-lamaran"> <fieldset id="personal"> <legend>BIODATA</legend> <label for="namadepan">Nama Depan : </label> <input name="namadepan" id="namadepan" type="text"/> <br /> <label for="namabelakang">Nama Belakang : </label> <input name="namabelakang" id="namabelakang" type="text"/> <br /> <label for="alamat">alamat : </label> <input name="alamat" id="alamat" type="text"/> </fieldset> <fieldset id="medical"> <legend>RIWAYAT KESEHATAN</legend> <label for="cacar">cacar : </label> <input name="cacar" id="cacar" type="checkbox" value="cacar"/> <br /> <label for="gondok">gondok : </label> <input name="gondok" id="gondok" type="checkbox" value="gondok"/> <br /> <label for="pusing">pusing : </label> <input name="pusing" id="pusing" type="checkbox" value="gondok"/> <br /> <label for="tidakadariwayat">tidak ada : </label> <input name="tidakadariwayat" id="tidakadariwayat" type="checkbox" value="hepatitis"/> </fieldset> <fieldset id="opt"> <legend>POSISI PEKERJAAN</legend> <select name="choice"> <option selected="selected" label="none" value="Pilih">Pilih</option> <optgroup label="Administrasi"> <option id="data_1a" value="data_1a">xxxxxxxxxxxxxx</option> <option id="data_1b" value="data_1b">xxxxxxxxxxxxxx</option> <option id="data_1c" value="data_1c">xxxxxxxxxxxxxx</option> </optgroup> <optgroup label="Keuangan"> <option id="data_2a" value="data_2a">xxxxxxxxxxxxxx</option> <option id="datal_2a" value="datal_2a">xxxxxxxxxxxxxx</option> </optgroup> <optgroup label="Komputer"> <option id="data_3a" value="data_3a">xxxxxxxxxxxxxx</option> <option id="data_3" value="data_3b">xxxxxxxxxxxxxx</option> </optgroup> </select> </fieldset> <fieldset id="pengalaman-kerja"> <legend>PENGALAMAN KERJA</legend> <p>Apakah anda sudah berpengalaman pada pekerjaan yang dipilih</p> <label for="ya-berpengalaman">ya : </label> <input name="ya-berpengalaman" id="ya-berpengalaman" type="checkbox" value="ya"/> <br /> <label for="tidak-berpengalaman">tidak : </label> <input name="tidak-berpengalaman" id="tidak-berpengalaman" type="checkbox" value="tidak"/> <br /> <p>Apa alasan anda mengambil jenis pekerjaan yang anda pilih :</p> <textarea style="width:100%;height:150px;" name="area-alasan" id="area-alasan" placeholder="masukan jawaban anda"></textarea> </fieldset> <p> <input id="button1" type="button" value="KIRIM" onclick="alert('Hanya untuk Demo')" /> <input id="button2" type="RESET" /> </p> </form> </body> </html>
body { font-family:arial; } .center{ text-align:center; } .red{ color:red; } form#form-lamaran { background: #fff; width: 470px; padding: 10px; border: 1px solid #dedcdc; margin: 0 auto; } form#form-lamaran fieldset { width: 450px; display: block; border: 1px solid #fff; padding: 5px; font-family: verdana, sans-serif; margin-bottom: 0.5em; line-height: 1.5em; } form#form-lamaran legend { font-family: georgia, sans-serif; font-size: 1.1em; border-bottom: 3px solid #cecece; margin-bottom: 5px; padding: 3px; width: 254px; background: #f3e4e7; } form#form-lamaran label { clear: left; display: block; float: left; width: 150px; text-align: right; padding-right: 10px; color: #ec6969; } form#form-lamaran input { border: 1px solid #b3b3b3; padding-left: 0.5em; margin-bottom: 0.6em; } form#form-lamaran textarea { width: 100%; height: 15em; border: 1px solid #dc8e8e; padding: 0.5em; overflow: auto; background: #fff; outline-color: crimson; resize: none; } form#form-lamaran #button1, form#form-lamaran #button2 { color: #fff; padding-right: 0.5em; cursor: pointer; width: 205px; margin-left: 8px; padding: 10px 0px; background: #ff91a6; font-weight: bold; font-size: large; }
//javascript
Contoh 3 HTML <input>
Contoh untuk attribute type
<input type="button" value="button"/>
<input type="checkbox"/>
<input type="color" value="#ff0000"/>
<input type="date"/>
<input type="datetime-local"/>
<input type="email" placeholder="Email"/>
<input type="file"/>
<input type="hidden"/>
<input type="image" src="about:blank" alt="input type Image">
<input type="month"/>
<input type="number" value="100"/>
<input type="password" placeholder="Masukan password"/>
<input type="radio"/>
<input type="range"/>
<input type="reset" value="reset"/>
<input type="search" value="pencarian"/>
<input type="submit" value="submit"/>
<input type="tel" value="+6280123456789"/>
<input type="text" value="type text"/>
<input type="time"/>
<input type="url" value="https://example.com"/>
<input type="week"/>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> <style>code{color :red;}</style> </head> <body> <ol> <li>type <code>button</code> <b>hasil</b> = <input type="button" value="button"/> </li> <li>type <code>checkbox</code> <b>hasil</b> = <input type="checkbox"/> </li> <li>type <code>color</code> <b>hasil</b> = <input type="color" value="#ff0000"/> </li> <li>type <code>date</code> <b>hasil</b> = <input type="date"/> </li> <li>type <code>datetime-local</code> <b>hasil</b> = <input type="datetime-local"/> </li> <li>type <code>email</code> <b>hasil</b> = <input type="email" placeholder="Email"/> </li> <li>type <code>file</code> <b>hasil</b> = <input type="file"/> </li> <li>type <code>hidden</code> <b>hasil</b> = <input type="hidden"/> </li> <li>type <code>image</code> <b>hasil</b> = <input type="image" src="about:blank" alt="input type Image"> <!--ganti about:blank dengan url image--> </li> <li>type <code>month</code> <b>hasil</b> = <input type="month"/> </li> <li>type <code>number</code> <b>hasil</b> = <input type="number" value="100"/> </li> <li>type <code>password</code> <b>hasil</b> = <input type="password" placeholder="Masukan password"/> </li> <li>type <code>radio</code> <b>hasil</b> = <input type="radio"/> </li> <li>type <code>range</code> <b>hasil</b> = <input type="range"/> </li> <li>type <code>reset</code> <b>hasil</b> = <input type="reset" value="reset"/> </li> <li>type <code>search</code> <b>hasil</b> = <input type="search" value="pencarian"/> </li> <li>type <code>submit</code> <b>hasil</b> = <input type="submit" value="submit"/> </li> <li>type <code>tel</code> <b>hasil</b> = <input type="tel" value="+6280123456789"/> </li> <li>type <code>text</code> <b>hasil</b> = <input type="text" value="type text"/> </li> <li>type <code>time</code> <b>hasil</b> = <input type="time"/> </li> <li>type <code>url</code> <b>hasil</b> = <input type="url" value="https://example.com"/> </li> <li>type <code>week</code> <b>hasil</b> = <input type="week"/> </li> </ol> </body> </html>
Attribute HTML <input>
accept |
Value
|
Menentukan tipe file apa saja, yang boleh dimasukan oleh user, hanya untuk sematan attribut type="file" , contoh :
<input type="file" accept="audio/*">
<input type="file" accept="video/*">
<input type="file" accept="image/*">
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> Masukan Audio = <input type="file" accept="audio/*"> <br/> Masukan video = <input type="file" accept="video/*"> <br/> Masukan Image = <input type="file" accept="image/*"> </body> </html> |
---|---|---|
alt |
Nilai dari attribute ini adalah Teks | Menentukan alt (alternative) pada sebuah gambar atau image jika gambar gagal di loading oleh user, hanya untuk sematan atribut type="image", contoh :
<input type="image" src="submit.png" alt="Submit">
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <input type="image" src="" alt="Submit"> </body> </html> |
autocomplete |
Nilai atribut ini adalah : on atau off |
Menentukan apakah sebuah inputan akan menampilkan data secara otomatis atau tidak, dengan metode user sebelumnya telah mengisi data sebelumnya, jika disetting dalam keadaan "on", contoh :
<input type="text" autocomplete="on"> <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <input type="text" autocomplete="on"/> <p> Auto autocomplete akan muncul jika sebelumnya data pernah disisi oleh user </p> </body> </html> |
autofocus |
Nilai atribut ini adalah autofocus |
Menentukan data inputan akan autofocus pada data isian. Penjelasan ringan, jika suatu halaman berhasil di buka, maka posisi cursor akan otomatis dan focus berada pada input isian yang ada. Contoh :
<input type="text" autofocus="autofocus">
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <input type="text" autofocus="autofocus"/> <p> Klik tombol run untuk melihat efect <code>autofocus</code> </p> </body> </html> |
checked |
checked | Menentukan pilihan yang di dahulukan fungsinya pada saat halaman berhasil diload. untuk sematan type="radio" dan type="checkbox" . Contoh :
<input type="radio" checked="checked">
<br/>
<input type="checkbox" checked="checked">
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <input type="radio" checked="checked"> <br/> <input type="checkbox" checked="checked"> </body> </html> |
dirname |
namainput.dir |
Menentukan arah sebuah teks akan dikirim pada server. Contoh :
<div dir="ltr">
<form action="/contoh.php">
Tanggal Lahir:
<input type="text" name="Tanggal_lahir" dirname="Tanggal_lahir.dir"/>
<input type="submit" value="Submit"/>
</form>
</div>
Maaf Belum ada live demo
|
disabled |
Nilai atribut ini adalah disabled |
Menentukan bahwa jika user melakukan interaksi pada element tersebut, maka element tersebut menjadi tidak memiliki fungsi. Contoh :
<input type="text" disabled="disabled"/>
<input type="button" value="button" disabled="disabled"/>
<input type="submit" value="submit" disabled="disabled"/>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <input type="text" disabled="disabled"/> <br/> <input type="button" value="button" disabled="disabled"/> <br/> <input type="submit" value="submit" disabled="disabled"/> </body> </html> |
form |
Nilai atribut ini adalah form_id | Menentukan ID unik, pada sebuah <form> Penggunaan ID hanya di bolehkan satu saja dengan nama yang sama. Attribut ini digunakan element input berada diluar element form Contoh : <form id="biodata">
Tanggal Lahir:
<input type="text" name="Tanggal_lahir">
<input type="button" value="Submit" onclick="alert('Hanya DEMO')">
</form>
Alamat : <input type="text" name="alamat" form="biodata"/>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <form id="biodata"> Tanggal Lahir: <input type="text" name="Tanggal_lahir"> <input type="button" value="Submit" onclick="alert('Hanya DEMO')"> </form> <p>diluar element <code><form></code></p> Alamat : <input type="text" name="alamat" form="biodata"/> </body> </html> |
formaction |
Nilai attribut ini adalah URL |
Menentukan kontrol pada saat sebuah form dikirim hanya untuk type="submit" and type="image" .Attribute ini digunakan untuk pengiriman data ke server pada elemen <form> dan merubah jalur pengiriman data data element <form> dengan menggantikan fungsi attribute action element <form> .Contoh : <form action="/data-1.php">
Nama : <input type="text" name="nama"/> <br/>
Alamat : <input type="text" name="alamat"/> <br/>
<input type="submit" value="Kirim-1"/> <br/>
<!--formaction attribute-->
<input type="submit" formaction="/data-2.php" value="Kirim-2"/>
</form>
Maaf tidak tersedia live demo
|
formenctype |
Nilai atribut ini adalah application/x-www-form-urlencoded , multipart/form-data dan Teks |
Menentukan bagaimana bentuk data harus dikodekan saat user mengirim sebuah form Hanya untuk <form> dengan sematan attribut method="post" , (untuk type="submit" and type="image" )Contoh : <form action="/data.php">
Data:
<input type="text" name="data">
<input type="submit" value="Kirim">
<input type="submit" formenctype="multipart/form-data" value="Kirim multipart/form-data">
</form>
Maaf tidak tersedia live demo
|
formmethod |
Nilai atribut ini adalah post , get |
menentukkan HTPP method yang digunakan oleh browser untuk mengirim data form pada server, hanya untuk type="submit" dan type="image" . |
formnovalidate |
Nilai atribut ini adalah formnovalidate |
Menentukan bahwa form yang dikirim tidak perlu di validasi. Contoh :
<form action="/data_user.php">
E-mail:
<input type="email" name="Email">
<input type="submit" value="Kirim">
<input type="submit" formnovalidate="formnovalidate" value="Kirim Tanpa Validasi">
</form>
|
formtarget |
Nilai Attribut ini adalah :
|
Menentukan bagaimana respon yang diterima saat form dikirim,(untuk type="submit" dan type="image" ) Penjelasan singkat, jika atribut formtarget diisi dengan value _blank, maka saat user mengirim data form akan terbuka sebuah tab baru dibrowser. Contoh :
<form action="/data.php">
Data:
<input type="text" name="data">
<input type="submit" formtarget="_blank" value="Kirim">
</form>
|
height |
Nilai atribut ini adalah pixels | Menentukan tinggi dari element, hanya untuk type="image" .Contoh : <form action="/data.php">
Data:
<input type="text" name="data">
<input type="image" src="kirim.png" alt="Kirim" width="78" height="50">
</form>
|
list |
Nilai atribut ini adalah datalist_id | Menentukan ID unik untuk element <datalist> yang disetting untuk element <input> .Contoh : <form action="data_siswa.php" method="get">
<input list="list_siswa" name="list_siswa">
<datalist id="list_siswa">
<option value="001-andi">Andi</option>
<option value="002-budi">Budi</option>
<option value="003-cantik">Cantik</option>
<option value="004-doni">Doni</option>
<option value="005-erni">Erni</option>
</datalist>
<input type="submit" value="Kirim">
</form>
|
max |
Nilai atribut ini adalah : angka, tanggal | Menentukan batasan maksimal yang bisa di masukan oleh user, berupa tanggal dan angka. Contoh : <form action="data.php">
Maksimal Tanggal : 2018-12-31:
<input type="date" name="data_date" max="2018-12-31"> <br/>
Minimal Tanggal : 2017-12-31:
<input type="date" name="data_date" min="2017-12-31"> <br/>
Pilih Angka maksimal : 15, Minimal : 5
<input type="number" name="quantity" min="5" max="15"> <br/>
<input type="submit" value="Kirim">
</form>
|
maxlength |
angka | Menentukan batasan jumlah karakter yang boleh diisi pada form input. Contoh : Masukan kode anda, maksimal 10 karakter = <input type="text" maxlength="10" placeholder="Kode voucher"/> <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> Masukan kode anda, maksimal 10 karakter = <input type="text" maxlength="10" placeholder="Kode voucher"/> </body> </html> |
min |
Nilai atribut ini adalah : angka, tanggal | Menentukan batasan minimal yang bisa di masukan oleh user, berupa tanggal dan angka. Contoh : <form action="data.php">
Maksimal Tanggal : 2018-12-31:
<input type="date" name="data_date" max="2018-12-31"> <br/>
Minimal Tanggal : 2017-12-31:
<input type="date" name="data_date" min="2017-12-31"> <br/>
Pilih Angka maksimal : 15, Minimal : 5
<input type="number" name="quantity" min="5" max="15"> <br/>
<input type="submit" Value="Kirim">
</form>
|
multiple |
multiple | Menentukan bahwa user bisa menginput lebih dari satu value. Contoh :<input type="file" name="file-upload" multiple="multiple"/>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <input type="file" name="file-upload" multiple="multiple"/> </body> </html> Dari Contoh diatas bisa dijelaskan, user dapat memasukan lebih dari satu file sebagai hasil inputan. Tekan dan tahan Ctrl pada keybord pada saat memilih file
|
name |
Nilai atribut ini adalah : teks | Menentukan nama pada element <input> |
pattern |
Nilai atribut ini adalah : regexp |
Menentukan pola regular expression kepada user dan bersifat memaksa user mengikuti sistem yang ditentukan.
Contoh :
<form>
Email:
<input type="email" name="email"/>
Password:
<input
type="password"
name="password"
pattern=".{8,}"
placeholder="minimal 8 Karakter"/>
<input type="button" Value="Masuk"/>
</form>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <form> Email: <input type="email" name="email"/> Password: <input type="password" name="password" pattern=".{8,}" placeholder="minimal 8 Karakter"/> <input type="button" Value="Masuk" onclick="alert('Hanya untuk Demo')"/> </form> </body> </html> |
placeholder |
Nilai atribut ini adalah : teks | Menentukan sebagai teks sisipan, biasa digunakan untuk menyampaikan infomasi singkat tentang kolom input. attribut ini tidak akan berpengaruh pada hasil sebuah Contoh :
form .<input type="text" placeholder="masukan teks disini"/>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <input type="text" placeholder="masukan teks disini"/> </body> </html> |
readonly |
Nilai atribut ini adalah : readonly |
Menentukan bahwa isi pada value tidak bisa dirubah oleh user Contoh : <input type="text" value="SMA Blogger 3000" readonly="readonly"/>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <form> Nama : <input type="text" name="nama"/> <br/> Kelas: <input type="text" name="kelas"/> <br/> Sekolah : <input type="text" name="Sekolah" value="SMA Blogger 3000" readonly="readonly"/> </form> </body> </html> |
required |
Nilai atribut ini adalah : required |
Menentukan bahwa suatu kolom input harus disisi atau tidak boloh kosong. Contoh : <form>
Nama :
<input type="text" name="nama" required="required"/>
<input type="submit" value="Kirim"/>
</form>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> <style> [type="text"] { pointer-events: none; } </style> </head> <body> <form> Nama : <input type="text" name="nama" required="required"/> <input type="submit" value="Kirim"/> </form> <p> Tekan tombol kirim diatas dan biarkan kosong bidang input </p> </body> </html> |
size |
Nilai atribut ini adalah : angka | Menentukan lebar dari kolom input. Contoh : <input type="text" size="3"/>
<input type="text" size="10"/>
<input type="text" size="30"/>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <input type="text" size="3"/> <input type="text" size="10"/> <input type="text" size="30"/> </body> </html> |
src |
URL / link |
Menentukan link dari image, yang digunakan sebagai tombol kirim (hanya untuk type="image"). Contoh :
<form>
Nama:
<input type="text"/>
<input type="image" src="url-image.png"/>
</form>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <form> Nama: <input type="text"/> <input type="image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAMAAADzN3VRAAAAA3NCSVQICAjb4U/gAAAAP1BMVEUzMzP76aH0xQTcswpKRS3+/PCTfBz20DO3lxN7aSFjVyc+PDDQqg2fhRn////ovAdXTipvYCTEoBCrjhaHcx+j5LpJAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFnRFWHRDcmVhdGlvbiBUaW1lADA1LzI0LzE2ST+YhAAAAB90RVh0U29mdHdhcmUATWFjcm9tZWRpYSBGaXJld29ya3MgOLVo0ngAAAClSURBVCiRlZLhFoMgCIWvVDbL6aLe/1l3sZ3WdnQ78QMPfIIgIFHcKB8yOjqR0vDlL2wwUgFEJK4GRBzqIQxCqgOR/+Tm7x0P1aLyQfIDlJUmRDymd8yERdcZakQx54N0xfAIJGoXDqIl3rQlXaROJszdqTaAVoC3d7a9gBfZ0Ptgl0lYpz/1szF/H/eqIxBPnWaNl3/nGmnPpz3T9h782J3Gvj0Bjy4JnHllmXcAAAAASUVORK5CYII= " alt="Kirim" onclick="alert('Hanya untuk Demo')"/> </form> </body> </html> |
step |
Nilai atribut ini adalah : angka | Menentukan interval value. Contoh : <input type="range" value="0" step="1" min="0" max="100"/>
<input type="range" value="0" step="20" min="0" max="100"/>
<input type="range" value="0" step="50" min="0" max="100"/>
<input type="range" value="0" step="100" min="0" max="100"/>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> <style> [type="range"] { display :block; width : 100%; margin-bottom : 20px; } </style> </head> <body> <input type="range" value="0" step="1" min="0" max="100"/> <input type="range" value="0" step="20" min="0" max="100"/> <input type="range" value="0" step="50" min="0" max="100"/> <input type="range" value="0" step="100" min="0" max="100"/> <p> Geser input range diatas, dan lihat perbedaannya pada masing masing contoh </p> </body> </html> |
type |
Nilai atribut ini adalah :
|
Menentukan jenis value yang akan ditampilkan. Jika attribut ini tidak disebutkan, maka element <input> secara default akan menjadi
type="text" .<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <ol> <li>Tanpa <code>attribute</code> = <input/> </li> <li>Attribute type <code>button</code> = <input type="button" value="button"/> </li> <li>Attribute type <code>checkbox</code> = <input type="checkbox"/> </li> <li>Attribute type <code>color</code> = <input type="color" value="#ff0000"/> </li> <li>Attribute type <code>date</code> = <input type="date"/> </li> <li>Attribute type <code>datetime-local</code> = <input type="datetime-local"/> </li> <li>Attribute type <code>email</code> = <input type="email" placeholder="Email"/> </li> <li>Attribute type <code>file</code> = <input type="file"/> </li> <li>Attribute type <code>hidden</code> = <input type="hidden"/> </li> <li>Attribute type <code>image</code> = <input type="image" src="about:blank" alt="input type Image"> <!--ganti about:blank dengan url image--> </li> <li>Attribute type <code>month</code> = <input type="month"/> </li> <li>Attribute type <code>number</code> = <input type="number" value="100"/> </li> <li>Attribute type <code>password</code> = <input type="password" placeholder="Masukan password"/> </li> <li>Attribute type <code>radio</code> = <input type="radio"/> </li> <li>Attribute type <code>range</code> = <input type="range"/> </li> <li>Attribute type <code>reset</code> = <input type="reset" value="reset"/> </li> <li>Attribute type <code>search</code> = <input type="search" value="pencarian"/> </li> <li>Attribute type <code>submit</code> = <input type="submit" value="submit"/> </li> <li>Attribute type <code>tel</code> = <input type="tel" value="+6280123456789"/> </li> <li>Attribute type <code>text</code> = <input type="text" value="type text"/> </li> <li>Attribute type <code>time</code> = <input type="time"/> </li> <li>Attribute type <code>url</code> = <input type="url" value="https://example.com"/> </li> <li>Attribute type <code>week</code> = <input type="week"/> </li> </ol> </body> </html> body { font-family: sans-serif; font-size: 14px; } code { color: red; background: #ffdcdc; padding: 2px 4px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } li { padding: 10px; border: 1px solid #d0cccc; margin-bottom: 15px; line-height: 2em; } //javascript |
value |
Nilai atribut ini adalah : teks | Menentukan value suatu inputan, baik berupa angka maupun teks. Attribut ini tidak berlaku untuk Contoh :
type="radio" dan type="checkbox" <input type="text" value="ini sebuah teks"/>
<input type="button" value="ini sebuah button"/>
<input type="range" value="10"/>
<input type="submit" value="Kirim"/>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <input type="text" value="ini sebuah teks"/> <br/> <br/> <input type="button" value="ini sebuah button"/> <br/> <br/> <input type="range" value="10"/> <br/> <br/> <input type="submit" value="Kirim" onclick="alert('element FORM tidak ada')"/> </body> </html> |
width |
Nilai atribut ini adalah : pixels | Menentukan lebar sebuah image, hanya untuk type="image" .Contoh : <form action="/data.php">
Data:
<input type="text" name="data">
<input type="image" src="url-image.png" alt="Kirim" width="78" height="50">
</form>
|
Global Attributes:
Element
<input>
mencakup Global Attributes HTML.
Event Attributes:
Element
<input>
mencakup Event Attributes HTML.
Browser Support :
Desktop
Chrome | Ya |
---|---|
Safari | Ya |
Firefox | Ya |
Opera | Ya |
IE | Ya |
Edge | Ya |
Mobile
Android Webview | Ya |
---|---|
Chrome Android | Ya |
Edge Mobile | Ya |
Firefox Android | Ya |
Opera Android | Ya |
iOs Safari | Ya |
Samsung Internet | Ya |
Default CSS :
Browser yang support dengan element
<input>
, mempunyai nilai default :/* none */