tRikSonic
Tema
  • Original
  • Translate
/ / HTML input Tag

HTML input Tag

Terakhir diperbarui : 23 Mei 2018 - 15.15
/ / 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.
background html
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>&lt;form&gt;</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

ChromeYa
SafariYa
FirefoxYa
OperaYa
IEYa
EdgeYa

Mobile

Android WebviewYa
Chrome AndroidYa
Edge MobileYa
Firefox AndroidYa
Opera AndroidYa
iOs SafariYa
Samsung InternetYa

Default CSS :

Browser yang support dengan element <input>, mempunyai nilai default :
/* none */
Postingan Lebih BaruBerandaPostingan Lama
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.