Macam – Macam Tag Input Forms Pada Materialize

Selamat datang kembali di laman tips dan trik Source Code Aplikasi, di kesempatan kali ini kita hingga di tahap pembahasan mengenai Macam – Macam Tag Input Forms Pada Materialize. Nanti teman – teman akan melihat hasil output dari tag input dengan type nya dan pun menggunakan tag select option. Oke seketika saja kita praktekkan, teman – teman siapkan  text editornya dan pun file materialize nya. Kemudian copy script html nya di bawah ini

<div class=row>
<form class=col s12>
  <div class=row>
    <div class=input-field col s6>
      <i class=material-icons prefix>account_circle</i>
      <input id=icon_prefix type=text class=validate>
      <label for=icon_prefix>Masukkan Nama Sahabat</label>
    </div>
    <div class=input-field col s6>
      <i class=material-icons prefix>phone</i>
      <input id=icon_telephone type=tel class=validate>
      <label for=icon_telephone>Telephone</label>
    </div>
  </div>
</form>
</div>

Pastekan di file index.html nya, dan jalankan di browsernya. Karenanya hasilnya seperti gambar di bawah ini

Di dikala input data atau dikala mouse di klik text akan di minimize

Nah lanjut di praktek Macam – Macam Tag Input Forms Pada Materialize, kita akan membangun beberapa type tag input yang di sediakan oleh materialize diantarannya ada checkbox, radio, textarea dan pun guna select option. Teman – teman dapat copy script di bawah ini

<div class=input-field col s6>
    <i class=material-icons prefix>mode_edit</i>
    <textarea id=icon_prefix2 class=materialize-textarea></textarea>
    <label for=icon_prefix2>First Name</label>
</div>
<div class=input-field col s12>
    <select>
        <option value= selected>Choose your option</option>
        <option value=1>Option 1</option>
        <option value=2>Option 2</option>
        <option value=3>Option 3</option>
        <label>Materialize Select</label>
    </select>
</div>

Karenanya hasilnya seperti gambar di bawah ini

Seandainya di klik masing – masing mempunyai efek

Berikutnya kita akan membangun tag input radio dan checkbox

<p>
    <input class=with-gap name=group3 type=radio id=test5 checked />
    <label for=test5>Red</label>
</p>
<p>
    <input class=with-gap name=group3 type=radio id=test6 checked />
    <label for=test6>Blue</label>
</p>
<p>
    <input type=checkbox class=filled-in id=filled-in-box checked=checked />
    <label for=filled-in-box>Filled in</label>
</p>

Ketika kita klik karenanya hasilnya seperti di bawah ini

Hasilnya lumayan menarik bukan,,??

Bagus, demikianlah di artikel kali ini mengenai Macam – Macam Tag Input Forms Pada Materialize kita akan berjumpa kembali di artikel yang akan datang. Semoga bermanfaat, terimakasih dan hingga jumpa.

Sumber https://kursuswebsite.org