Cara Memberikan Style Pada Tag Fieldset HTML dan CSS

Seperti yang kita ketahui didalam html 5 sudah disediakan sebuah fitur untuk mempercantik atau memperindah tampilan form. Fungsi dari tag fieldset ini untuk mengelompokan beberapa objek form.

Sebelum kita masuk ke pembahasan ini, alangkah baiknya teman-teman terlebih dahulu membaca artikel saya tentang fieldset disini :

• https://www.kursuswebsite.org/cara-penggunaan-tag-fieldset-pada-form-html/

Oke dan disini kita akan mulai membahas tentang Cara Memberikan Style Pada Tag Fieldset HTML dan CSS. pertama-tama teman-teman jalankan/run text-editor yang teman-teman gunakan. Kemudian ketiklah script HTML dibawah ini :

<html>
<head>
	<meta charset="UTF-8">
	<title>Style Tag Fieldset</title>
</head>
<body>
	<fieldset>
		<legend align="center">Form Login</legend>
		<table>
			<tr>
				<td>Username : </td>
				<td><input type="Text"></td>
			</tr>
			<tr>
				<td>Password : </td>
				<td><input type="Password"></td>
			</tr>
			<tr>
				<td></td>
				<td><input type="submit" value="Login"></td>
			</tr>
		</table>
	</fieldset>
</body>
</html>

Jika sudah, langkah selanjutnya teman-teman masukan style CSS seperti dibawah ini :

<style>
		fieldset{
			width: 250px; /* lebar */
			border-color: red; /* warna garis tepi */
			box-shadow: 2px 2px 4px #333; /* bayangan */
		}
</style>

Maka hasil dari kedua code/script diatas akan menjadi seperti dibawah ini :

<html>
<head>
	<meta charset="UTF-8">
	<title>Style Tag Fieldset</title>
	<style>
		fieldset{
			width: 250px; /* lebar */
			border-color: red; /* warna garis tepi */
			box-shadow: 2px 2px 4px #333; /* bayangan */
		}
	</style>
</head>
<body>
	<fieldset>
		<legend align="center">Form Login</legend>
		<table>
			<tr>
				<td>Username : </td>
				<td><input type="Text"></td>
			</tr>
			<tr>
				<td>Password : </td>
				<td><input type="Password"></td>
			</tr>
			<tr>
				<td></td>
				<td><input type="submit" value="Login"></td>
			</tr>
		</table>
	</fieldset>
</body>
</html>

Script diatas menjelaskan bahwa tag fieldset tersebut kita memberikan ukuran lebar yaitu width dan memberikan warna merah pada garis tepi dan juga memberikan efek bayangan. Maka hasilnya akan menjadi seperti pada gambar dibawah ini :

Bagaimana ? mudah kan teman-teman. Jadi seperti itulah contoh sederhana tentang Cara Memberikan Style Pada Tag Fieldset HTML dan CSS. silahkan teman-teman coba memodifikasinya sendiri sesuai keinginan teman-teman.

Oke kalau begitu cukup sekian pembahasn kali ini tentang Cara Memberikan Style Pada Tag Fieldset HTML dan CSS. semoga bermanfaat dan sampai bertemu dipembahasan selanjutnya.

Terimakasih