Skip to content

WebHozz Blog

Kursus Web & Android di Jakarta Bandung

  • Home
  • Web Design
  • Web Programming
  • Android
  • Other
    • React Native
    • Java
    • Python
    • WordPress
    • SEO
    • Google Ads
    • Toko Online
    • Photoshop
    • Artikel
  • WebHozz.com

Mempercantik Tampilan Form Login

December 6, 2018 dody Belajar Web Design

 

Assalamualaikum Wr. Wb.

Pada kesempatan kali ini webhozz akan berbagi ilmu lagi. Kali ini tentang Web design. Adapun pada artikel ini akan dibahas untuk membuat mempercantik form login.
Sebuah form login tentunya merupakan halaman awal saat kita coba memasuki ruangan user kita. Form login tentunya merupakan pintu masuk ke dalam ruangan user, baik itu seperti member maupun admin.
Tapi berhubung, form login adalah halaman awal maka kita akan belajar sedikit cara untuk mempercantik tampilannya. Oke langsung aja ya kita mulai.

1. Pertama, kita buat dulu filenya. Disini kita coba buat file html dengan nama login.html.

2. Dalam login.html. Ketikkan kode seperti di bawah ini.

<!DOCTYPE html>
<html>
<head>
	<title>LOGIN FORM</title>
</head>
<body>

	<form class="login">
		<h3>LOGIN DULU</h3>
			
		<p>
			Username : <br>
			<input type="text" name="username">
		</p>

		<p>
			Password : <br>
			<input type="password" name="password">
		</p>

		<p>
			<input type="SUBMIT" value="LOGIN">
		</p>
	</form>
</body>
</html>

3. Maka tampilan normalnya saat di browser akan menjadi seperti ini.

4. Kemudian buat file cssnya, disini kita coba dengan nama login.css. Kemudian ketikkan kode sebagai berikut.

body
{
	background-color: black;
}

.login
{
	background-color: white;
	width: 350px;
	padding: 20px;
	margin: auto;
	margin-top: 100px;
	border: 2px solid black;
	font-size: 18px;
}

h3
{
	background-color: orange;
	text-align: center;
	color: white;
	padding: 10px;
	border-radius: 7px;
}

input
{
	width: 100%;
	padding: 12px 10px;
	box-sizing: border-box;
	font-size: 18px;
}

input[type=submit]
{
	background-color: crimson;
	border-radius:18px;
	color: white;
}

5. Kemudian lanjutkan dengan panggil file cssnya di tagpada file login.html. Kodenya seperti di bawah ini.

<link rel="stylesheet" type="text/css" href="login.css">

6. Dan seperti inilah hasilnya saat di browser.

Dan Alhamdulillah begitulah cara menghiasi form login. Sisanya seperti ukuran, style, sampai pewarnaan silahkan teman-teman coba sesuai kreativitas masing-masing ya.
Akhir kata, semoga artikel ini bermanfaat. Amin.
Wassalamualaikum Wr. Wb.

Created By : Danny Julian Pratama

Related posts:

  1. Mempercantik Tampilan Form Login dengan CSS
bagaimana mempercantik tampilan form logincara mempercantik tampilan form logincode mempercantik tampilan form loginmempercantik tampilan form loginmemperindah tampilan form loginscript mempercantik tampilan form login

Post navigation

Previous Post:Memasukkan video youtube dalam html
Next Post:Membuat Menu Navigasi Vertikal Sederhana
Kursus Online Web Design Android

Categories

  • Artikel (146)
  • Belajar Android (39)
  • Belajar Google Adwords (7)
  • Belajar Java (3)
  • Belajar Photoshop (10)
  • Belajar Python (39)
  • Belajar React JS (31)
  • Belajar React Native (6)
  • Belajar SEO (19)
  • Belajar Toko Online (15)
  • Belajar Web Design (373)
  • Belajar Web Programming (328)
  • Belajar Wordpress (58)
  • Info Jadwal Kursus (1,378)

Recent Posts

  • User Input Pada Python
  • Try dan Except Pada Python
  • Python PIP
  • Belajar Python : Membuat Fungsi Terbilang dan Export ke Word
  • Python RegEx

Tag

android aplikasi android Belajar Android belajar css Belajar PHP belajar php oop belajar web desain belajar web design belajar web programming belajar website belajar wordpress blog website css css3 CSS Bootstrap Framework desain website framework framework php google Google SEO HTML html5 html 5 html css jadwal kursus javascript jquery kursus android kursus php Kursus PHP Jakarta Kursus PHP MySql Jakarta Kursus SEO kursus toko online kursus web design kursus website kursus website Jakarta Microsoft MySQL php php framework php programming Tempat Kursus Android Favorit di Jakarta Barat dan Jakarta Timur web desain web design wordpress
WordPress Theme: Gridbox by ThemeZee.