Membuat Form Login dengan Materialize

Era sekarang ini membuat tampilan suatu website bukan lagi hal yang sulit. Jika kalian mempunyai basic HTML dan CSS tentu akan dengan mudah sekali membuatnya. Namun bagi kalian yang tidak terlalu mahir dengan HTML dan CSS apakah bisa membuat tampilan yang bagus ?. Jawabanya tentu bisa. Sekarang ini sudah banyak sekali framework CSS yang bisa kalian pergunakan untuk merangkai tampilan website dari awal menjadi terlihat menarik.

Framework dapat sekali membantu kalian untuk merancang tampilan website, karena pada framework sudah disediakan berbagai macam kebutuhan untuk menunjang desain website seperti halnya membuat table, tombol, ataupun form. Dengan framework, kalian yang tidak punya basic desain dan pengetahuan html cssnya standar pun bisa. Karena framework telah dilengkapi dokumentasi yang menuntun kalian untuk membuat tampilan website

Pada artikel kali ini kita akan mencoba membuat form login dengan Materialize. Materialize ini adalah salah satu framework yang cukup populer selain Bootstrap. Isi dari framework ini kurang lebih sama dengan framework lain. Yaitu memberikan kemudahan dalam merancang tampilan website. Kalian cukup baca dokumentasinya, lalu bisa dicoba dengan mencopy code yang sudah diberikan dan kalian modifikasi sesuai keinginan

Oke langsung saja kita mulai untuk praktek membuat form login. Kalian bisa ikuti code dibawah ini.

index.html

<html>

<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
  <style>
    
  </style>
</head>

<body>
  <div class="section"></div>
  <main>
    <center>
      
      <div class="section"></div>

      <h5 class="indigo-text">Form Login</h5>
      <div class="section"></div>

      <div class="container">
        <div class="z-depth-1 grey lighten-4 row" style="display: inline-block; padding: 32px 48px 0px 48px; border: 1px solid #EEE;">

          <form class="col s12" method="post">
            <div class='row'>
              <div class='col s12'>
              </div>
            </div>

            <div class='row'>
              <div class='input-field col s12'>
                <input class='validate' type='email' name='email' id='email' />
                <label for='email'>Enter your email</label>
              </div>
            </div>

            <div class='row'>
              <div class='input-field col s12'>
                <input class='validate' type='password' name='password' id='password' />
                <label for='password'>Enter your password</label>
              </div>
              <label style='float: right;'>
								<a class='pink-text' href='#!'><b>Forgot Password?</b></a>
							</label>
            </div>

            <br />
            <center>
              <div class='row'>
                <button type='submit' name='btn_login' class='col s12 btn btn-large waves-effect indigo'>Login</button>
              </div>
            </center>
          </form>
        </div>
      </div>
      <a href="#!">Create account</a>
    </center>

    <div class="section"></div>
    <div class="section"></div>
  </main>

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
</body>

</html>

Jika sudah kalian simpan filenya dengan format html. Dan jika berhasil maka tampilanya akan seperti ini.

Mudah bukan ?

Sekian pembahasan mengenai cara membuat form login dengan Materialize. Semoga bermanfaat.

index.html

Kategori