افسانه (legend)
تگ «افسانه (legend)» عنوان گروه فرم است. «گروه فرم (fieldset)» یعنی قاب دور چند ورودی مرتبط. با legend، عنوان بالای این قاب می آید و فهم بخش ساده می شود.
تعریف عنوان گروه فرم
طبق منبع، <legend> عنوان برای عنصر <fieldset> است. یعنی یک تیتر کوتاه برای توضیح ورودی های داخل همان گروه.
مثال پایه: fieldset با legend
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" />
<br />
<br />
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" />
<br />
<br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<br />
<br />
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday" />
<br />
<br />
<input type="submit" value="Submit" />
</fieldset>
</form>
جاگذاری عنوان گروه فرم با CSS
می توان جای legend را با CSS عوض کرد. مثلاً به راست ببرید تا تیتر کنار قاب بیاید.
<form action="/action_page.php">
<fieldset>
<legend style="float:right">Personalia:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" />
</fieldset>
</form>
استایل دهی fieldset و legend
می توانید رنگ پس زمینه، فاصله و کادر بدهید تا گروه ها خواناتر شوند.
<style>
fieldset {
background-color: #eeeeee;
}
legend {
background-color: gray;
color: white;
padding: 5px 10px;
}
input {
margin: 5px;
}
</style>
مقادیر پیش فرض CSS
مرورگرها برای <legend> نمایش پیش فرض دارند؛ معمولاً بلوکی با کمی پَدینگ.
<style>
legend {
display: block;
padding-left: 2px;
padding-right: 2px;
border: none;
}
</style>
گام های تمرینی سریع
- یک
<fieldset>بساز. - داخلش یک
<legend>با عنوان کوتاه بگذار. - ورودی های مرتبط را داخل همان گروه قرار بده.
نکته: عنوان گروه فرم باید کوتاه و واضح باشد.
لینک های داخلی مرتبط
صفحه fieldset را هم ببین. برای متن ورودی ها از label کمک بگیر. همچنین input را مرور کن.
جمع بندی سریع
- legend عنوان گروه فرم است.
- با fieldset همراه استفاده می شود.
- می توان با CSS جابه جایش کرد.
- عنوان را کوتاه و دقیق بنویس.