Belajar CSS: Percantik Fieldset pada Form HTML

Tutorial belajar CSS kali ini akan membahas bagaimana cara membuat tampilan web yang menarik dengan memberi gaya desain pada fieldset yang elegan dan terlihat professional untuk sebuah form html.

Mari kita mulai tutorial belajar css mendesain fieldset untuk halaman website.

Belajar CSS – Styling Fieldset

Pertama, aku membuat script HTML terlebih dahulu untuk mendesain tampilan fieldset. 

Kode HTML:

<fieldset>
	<legend>User Information</legend>
	<label for="name">Name</label>
	<input type="text" name="" id="name" placeholder="input your name" />
	<label for="country">Country</label>
	<input type="text" name="" id="country" placeholder="input your country name" />
</fieldset>

Aku lalu membuat file CSS untuk mulai mendesain tampilan fieldset. Aku memulai dengan fieldset dan legend pada CSS.

Kode CSS:

fieldset {
	border: 1px solid #DDDDDD;
	display: inline-block;
	font-size: 14px;
	font-family: Arial, Helvetica;
	padding: 1em 2em;
}

legend {
	background: #BFD48C;     /* Hijau */
	color: #FFFFFF;          /* Putih */
	margin-bottom: 10px;
	padding: 0.5em 1em;
}

Simpan dan klik file HTML untuk melihat tampilan via browser.

Kemudian aku lanjutkan mendesain input field. Lihat artikel cara mempercantik input field dengan css yang telah aku bahas sebelumnya.

Kode CSS:

fieldset {
	border: 1px solid #DDDDDD;
	display: inline-block;
	font-size: 14px;
	padding: 1em 2em;
}

legend {
	background: #BFD48C;
	color: #FFFFFF;
	margin-bottom: 10px;
	padding: 0.5em 1em;
}


/* DESAIN INPUT FIELD */

label {
	color: #666666;
	display: block;
	font-size: 12px;
}

input[type="text"] {
	border: none;
	border-bottom: 1px solid #DDDDDD;
	font-size: 14px;
	margin-bottom: 15px;
	padding: 0.5em 1em 0.5em 0;
	width: 250px;
}

input[type="text"]:focus {
	border-bottom: 1px solid #BFD48C;     /* Border Green saat focus */
	outline: none;
}

Simpan dan buka kembali file HTML untuk melihat tampilan fieldset di browser.

Semoga bermanfaat dan jangan lupa share ya! 🙂