fungsi dari tag legend di dalam HTML5 dan fieldset

Pada kesempatan kali ini, kita akan membahas tentang tag yang ada pada HTML5, modelnya seperti kita ketika kita menggunakan vbnet, jika teman-teman, pernah menggunakan pasti tidak asing lagi dengan tampilan yang akan kita buat nanti, modelnya atau tampilannya seperti kotak dimana kotak itu ada judulnya ya teman-teman. oke dari pada penasaran teman-teman simak terus ya tentang fungsi dari tag legend di dalam HTML5, jangan kemana-mana.

Oke seperti yang saya tulis di atas, fungsi dari tag legend di dalam HTML5, tampilannya seperti vbnet ya, oke fieldset, bagaimana apakah teman-teman sudah bisa membayangkan, pasti sudah ya, oke dari pada berlama-lama langsung saja teman-teman lihat CSS dan HTMLnya:

.container{
			width: 800px;
			margin: auto;
			background: magenta;
			padding: 10px;
		}
		body{
			background: cyan;
		}
		.label{
			margin-right: 70px;	
		}
		.label2{
			margin-right: 27px;	
		}
		input{
			width: 645px;
		}
		h1{
			text-align: center;
		}

Ini CSSnya ya, sekarang kita lihat HTMLnya:

<div class="container">
		<h1>Fungsi dari tag legend di dalam HTML5</h1>
		<form>
		 <fieldset>
			  <legend>Personalia:</legend>
			  <span class="label">Name</span>: <input type="text"><br>
			  <span class="label">Email</span>: <input type="text"><br>
			  <span class="label2">Date of birth</span>: <input type="text">
		 </fieldset>
		</form>
	</div>

Paham ya teman-teman, teman-teman coba fokus ke tag legend ya, yang penting itu ada di tag legendnya, dan tag fieldsetnya jadi tag fieldset itu adalah untuk membuat garisnya ya,paham ya, oke sekarang kita lihat struktur lengkapnya.

<!DOCTYPE html>
<html>
<head>
	<title>Fungsi dari tag legend di dalam HTML5</title>
	<-e-style type="text/css">
		.container{
			width: 800px;
			margin: auto;
			background: magenta;
			padding: 10px;
		}
		body{
			background: cyan;
		}
		.label{
			margin-right: 70px;	
		}
		.label2{
			margin-right: 27px;	
		}
		input{
			width: 645px;
		}
		h1{
			text-align: center;
		}
	</style>
</head>
<body>
	<div class="container">
		<h1>Fungsi dari tag legend di dalam HTML5</h1>
		<form>
		 <fieldset>
			  <legend>Personalia:</legend>
			  <span class="label">Name</span>: <input type="text"><br>
			  <span class="label">Email</span>: <input type="text"><br>
			  <span class="label2">Date of birth</span>: <input type="text">
		 </fieldset>
		</form>
	</div>
</body>
</html>

silahkan teman-teman copy dan coba teman-teman bereksperimen, di rubah-rubah coba ya, oke bagaimana hasilnya seperti ini:

bisa dilihat ya, oke saya rasa cukup sampai disini belajar kita tentang fungsi dari tag legend di dalam HTML5, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya, terimakasih.

Fungsi dari tag legend di dalam HTML5

Kategori