HTML input Tag

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 file_extension `audio/` `video/` `image/*` media_type	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 : `_blank` `_self` `_parent` `_top` Nama Iframe	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 `form`. Contoh : <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 : `button` `checkbox` `color` `date` `datetime-local` `email` `file` `hidden` `image` `month` `number` `password` `radio` `range` `reset` `search` `submit` `tel` `text` `time` `url` `week`	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 `type="radio"` dan `type="checkbox"` Contoh : <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 */

Judul	`HTML input Tag`
Label	`HTML`
Diposting pada	`18 Maret 2017 - 04:47`
Diperbaharui pada	`23 Mei 2018 - 15:15`

Tutorial HTML `<input>`

Contoh HTML `<input>`

Contoh 2 HTML `<input>`

Contoh 3 HTML `<input>`

Attribute HTML `<input>`

Global Attributes:

Event Attributes:

Browser Support :

`Desktop`

`Mobile`

Default CSS :

Post Info

HTML ELEMENT

Populer Post

Arsip Blog

Label

HTML input Tag

Tutorial HTML <input>

Contoh HTML <input>

Contoh 2 HTML <input>

Contoh 3 HTML <input>

Attribute HTML <input>

Global Attributes:

Event Attributes:

Browser Support :

Desktop

Mobile

Default CSS :

Post Info

Populer Post

Arsip Blog

Label

Tutorial HTML `<input>`

Contoh HTML `<input>`

Contoh 2 HTML `<input>`

Contoh 3 HTML `<input>`

Attribute HTML `<input>`

`Desktop`

`Mobile`