Membuat Form Login Dengan Materialize CSS

Hallo sahabat semua, buat yang lagi sibuk dirumah sedang belajar atau bekerja jangan lupa jaga kesehatannya. Dalam kesempatan ini saya mau membahas seputar Materialize CSS. Materialize CSS tentu buat sebagian orang tidak asing lagi dalam pembuatan web design. Kali ini kita akan belajar membuat form login sederhana menggunakan Materialize CSS. Yuk langsung saja membuatnya ikuti step-step berikut.

Langkah pertama sahabat buka website dari Materialize lalu text editor masing-masing langsung buat struktur dari form seperti dibawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Membuat Form Login Menggunakan Materilize</title>

    
	<!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

oiya jangan lupa masukan library CSS serta js dari Materialize dan jQuery pada bagian tag head

Langkah selanjutnya yaitu code untuk strujtur form login seperti ini:

<div class="row">
		<div class="col s12 m4 offset-m4">
			<div class="card z-depth-5">
				<div class="card-action cyan white-text">
					<h3 align="center">Form Login</h3>
				</div>
				<form action="#">
				<div class="card-content">
					<div class="input-field">
						<label for="username">Username</label>
						<input type="text" id="username">
					</div><br>
					<div class="input-field">
						<label for="password">Password</label>
						<input type="text" id="password">
					</div><br>
					<div class="input-field">
						<label for="checkin">
							<input type="checkbox" id="checkin">
        					<span>Remember me</span>
        				</label>
					</div><br><br>
					<div class="input-field">
						<button class="btn-large waves-effect cyan btn" style="width: 100%">input</i>LOGIN</button>
					</div><br>
				</div></form>
			</div>
		</div>
	</div>

bisa diperhatikan untuk bagian button diberikan style inline untuk mengatur width button sebesar 100%. Baiklah simpan code diatas lalu buka pada browser masing-masing maka akan seperti tampilan berikut:

Jadi pada gambar sebelah kiri tampilan secara default browser dan gambar bagian kanan tampilan responsive dalam device kindle dengan resolusi 800 x 1280 pixel.

Bagaimana sungguh mudah bukan menggunakan framework Materialize dalam Membuat Form Login. Saya rasa cukup dalam pembahasan artikel ini tentang cara Membuat Form Login Dengan Materialize CSS. Semoga bermanfaat serta sampai jumpa dilain kesempatan dan terima kasih.

Membuat Form Login Dengan Materialize CSS

Kategori