Macam - Macam Tag Input Forms Pada Materialize

Selamat datang kembali di website tips dan trik Dumet School, pada kesempatan kali ini kita sampai pada tahap pembahasan tentang Macam – Macam Tag Input Forms Pada Materialize. Nanti teman – teman akan melihat hasil output dari tag input dengan type nya dan juga menggunakan tag select option. Oke langsung saja kita praktekkan, teman – teman siapkan text editornya dan juga 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 Anda</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 pada file index.html nya, dan jalankan pada browsernya. Maka hasilnya seperti gambar di bawah ini

Pada saat input data atau saat mouse di klik text akan di minimize

Nah lanjut pada praktek Macam – Macam Tag Input Forms Pada Materialize, kita akan membuat beberapa type tag input yang di sediakan oleh materialize diantarannya ada checkbox, radio, textarea dan juga fungsi select option. Teman – teman bisa 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>

Maka hasilnya seperti gambar di bawah ini

Jika di klik masing – masing memiliki efek

Berikutnya kita akan membuat 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 maka hasilnya seperti di bawah ini

Hasilnya cukup menarik bukan,,??

Baik, sekian pada artikel kali ini tentang Macam – Macam Tag Input Forms Pada Materialize kita akan berjumpa kembali pada artikel yang akan datang. Semoga bermanfaat, terimakasih dan sampai jumpa.

Macam – Macam Tag Input Forms Pada Materialize

Kategori