Belajar HTML Form Part 6 - Atribut pada Elemen Input

<style> a.coba { float: left; font-size: 15px; background-color: #555555; color: #ffffff; border: 1px solid #555555; padding: 0 15px; line-height: 1.45; width: auto; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; box-sizing: border-box; } a.coba:hover { background-color:white; color:#555; } </style> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgulzc0DRdCzm1q1hdMgGzD3VDKt3vMwUnj0RMxOpn3O_w3t17CzFPMaKG-ZTBusOkV8vRuauEZ4B-751TIbwsUpGeB7jhTT4tXSM5LKGkleD6PggBrA41s_FVqOlDUbgNqGBVU3RbKhVs/s1600/html_tutorial.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Belajar HTML Form Part 6 - Atribut pada Elemen Input" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgulzc0DRdCzm1q1hdMgGzD3VDKt3vMwUnj0RMxOpn3O_w3t17CzFPMaKG-ZTBusOkV8vRuauEZ4B-751TIbwsUpGeB7jhTT4tXSM5LKGkleD6PggBrA41s_FVqOlDUbgNqGBVU3RbKhVs/s320/html_tutorial.jpg" title="Belajar HTML Form Part 6 - Atribut pada Elemen Input" width="320" /></a></div> <br /> <i>Assalamu'alaikum warohmatullaahi wabarokaatuh.</i><br /> <i><br /></i> <b>A. VALUE</b><br /> <b><br /></b> Atribut value digunakan untuk menentukan nilai awal dari <i>input field</i>.<br /> Contoh :<br /> <br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">form</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">action=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">""</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">Nama Depan:</span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">br</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">input</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">type=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"text"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">name=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"namadepan"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">value=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"Kamaludin"</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">br</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">Nama Belakang:</span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">br</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">input</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">type=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"text"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">name=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"namabelakang"</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">/form</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <br /> Penjelasan :<br /> <ul> <li style="text-align: justify;">Pada contoh di atas, value="Kamaludin" akan memberikan nilai awal dari <i>input field </i>yang dibuat menjadi Kamaludin.</li> </ul> <div style="text-align: justify;"> <a class="coba" href="http://batweber.greengaluh.com/html_form_input_atribut_value.html" target="_blank">Coba sendiri di sini</a></div> <div style="text-align: justify;"> <br /></div> <br /> <b><br /></b> <b>B. READONLY</b><br /> <b><br /></b> Atribut readonly digunakan untuk menjadikan sebuah <i>input field </i>read only (tidak bisa diubah)<br /> Contoh :<br /> <br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">form</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">action=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">""</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">Nama Depan:</span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">br</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">input</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">type=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"text"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">name=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"namadepan"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">value=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"Kamaludin"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">readonly</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">br</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">Nama Belakang:</span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">br</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">input</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">type=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"text"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">name=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"namabelakang"</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">/form</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <br /> Penjelasan :<br /> <ul> <li style="text-align: justify;">Pada contoh di atas, atribut readonly menjadikan <i>input field </i>yang dibuat hanya bisa dibaca, tidak bisa diubah nilainya.</li> </ul> <div style="text-align: justify;"> <a class="coba" href="http://batweber.greengaluh.com/html_form_input_atribut_readonly.html" target="_blank">Coba sendiri di sini</a></div> <div style="text-align: justify;"> <br /></div> <br /> <br /> <b>C. DISABLED</b><br /> <b><br /></b> Atribut disabled digunakan untuk menon-aktifkan sebuah <i>input field</i>. <i>Input field </i>yang diberi atribut disabled tidak bisa digunakan ataupun diklik. Sehingga pada saat form disubmit <i>input field </i>ini tidak akan mengirimkan data.<br /> Contoh :<br /> <br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">form</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">action=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">""</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">Nama Depan:</span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">br</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">input</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">type=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"text"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">name=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"namadepan"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">value=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"Kamaludin"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">disabled</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">br</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">Nama Belakang:</span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">br</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">input</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">type=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"text"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">name=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"namabelakang"</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">/form</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <br /> Penjelasan :<br /> <ul> <li>Pada contoh di atas, atribut disabled akan mebuat <i>input field </i>non-aktif</li> </ul> <div> <a class="coba" href="http://batweber.greengaluh.com/html_form_input_atribut_disabled.html" target="_blank">Coba sendiri di sini</a></div> <div> <br /></div> <br /> <br /> <b>D. SIZE</b><br /> <b><br /></b> Atribut size digunakan untuk menentukan ukuran dari sebuah <i>input field</i>. Jika misal sebuah <i>input field </i>diberi <i>size </i>10, maka ukuran dari <i>input field </i>tersebut sepanjang 10 karakter.<br /> Contoh :<br /> <br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">form</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">action=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">""</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">Nama Depan:</span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">br</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">input</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">type=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"text"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">name=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"namadepan"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">value=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"Kamaludin"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">size=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"40"</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">br</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">Nama Belakang:</span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">br</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">input</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">type=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"text"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">name=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"namabelakang"</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">/form</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <br /> Penjelasan :<br /> <ul> <li style="text-align: justify;">size="40" menunjukkan bahwa <i>input field </i>yang dibuat diberi ukuran sepanjang 40 karakter.</li> </ul> <div style="text-align: justify;"> <a class="coba" href="http://batweber.greengaluh.com/html_form_input_atribut_size.html" target="_blank">Coba sendiri di sini</a></div> <div style="text-align: justify;"> <br /></div> <br /> <br /> <b>E. MAXLENGTH</b><br /> <b><br /></b> Atribut maxlength digunakan untuk menentukan panjang maksimal dari <i>input field</i>.<br /> Contoh :<br /> <br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">form</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">action=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">""</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">Nama Depan:</span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">br</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">input</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">type=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"text"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">name=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"namadepan"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">maxlength=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"10"</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">br</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">Nama Belakang:</span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">br</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">input</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">type=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"text"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">name=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"namabelakang"</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">/form</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <br /> Penjelasan :<br /> <ul> <li>maxlength="10" menunjukkan bahwa <i>input field </i>yang dibuat tidak bisa diisi lebih dari 10 karakter.</li> </ul> <div> <a class="coba" href="http://batweber.greengaluh.com/html_form_input_atribut_maxlength.html" target="_blank">Coba sendiri di sini</a></div> <div> <br /></div> <br /> <br /> Demikian <b>Belajar HTML Form tentang Atribut pada Elemen Input</b>. Semoga bermanfaat, terima kasih dan <i>wassalamu'alaikum warohmatullaahi wabarokaatuh</i>.

Belajar HTML Form Part 6 - Atribut pada Elemen Input

Assalamu'alaikum warohmatullaahi wabarokaatuh. A. VALUE Atribut value digunakan untuk menentukan nilai awal dari input field ....

Read more »

Belajar HTML Form Part 5 - Tipe-Tipe Elemen Input HTML 5

<style> a.coba { float: left; font-size: 15px; background-color: #555555; color: #ffffff; border: 1px solid #555555; padding: 0 15px; line-height: 1.45; width: auto; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; box-sizing: border-box; } a.coba:hover { background-color:white; color:#555; } </style><br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkG_BmzLLKpdUOKEqOtv-XtAcC5mhF1-t81yEieXPNeD54pf9qcQRhfwqaR9PH-KwA-armGGb5brXK9AQEfhk4H75wXvNOcCiAw5ZxOWnFyTHQcqOpavSmBlH27EXxsOj2rTCoGMp1LWs/s1600/html_tutorial.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Belajar HTML Form Part 5 - Tipe-Tipe Elemen Input HTML 5" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkG_BmzLLKpdUOKEqOtv-XtAcC5mhF1-t81yEieXPNeD54pf9qcQRhfwqaR9PH-KwA-armGGb5brXK9AQEfhk4H75wXvNOcCiAw5ZxOWnFyTHQcqOpavSmBlH27EXxsOj2rTCoGMp1LWs/s320/html_tutorial.jpg" title="Belajar HTML Form Part 5 - Tipe-Tipe Elemen Input HTML 5" width="320" /></a></div> <br /> <i>Assalamu'alaikum warohmatullaahi wabarokaatuh.</i><br /> <div style="text-align: justify;"> Pada <b>Belajar HTML Form </b>kali ini kita akan melanjutkan artikel sebelumnya tentang <a href="http://batweber.blogspot.com/2016/04/belajar-html-form-part-4-tipe-tipe-elemen-input.html" target="_blank">Tipe-Tipe Input pada <b>Form HTML</b></a>. Namun kali ini tipe-tipe elemen input yang kita pelajari adalah <b>Tipe-Tipe Elemen Input pada Form HTML 5</b>. Ada beberapa tipe-tipe input baru yang ditambahkan pada <b>HTML 5</b>. yaitu :</div> <div style="text-align: justify;"> </div> <ul> <li>number</li> <li>date</li> <li>color</li> <li>range</li> <li>month</li> <li>week</li> <li>time</li> <li>datetime</li> <li>datetime-local</li> <li>email</li> <li>search</li> <li>tel</li> <li>url</li> </ul> <div> <div style="text-align: justify;"> Sebagaimana kita ketahui, <b>HTML 5 </b>ini tidak <i>support </i>jika dijalankan pada <i>browser </i>versi terdahulu. Dan jika hal itu terjadi (<i>browser </i>tidak <i>support</i>), maka tipe-tipe input tersebut akan ditampilkan dalam bentuk Tipe input <i>text </i>biasa.</div> </div> <div> <br /></div> <div> <b>A. NUMBER</b></div> <div> <b><br /></b></div> <div> Seperti namanya, tipe input number bisa digunakan untuk membuat sebuah inputan yang diisi nilai berupa angka.</div> <div> Contoh :</div> <div> <br /></div> <div> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">form</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  Masukkan angka antara 1 sampai 5:</span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  </span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">input</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">type=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"number"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">name=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"angka"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">min=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"1"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">max=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"5"</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">/form</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span></div> <div> <b><br /></b></div> <div> Penjelasan :</div> <div> <ul> <li style="text-align: justify;">Pada contoh di atas, kita membuat sebuah <i>input field </i>bertipe number yang hanya bisa diisi angka antara 1 sampai 5.</li> <li style="text-align: justify;">type ="number" menunjukkan tipe <i>input field</i>.</li> <li style="text-align: justify;">name="angka"menunjukkan nama <i>input field </i>tersebut adalah angka.</li> <li style="text-align: justify;">min="1" max="5" menunjukkan bahwa <i>input field </i>tersebut hanya bisa diisi oleh angka di antara 1 sampai 5</li> </ul> <div> <a class="coba" href="http://batweber.greengaluh.com/html_form_input_number.html" target="_blank">Coba sendiri di sini</a></div> </div> <div> <br /></div> <div> <b><br /></b></div> <div> <b>B. DATE</b></div> <div> <b><br /></b></div> <div> Tipe input date digunakan untuk membuat <i>input field </i>berupa inputan tanggal.</div> <div> Contoh :</div> <div> <br /></div> <div> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">form</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  Masukkan tanggal sebelum 1 Januari 1980:</span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  </span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">input</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">type=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"date"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">name=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"tanggallahir"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">max=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"1979-12-31"</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">br</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  Masukkan tanggal setelah 1 Januari 2000:</span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  </span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">input</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">type=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"date"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">name=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"tanggallahir"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">min=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"2000-01-02"</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">br</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">/form</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span></div> <div> <br /></div> <div> Penjelasan :</div> <div> <ul> <li style="text-align: justify;">type="date" menunjukkan tipe <i>input field </i>yang dibuat adalah date</li> <li style="text-align: justify;">name="tanggallahir" menunjukkan nama dari <i>field </i>tersebut adalah tanggallahir</li> <li style="text-align: justify;">max="1979-12-31" menunjukkan bahwa tanggal yang bisa diinput hanya dari 31 Desember 1979 dan sebelumnya</li> <li style="text-align: justify;">min="2000-01-02" menunjukkan bahwa tanggal yang bisa diinput hanya dari 2 Januari 2000 dan setelahnya.</li> </ul> <div> <a class="coba" href="http://batweber.greengaluh.com/html_form_input_date.html" target="_blank">Coba sendiri di sini</a></div> </div> <div> <br /></div> <div> <br /></div> <div> <b>C. COLOR</b></div> <div> <b><br /></b></div> <div> Tipe input color digunakan untuk memunculkan popup pilihan warna.</div> <div> Contoh :</div> <div> <br /></div> <div> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">form</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  Pilih warna favoritmu:</span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  </span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">input</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">type=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"color"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">name=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"warnafavorit"</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">/form</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span></div> <div> <br /></div> <div> Penjelasan :</div> <div> <ul> <li>type="color" menunjukkan bahwa tipe <i>input field </i>yang dibuat bertipe color</li> <li>name="warnafavorit" menunjukkan nama dari <i>input field </i>yang dibuat adalah warnafavorit</li> </ul> <div> <a class="coba" href="http://batweber.greengaluh.com/html_form_input_date.html" target="_blank">Coba sendiri di sini</a></div> </div> <div> <br /></div> <div> <b><br /></b></div> <div> <b>D. RANGE</b></div> <div> <b><br /></b></div> <div> Tipe range digunakan untuk membuat <i>input field </i>dengan jarak nilai yang telah ditentukan.</div> <div> Contoh :</div> <div> <br /></div> <div> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">form</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  </span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">input</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">type=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"range"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">name=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"points"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">min=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"0"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">max=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"10"</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">/form</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span></div> <div> <br /></div> <div> Penjelasan :</div> <div> <ul> <li>type="range" menunjukkan bahwa tipe <i>input field </i>yang dibuat adalah range</li> <li>name="points" menunjukkan <i>input field </i>yang dibuat adalah points</li> <li>min="0" max="10" menunjukkan jarak nilai dari <i>input field </i>adalah mulai dari 0 sampai 10</li> </ul> <div> <a class="coba" href="http://batweber.greengaluh.com/html_form_input_range.html" target="_blank">Coba sendiri di sini</a></div> </div> <div> <br /></div> <div> <b><br /></b></div> <div> <b>E. MONTH</b></div> <div> <b><br /></b></div> <div> Tipe input month digunakan untuk membuat <i>input field </i>bulan dan tahun.</div> <div> Contoh :</div> <div> <br /></div> <div> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">form</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  Lahir (bulan dan tahun):</span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  </span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">input</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">type=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"month"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">name=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"bulanlahir"</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">/form</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span></div> <div> <br /></div> <div> Penjelasan :</div> <div> <ul> <li>type="month" menunjukkan tipe dari <i>input field </i>adalah month.</li> <li>name="bulanlahir" menunjukkan <i>input field </i>yang dibuat diberi nama bulanlahir</li> </ul> <div> <a class="coba" href="http://batweber.greengaluh.com/html_form_input_month.html" target="_blank">Coba sendiri di sini</a></div> </div> <div> <br /></div> <div> <br /></div> <div> <b>F. WEEK</b></div> <div> <b><br /></b></div> <div> Tipe input week digunakan untuk membuat <i>input field </i>berupa minggu dan tahun.</div> <div> Contoh :</div> <div> <br /></div> <div> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">form</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  pilih minggu:</span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  </span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">input</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">type=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"week"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">name=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"minggutahun"</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">/form</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span></div> <div> <br /></div> <div> Penjelasan ;</div> <div> <ul> <li>type="week" menunjukkan <i>input field </i>yang dibuat bertipe week</li> <li>name="minggutahun" memberi nama minggutahun terhadap <i>input field </i>yang kita buat.</li> </ul> <div> <a class="coba" href="http://batweber.greengaluh.com/html_form_input_week.html" target="_blank">Coba sendiri di sini</a></div> </div> <div> <br /></div> <div> <b><br /></b></div> <div> <b>G. TIME</b></div> <div> <b><br /></b></div> <div> Tipe input time digunakan untuk membuat <i>input field </i>untuk waktu(tanpa zona waktu).</div> <div> Contoh :</div> <div> <br /></div> <div> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">form</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  Tentukan waktu:</span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  </span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">input</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">type=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"time"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">name=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"waktu"</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">/form</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span></div> <div> <br /></div> <div> Penjelasan :</div> <div> <ul> <li>type="time" menunjukkan tipe inputan yang dibuat adalah time.</li> <li>name="waktu" menunjukkan nama inputan yang diberikan pada <i>input field </i>adalah waktu.</li> </ul> <div> <a class="coba" href="http://batweber.greengaluh.com/html_form_input_time.html" target="_blank">Coba sendiri di sini</a></div> </div> <div> <br /></div> <div> <b><br /></b></div> <div> <b>H. DATETIME</b></div> <div> <b><br /></b></div> <div> <div style="text-align: justify;"> Tipe input datetime digunakan untuk membuat <i>input field </i>waktu dan tanggal (dengan zona waktu). Sebagai catatan, tipe input datetime telah dihapus dari standar HTML. Maka lebih disarankan menggunakan tipe datetime-local.</div> </div> <div> Contoh :</div> <div> <br /></div> <div> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">form</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  Masukkan waktu dan tanggal:</span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  </span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">input</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">type=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"datetime"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">name=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"waktutanggal"</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">/form</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span></div> <div> <br /></div> <div> Penjelasan :</div> <div> <ul> <li>type="datetime" menunjukkan tipe <i>input field </i>yang dibuat adalah datetime.</li> <li>name="waktutanggal" menunjukkan nama dari <i>input field </i>adalah waktutanggal</li> </ul> <div> <a class="coba" href="http://batweber.greengaluh.com/html_form_input_datetime.html" target="_blank">Coba sendiri di sini</a></div> </div> <div> <br /></div> <div> <b><br /></b></div> <div> <b>I. DATETIME-LOCAL</b></div> <div> <b><br /></b></div> <div> Tipe input datetime digunakan untuk membuat <i>input field </i>waktu dan tanggal (tanpa zona waktu).</div> <div> Contoh :</div> <div> <br /></div> <div> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">form</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  Masukkan waktu dan tanggal:</span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  </span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">input</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">type=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"datetime-local"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">name=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"waktutanggal"</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">/form</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span></div> <div> <br /></div> <div> Penjelasan :</div> <div> <ul> <li>type="datetime" menunjukkan tipe <i>input field </i>yang dibuat adalah datetime.</li> <li>name="waktutanggal" menunjukkan nama dari <i>input field </i>adalah waktutanggal</li> </ul> <div> <a class="coba" href="http://batweber.greengaluh.com/html_form_input_datetime-local.html" target="_blank">Coba sendiri di sini</a></div> </div> <div> <br /></div> <div> <b><br /></b></div> <div> <b>J. EMAIL</b></div> <div> <b><br /></b></div> <div style="text-align: justify;"> Tipe input email digunakan untuk membuat <i>input field </i>untuk inputan alamat e-mail. Jika <i>browser </i>yang digunakan <i>support</i>, secara otomatis <i>browser </i>akan memvalidasi apakah format e-mail yang dimasukkan sudah benar.</div> <div style="text-align: justify;"> Contoh :</div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">form</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  E-mail:</span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  </span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">input</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">type=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"email"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">name=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"email"</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">/form</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span></div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> Penjelasan :</div> <div style="text-align: justify;"> <ul> <li>type="email" menunjukkan <i>input field </i>yang dibuat bertipe email</li> <li>name="email" berarti memberi nama <i>input field </i>yang dibuat dengan email.</li> </ul> <div> <a class="coba" href="http://batweber.greengaluh.com/html_form_input_email.html" target="_blank">Coba sendiri di sini</a></div> <div> <br /></div> </div> <div> <b><br /></b></div> <div> <b>K. SEARCH</b></div> <div> <b><br /></b></div> <div> <div style="text-align: justify;"> Tipe input search digunakan untuk membuat <i>input field </i>yang digunakan untuk melakukan pencarian. Dari segi tampilan, <i>input field </i>ini akan ditampilkan seperti <i>text field </i>biasa.</div> <div style="text-align: justify;"> Contoh :</div> </div> <div> <br /></div> <div> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">form</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  Cari:</span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  </span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">input</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">type=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"search"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">name=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"pencarian"</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">/form</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span></div> <div> <br /></div> <div> Penjelasan :<br /> <ul> <li>type="search" menunjukkan <i>input field </i>yang dibuat bertipe search</li> <li>name="pencarian" menunjukkan <i>input field </i>yang dibuat diberi nama pencarian</li> </ul> <div> <a class="coba" href="http://batweber.greengaluh.com/html_form_input_search.html" target="_blank">Coba sendiri di sini</a></div> </div> <div> <br /></div> <div> <b><br /></b></div> <div> <b>L. TEL</b></div> <div> <b><br /></b></div> <div> Tipe input tel digunakan untuk membuat <i>input field </i>yang diisi nomer telepon.<br /> Contoh :<br /> <br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">form</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  Telepon:</span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  </span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">input</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">type=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"tel"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">name=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"telepon"</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">/form</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <br /> Penjelasan :<br /> <ul> <li>type="tel" menunjukkan tipe <i>input field </i>yang dibuat adalah tel</li> <li>name="telepon" menunjukkan <i>input field </i>yang dibuat diberi nama telepon.</li> </ul> <div> <a class="coba" href="http://batweber.greengaluh.com/html_form_input_tel.html" target="_blank">Coba sendiri di sini</a></div> </div> <div> <br /></div> <div> <b><br /></b></div> <div> <b>M. URL</b><br /> <b><br /></b> <div style="text-align: justify;"> <b>Tipe input url digunakan untuk membuat <i>input field </i>url. Jika <i>browser </i>yang digunakan <i>support</i>, maka <i>browser </i>akan memvalidasi format url yang digunakan secara otomatis.</b></div> <br /> Contoh :<br /> <br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">form</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  Masukkan alamat url:</span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  </span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">input</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">type=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"url"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">name=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"alamaturl"</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">/form</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <br /> Penjelasan :<br /> <ul> <li>type="url" menunjukkan tipe dari <i>input field </i>yang dibuat adalah url.</li> <li>name="alamaturl" menunjukkan <i>input field </i>yang dibuat diberi nama alamaturl.</li> </ul> <div> <a class="coba" href="http://batweber.greengaluh.com/html_form_input_url.html" target="_blank">Coba sendiri di sini</a></div> <div> <br /></div> <div> <br /></div> <div> Demikian <b>Belajar HTML Form tentant tipe-tipe input pada HTML 5</b>. Semoga bermanfaat.</div> <div> Terima kasih dan</div> <div> <i>wassalamu'alaikum warohmatullaahi wabarokaatuh.</i></div> </div>

Belajar HTML Form Part 5 - Tipe-Tipe Elemen Input HTML 5

Assalamu'alaikum warohmatullaahi wabarokaatuh. Pada Belajar HTML Form kali ini kita akan melanjutkan artikel sebelumnya tentang  T...

Read more »

Belajar HTML Form Part 4 - Tipe-Tipe Elemen Input

<style> a.coba { float: left; font-size: 15px; background-color: #555555; color: #ffffff; border: 1px solid #555555; padding: 0 15px; line-height: 1.45; width: auto; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; box-sizing: border-box; } a.coba:hover { background-color:white; color:#555; } </style> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgulzc0DRdCzm1q1hdMgGzD3VDKt3vMwUnj0RMxOpn3O_w3t17CzFPMaKG-ZTBusOkV8vRuauEZ4B-751TIbwsUpGeB7jhTT4tXSM5LKGkleD6PggBrA41s_FVqOlDUbgNqGBVU3RbKhVs/s1600/html_tutorial.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Belajar HTML Form Part 4 - Tipe-Tipe Elemen Input" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgulzc0DRdCzm1q1hdMgGzD3VDKt3vMwUnj0RMxOpn3O_w3t17CzFPMaKG-ZTBusOkV8vRuauEZ4B-751TIbwsUpGeB7jhTT4tXSM5LKGkleD6PggBrA41s_FVqOlDUbgNqGBVU3RbKhVs/s320/html_tutorial.jpg" title="Belajar HTML Form Part 4 - Tipe-Tipe Elemen Input" width="320" /></a></div> <br /> <i>Assalamu'alaikum warohmatullaahi wabarokaatuh.</i><br /> <span style="text-align: justify;">Dalam </span><b style="text-align: justify;">Belajar HTML </b><span style="text-align: justify;">kita kali ini, kita akan mempelajari tentang </span><b style="text-align: justify;">tipe-tipe elemen input pada form HTML</b><span style="text-align: justify;">. Pada </span><b style="text-align: justify;">HTML</b><span style="text-align: justify;">, kita akan mengenal beberapa tipe input dasar, yaitu :</span><br /> <ul> <li>text</li> <li>password</li> <li>submit</li> <li>radio</li> <li>checkbox</li> <li>button</li> </ul> <div> <b>A. TEXT</b></div> <div> <br /></div> <div> <div style="text-align: justify;"> Tipe input text digunakan untuk memberikan <i>field </i>input berupa text.</div> </div> <div> Contoh :</div> <div> <br /></div> <div> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">form</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  Nama Depan:</span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">br</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  </span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">input</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">type=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"text"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">name=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"namadepan"</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">br</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  Nama Belakang:</span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">br</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  </span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">input</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">type=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"text"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">name=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"namabelakang"</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">/form</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span></div> <div> <b><br /></b></div> <div> Penjelasan :</div> <div> <ul> <li style="text-align: justify;">Dalam <i>script </i><b>HTML </b>di atas, dengan memberikan atribut <b>type="text"</b>, kita telah membuat dua input dengan tipe text.</li> <li style="text-align: justify;">input text pertama diberi nama namadepan, dan input text kedua diberi nama namabelakang.</li> </ul> </div> <div> <a class="coba" href="http://batweber.greengaluh.com/html_form_input_text.html" target="_blank">Coba sendiri di sini</a></div> <div> <b><br /></b></div> <div> <b><br /></b></div> <div> <b>B. PASSWORD</b></div> <div> <b><br /></b></div> <div> <div style="text-align: justify;"> Tipe input password digunakan jika kita ingin inputan yang diketik pengguna tidak ditampilkan atau disembunyikan, seperti ketika menginput password.</div> </div> <div> Contoh :</div> <div> <br /></div> <div> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">form</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  Username:</span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">br</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  </span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">input</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">type=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"text"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">name=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"username"</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">br</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  Password:</span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">br</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  </span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">input</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">type=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"password"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">name=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"password"</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">/form</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span></div> <div> <span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><br /></span></div> <div> Penjelasan :</div> <div> <ul> <li style="text-align: justify;">Pada contoh di atas, kita membuat dua inputan. Inputan pertama adalah inputan teks biasa dengan nama username.</li> <li style="text-align: justify;">Pada contoh inputan kedua, kita membuat inputan password. Apa yang kita ketik di inputan ini tidak akan ditampilkan.</li> </ul> </div> <div> <a class="coba" href="http://batweber.greengaluh.com/html_form_input_password.html" target="_blank">Coba sendiri di sini</a></div> <div> <b><br /></b> <b><br /></b></div> <div> <b>C. SUBMIT</b></div> <div> <b><br /></b></div> <div> <div style="text-align: justify;"> Tipe input submit digunakan untuk men-<i>submit </i>atau mengirimkan data yang telah diisikan. Bentuk dari sebuah input tipe submit ditampilkan pada sebuah tombol / <i>button.</i></div> Contoh :<br /> <br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">form</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">action=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"action_page.php"</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  First name:</span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">br</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  </span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">input</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">type=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"text"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">name=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"namadepan"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">value=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"Mickey"</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">br</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  Last name:</span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">br</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  </span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">input</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">type=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"text"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">name=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"namabelakang"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">value=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"Mouse"</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">br</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">br</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  </span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">input</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">type=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"submit"</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">/form</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <br /> Penjelasan :<br /> <ul> <li style="text-align: justify;">Dalam contoh di atas, <input type="submit"> merujuk pada tombol submit yang kita buat.</li> </ul> <div> <a class="coba" href="http://batweber.greengaluh.com/html_form_input_submit.html" target="_blank">Coba sendiri di sini</a></div> </div> <div> <b><br /></b></div> <div> <b><br /></b> <b>D. RADIO</b></div> <div> <b><br /></b></div> <div> <div style="text-align: justify;"> Tipe radio digunakan untuk membuat inputan berupa pilihan. Yang mana hanya satu pilihan yang diperbolehkan.</div> Contoh :<br /> <br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">form</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  </span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">input</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">type=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"radio"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">name=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"jenis_kelamin"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">value=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"Laki-laki"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">checked</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">L</span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">br</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  </span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">input</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">type=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"radio"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">name=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"jenis_kelamin"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">value=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"Perempuan"</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">P</span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">br</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  </span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">input</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">type=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"radio"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">name=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"jenis_kelamin"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">value=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"Lainnya"</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> Lainnya</span><br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">/form</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><br /></span> <span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><span style="color: black; font-family: "times new roman"; font-size: small; line-height: normal;">Penjelasan :</span></span><br /> <ul> <li>Pada contoh di atas, kita membuat tiga radio yang diberi nama jenis_kelamin. </li> <li>Pilihan pertama diberi <i>value </i>Laki-laki, dengan teks yang ditampilkan L</li> <li>Pilihan pertama diberi <i>value </i>Perempuan, dengan teks yang ditampilkan P</li> <li>Pilihan pertama diberi <i>value </i>Lainnya, dengan teks yang ditampilkan Lainnya.</li> </ul> <div> <a class="coba" href="http://batweber.greengaluh.com/html_form_input_radio.html" target="_blank">Coba sendiri di sini</a></div> </div> <div> <br /></div> <div> <b><br /></b></div> <div> <b>E. CHECKBOX</b></div> <div> <b><br /></b></div> <div> <div style="text-align: justify;"> Berbeda dengan radio, Checkbox membolehkan inputan lebih dari satu pilihan.</div> Contoh :<br /> <br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">form</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  </span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">input</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">type=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"checkbox"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">name=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"kendaraan1"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">value=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"Sepeda"</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> Sepeda</span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">br</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">  </span><span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">input</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">type=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"checkbox"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">name=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"kendaraan2"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">value=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"Mobil"</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> Mobil </span><br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">/form</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><br /></span> <span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><span style="color: black; font-family: "times new roman"; font-size: small; line-height: normal;">Penjelasan :</span></span><br /> <ul> <li style="text-align: justify;">Contoh di atas menunjukkan dua pilihan antara sepeda dan mobil. Kita bisa memilih salah satu ataupun keduanya.</li> </ul> <div> <a class="coba" href="http://batweber.greengaluh.com/html_form_input_checkbox.html" target="_blank">Coba sendiri di sini</a></div> <div> <br /></div> </div> <div> <b><br /></b></div> <div> <b>F. BUTTON</b><br /> <b><br /></b> Seperti namanya, tipe input <i>button </i>digunakan untuk membuat sebuah <i>button </i>atau tombol.<br /> Contoh :<br /> <br /> <span class="highLT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><</span><span class="highELE" style="box-sizing: border-box; color: brown; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">input</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">type=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"button"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">onclick=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"alert('Hai')"</span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"> </span><span class="highATT" style="box-sizing: border-box; color: red; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">value=</span><span class="highVAL" style="box-sizing: border-box; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">"Click Saya!"</span><span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;">></span><br /> <span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><br /></span> <span class="highGT" style="box-sizing: border-box; color: blue; font-family: "consolas" , "courier new"; font-size: 16px; line-height: 22.4px;"><span style="color: black; font-family: "times new roman"; font-size: small; line-height: normal;">Penjelasan :</span></span><br /> <ul> <li>Contoh di atas adalah <i>script </i>untuk membuat sebuah button dengan kombinasi javascript.</li> </ul> <div> <a class="coba" href="http://batweber.greengaluh.com/html_form_input_button.html" target="_blank">Coba sendiri di sini</a></div> <div> <br /></div> <div> <br /></div> <div> Demikian <b>Belajar HTML tentang Tipe-Tipe Elemen Input pada form HTML</b>. Semoga bermanfaat, terima kasih dan <i>wassalamu'alaikum warohmatullaahi wabarokaatuh</i>.</div> </div>

Belajar HTML Form Part 4 - Tipe-Tipe Elemen Input

Assalamu'alaikum warohmatullaahi wabarokaatuh. Dalam Belajar HTML kita kali ini, kita akan mempelajari tentang tipe-tipe elemen in...

Read more »