Form Input HTML – Cara Percantik Dengan CSS

Belajar CSS Percantik Form Input

Hampir di setiap halaman website di dunia ini rata-rata menampilkan form input html baik sebagai fitur pencari konten maupun ditampilkan di dalam halaman kontak. Banyak jenis desain form html dengan berbagai warna dan bentuk.

Kali ini aku ingin berbagi cara untuk mempercantik tampilan form input html dengan css. Penjelasan disertai kode html, kode css dan gambar.

Desain Form Input dengan Border Bottom

belajar css percantik form input html

Kode HTML:

<div class="input-field-border-bottom">
	<label for="email">Email Address</label>
	<input type="text" id="email" placeholder="your email address" />
	<label for="message">Message</label>
	<textarea id="message" placeholder="write your message" rows="3"></textarea>
</div>

Kode CSS:

.input-field-border-bottom {
      border: 1px solid #ddd;
      display: inline-block;
      padding: 2em;
 }
 .input-field-border-bottom label {
      color: #9C1179;     /* Warna: Purple */
      display: block;
      font-size: 12px;
      font-weight: bold;
      letter-spacing: 0.05em;
      margin-bottom: 5px;
 }

 .input-field-border-bottom input[type="text"],
 .input-field-border-bottom textarea {
      border: none;
      border-bottom: 1px solid #ddd;
      color: #333;
      font-size: 14px;
      margin-bottom: 15px;
      padding: 0.5em 1em 0.5em 0;
      width: 200px;     /* Ukuran bebas */
 }

 .input-field-border-bottom input[type="text"]:focus,
 .input-field-border-bottom textarea:focus {
      border-bottom: 1px solid #000;
      outline: none;
 }

Desain Input dengan Icon

belajar css percantik form input html

Untuk menampilkan icon, aku lebih memilih menggunakan font icon dibandingkan dengan image. Font icon yang aku gunakan yaitu Font Awesome

Aku memasukin link kedalam file index.html yang telah dibuat untuk meload font icon. Lihat code dibawah ini:

Kode HTML:

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Input Field CSS</title>
     <!-- Masukan baris dibawah ini untuk meload font icon -->
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
     <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>

</body>
</html>

Kemudian aku mulai membuat kode css untuk mendesain tampilan form input dengan icon.

Kode HTML:

<div class="input-field-with-icon">
	<label for="email">Email Address</label>
	<span class="icon icon-envelope">
		<input type="text" id="email" placeholder="Email address" />
	</span>
	<label for="email">Password</label>
	<span class="icon icon-lock">
		<input type="password" id="email" placeholder="Password" />
	</span>
</div>

Kode CSS:

.input-field-with-icon {
	border: 1px solid #ddd;
	display: inline-block;
	padding: 2em;
}

.input-field-with-icon label {
	color: #333;     /* Warna: Purple */
	display: block;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 0.05em;
	margin-bottom: 5px;
}

.input-field-with-icon input[type="text"],
.input-field-with-icon input[type="password"] {
	border: none;
	border-bottom: 1px solid #ddd;
	color: #333;
	font-size: 14px;
	margin-bottom: 15px;
	margin-left: 10px;
	padding: 0.5em 1em 0.5em 0;
}

.input-field-with-icon input[type="text"]:focus,
.input-field-with-icon input[type="password"]:focus {
	border-bottom: 1px solid #3998B3;
	outline: none;
}

.input-field-with-icon .icon {
	color: #3998B3;     /* Warna: Blue */
}

.input-field-with-icon .icon-envelope:before {
	display: inline-block;
	font-family: "FontAwesome";
	content: "\f0e0";
}
.input-field-with-icon .icon-lock:before {
	display: inline-block;
	font-family: "FontAwesome";
	content: "\f023";
}

Demikian tutorial belajar css mempercantik form input field. Belajar CSS jika dengan praktik langsung akan terasa lebih efektif.

Untuk kamu yang ingin belajar html dari nol (pemula), aku menulis materi tentang panduan belajar html lengkap. Penjelasan disertai gambar dan kode html.

Baca materi belajar html disini: Belajar HTML Gampang Banget! – HTML Warrior #1.

Yuk kita belajar html dan css setiap hari. Baca, googling, praktik tiap hari bisa menambah ilmu kita loh. Suatu saat kamu bisa membuat web keren dengan html dan css. Jangan lupa share yah!

Leave a Comment

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Shares
Scroll to Top