Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / html

Mendefinisikan Judul HTML Menggunakan Tag Legend

Dipublikasikan Oleh: elfanmauludi 5 komentar
Tag legend digunakan untuk mendefinisikan title dari sub konten, dimana Elemen legend merupakan elemen induknya. Tag ini digunakan untuk mendefinisikan caption untuk elemen fieldshet.


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, Mengatur Batas Radius HTML Menggunakan borderRadius Style DOM , dan Mengatur Batas Lebar Kiri HTML Menggunakan borderLeftWidth Style DOM.

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.
Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "Mendefinisikan Judul HTML Menggunakan Tag Legend"

  1. AnonimMinggu, 20 Juni 2021 pukul 15.57.00 WIB

    Apa yang dimaksud dengan tag legend pada html?

    BalasHapus
    Balasan
    1. AnonimMinggu, 20 Juni 2021 pukul 15.57.00 WIB

      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. AnonimMinggu, 20 Juni 2021 pukul 15.59.00 WIB

    Apa fungsi dari tag legend pada html?

    BalasHapus
    Balasan
    1. AnonimMinggu, 20 Juni 2021 pukul 15.59.00 WIB

      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. AnonimMinggu, 20 Juni 2021 pukul 16.02.00 WIB

    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 -