Membuat Form Keren dengan Materialize CSS
Setelah sebelumnya admin sudah posting Materialize CSS, CSS Framework Keren Buatan Google, maka kali ini admin akan sharing cara bagaimana implementasi dari Materialize CSS yaitu dengan Membuat Form Keren dengan Materialize CSS.
Untuk hasilnya kurang lebih seperti gambar berikut:
Ok, Langsung saja untuk langkah demi langkah akan admin jelaskan.
- Download Materialize CSS terlebih dulu. Klik link berikut :
- Extrak materialize-v0.97.1.zip yang sudah didownload. Hasilnya
- Copy folder materialize dan Paste ke xampp/htdocs
- Buat file baru di folder materialize dengan nama kontak.php
- Copy dan Paste Source Code di bawah ini
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="css/materialize.css">
<link rel="stylesheet" href="css/materialize.min.css">
</head>
<body>
<div class="section no-pad" style="margin-top: -2%;">
<div class="container-fit">
<div class="section no-pad grey lighten-5 z-depth-2" style="padding-bottom: 50px;">
<div class="section border-color green darken-2 waves-effect waves-light">
<h5 class="header center white-text">Kontak Kami</h5>
</div>
<div class="container-wide-footer">
<div class="section"></div>
<div class="section">
<div class="row">
<form class="col s12" METHOD="post" action="">
<div class="row">
<div class="input-field col s12 m4 center-on-small-only">
<i class="mdi-action-account-circle prefix"></i>
<input name="nama" id="icon_prefix" type="text" class="validate">
<label for="icon_prefix">Nama</label>
</div>
<div class="input-field col s12 m4 center-on-small-only">
<i class="mdi-communication-phone prefix"></i>
<input name="telepon" id="icon_telephone" type="tel" class="validate">
<label for="icon_telephone">Telepon</label>
</div>
</div>
<div class="row">
<div class="input-field col s12 ">
<i class="mdi-communication-email prefix"></i>
<input name="email" id="email" type="email" class="validate" required>
<label for="email" data-error="wrong" data-success="right">Email</label>
</div>
</div>
<div class="row">
<div class="input-field col s12 ">
<i class="mdi-maps-place prefix"></i>
<input name="alamat" id="address" type="text" class="validate">
<label for="address">Alamat</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<i class="mdi-content-create prefix"></i>
<textarea name="pesan" id="textarea" class="materialize-textarea" required></textarea>
<label for="textarea">Pesan</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<button class="btn waves-effect waves-light right" type="submit" value="send">Kirim
<i class="mdi-content-send right"></i>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/materialize.min.js"></script>
</body>
</html>
- Simpan dan jalankan.
Sekian posting Membuat Form Keren dengan Materialize CSS. Semoga bermanfaat dan terimakasih.
Makasih gan
ReplyDeletenih ada tutorial button keren juga bro
ReplyDeletepengaplikasian sticky button materialize di blogger tanpa merusak tema bawaan blogger
http://www.informationsystem.ga/2017/08/cara-membuat-sticky-button-di-blogger.html
nih ada tutorial button keren juga bro
ReplyDeletepengaplikasian sticky button materialize di blogger tanpa merusak tema bawaan blogger
http://www.informationsystem.ga/2017/08/cara-membuat-sticky-button-di-blogger.html