مشاهده تصویر بزرگتر

صفت خصوصی for در html

صفت خصوصی for در html | صفت for در تگ label | صفت for تگ output

در این مقاله از سایت آموزی جهت استفاده شما کاربران محترم به معرفی و کاربرد خاصیت for می پردازیم. صفت for در سند html مخصوص تگ label و تگ output می باشد. با ما همراه باشید.

معرفی و کاربرد ویژگی خصوصی for در سند HTML

ویژگی خصوصی for ، مخصوص تگ label و تگ output می باشد.

صفت for جهت الحاق یک برچسب به یک تگ درون فرم html به کار می رود.

استفاده از ویژگی خصوصی for درون تگ label

صفت for درون تگ label باید با مقدار صفت id در تگی که با آن مرتبط است برابر باشد تا زمانی که کاربر روی متن تگ label کلیک کرد، تگ مربوط به آن انتخاب شود.

نکته مهم

تگ label می تواند با یک تگ دیگر از طریق ویژگی for مرتبط شود.

صفت خصوصی for در html | صفت for در تگ label | صفت for تگ output

مثال در مورد استفاده از ویژگی خصوصی for درون تگ label

<form action="/action_page.php">
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female"><br>
<label for="other">Other</label>
<input type="radio" name="gender" id="other" value="other"><br><br>
<input type="submit" value="Submit">
</form>

<label for="female">Female</label>

<label for="other">Other</label>

</form>

خزوجی کد در مرورگر اینترنتی

در مثال بالا تمامی تگ های label که مقدار id آنها با مقدار for در تگ های input برابر است، با کلیک روی label ها ، دکمه های رادیویی به حالت انتخاب در می آید.

استفاده از ویژگی خصوصی for درون تگ output

هنگامی که خاصیت for درون تگ output مورد استفاده قرار گیرد، این صفت رابطه بین نتیجه محاسبات و تگ های html مورد استفاده در محاسبه را مشخص می کند.

نکته مهم

مقدار ویژگی خصوصی for در تگ output بایستی با مقادیر تگ های html که درون محاسبه می خواهند با نتیجه محاسبه درون تگ output مرتبط شوند، برابر باشد.

مثال در مورد استفاده از ویژگی خصوصی for درون تگ output

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0

<input type="range" id="a" value="50">100

+<input type="number" id="b" value="50">

=<output name="x" for="a b"></output>

</form>

خزوجی کد در مرورگر اینترنتی

در مثال بالا نیز بین تگ output که مقدار خاصیت for در آن با مقادیر id در تگ های input درون محاسبه برابر است، با نتیجه محاسبه ، ارتباط برقرار است.