Lompat ke konten Lompat ke sidebar Lompat ke footer

Mendefinisikan Judul HTML Menggunakan Tag Legend

Tag legend digunakan untuk mendefinisikan title dari sub konten, dimana Elemen legend merupakan elemen induknya. Tag ini digunakan untuk mendefinisikan caption untuk elemen fieldshet.

2 Contoh Penggunaan Tag Legend untuk Pendefinisian Title HTML
Ilustrasi Tag Legend

Sebelum memahami lebih dalam materi tentang Mendefinisikan Judul HTML Menggunakan Tag Legend, terlebih dahulu pelajari materi tentang: Mengatur Batas Kanan HTML Menggunakan borderRight Style DOM [klik], Mengatur Batas Radius HTML Menggunakan borderRadius Style DOM [klik], dan Mengatur Batas Lebar Kiri HTML Menggunakan borderLeftWidth Style DOM [klik].

Sintak:
<legend> Teks... </legend>

Baca Juga:

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

HTML tag legend

</title>

</head>

 

<body>

<h1>

Blog Elfan

</h1>

 

<strong>

HTML Tag Legend

</strong>

 

<form>

<fieldset>

 

<legend>

STUDENT::

</legend>

 

<label>

Name:

</label>

 

<input type="text">

 

<br>

<br>

 

<label>

Email:

</label>

 

<input type="text">

 

<br>

<br>

 

<label>

Date of birth:

</label>

 

<input type="text">

 

<br>

<br>

 

<label>

Address:

</label>

 

<input type="text">

 

<br>

<br>

 

<label>

Enroll No:

</label>

 

<input type="text">

</fieldset>

</form>

</body>

 

</html>

Output:

Blog Elfan

HTML Tag Legend
STUDENT::





Contoh: tag legend dengan penggunakan properti CSS.

<!DOCTYPE html>

<html>

 

<head>

<style>

form

{

width: 50%;}

 

legend 

{

display: block;

padding-left: 10px;

padding-right: 10px;

border: 3px solid green;

background-color:tomato;

color:white;;}

 

label 

{

display: inline-block;

float: left;

clear: left;

width: 90px;

margin:5px;

text-align: left;}

 

input[type="text"

{

width:250px;

margin:5px 0px;}

 

.mkn 

{

font-size:40px;

color:green;

font-weight:bold;}

</style>

</head>

 

<body>

<div class = "elf">

Blog Elfan

</div>

 

<h2>

HTML Tag Legend

</h2>

 

<form>

<fieldset>

 

<legend>

STUDENT:

</legend>

 

<label>

Name:

</label>

 

<input type="text">

 

<br>

 

<label>

Email:

</label>

 

<input type="text">

 

<br>

 

<label>

Date of birth:

</label>

 

<input type="text">

 

<br>

 

<label>

Address:

</label>

 

<input type="text">

 

<br>

 

<label>

Enroll No:

</label>

 

<input type="text">

 

</fieldset>

</form>

</body>

 

</html>

Output:
Blog Elfan

HTML Tag Legend

STUDENT:




Artikel ini didedikasikan kepada: Izzani Salsabillah, Laelatul Khasanah, Linno Guntur Wibowo, Luthfia Nabila, dan M. Satria Adi Pradana.

5 komentar untuk "Mendefinisikan Judul HTML Menggunakan Tag Legend"

  1. Apa yang dimaksud dengan tag legend pada html?

    BalasHapus
    Balasan
    1. Tag legend digunakan untuk menentukan judul dari child konten. Elemen legend merupakan elemen parent yang digunakan untuk mendefinisikan keterangan pada elemen fieldset pada dokumen html.

      Hapus
  2. Apa fungsi dari tag legend pada html?

    BalasHapus
    Balasan
    1. Tag legend html digunakan untuk memberikan judul atau ketarangan penjelasan untuk sisa konten dari elemen induk. Dengan menggunakan tag tersebut maka user dapat membuat formulir dan elemen lainnya menjadi lebih mudah untuk dipahami oleh para user.

      Hapus
  3. Dengan ini saya jadi lebih bisa memahami fungsi dari tag legend pada html. Terima Kasih,

    BalasHapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -