آموزش تگ fieldset در HTML

آموزش تگ fieldset در HTML

تگ <fieldset> در HTML برای گروه‌بندی عناصر فرم استفاده می‌شود. این تگ معمولاً با تگ <legend> همراه است که عنوان گروه را تعیین می‌کند. با استفاده از <fieldset> و <legend> می‌توانید یک گروه از عناصر فرم را به عنوان یک واحد منطقی در نظر بگیرید. در ادامه، یک مقاله کامل در مورد تگ <fieldset> به همراه توضیحات و مثال‌هایی ارائه شده است.

ساختار کلی

<fieldset>
    <legend>عنوان گروه</legend>
    <!-- عناصر فرم -->
</fieldset>

توضیحات:

  • <fieldset>: ایجاد یک گروه از عناصر فرم.
  • <legend>: تعیین عنوان گروه.

Attribute ها:

تگ <fieldset> از هیچ attribute اختیاری خاصی استفاده نمی‌کند.

مثال:

<form>
    <fieldset>
        <legend>اطلاعات شخصی</legend>
        <label for="name">نام:</label>
        <input type="text" id="name" name="name"><br><br>
        <label for="email">ایمیل:</label>
        <input type="email" id="email" name="email"><br><br>
    </fieldset>
</form>

توضیحات:

در این مثال، یک فرم ساده با استفاده از تگ <fieldset> ساخته شده است. عنوان گروه با استفاده از تگ <legend> به عنوان “اطلاعات شخصی” تعیین شده است. داخل <fieldset>، دو عنصر <label> و <input> برای ورود اطلاعات نام و ایمیل وجود دارد.

استفاده از تگ <fieldset> در HTML امکان گروه‌بندی عناصر فرم را فراهم می‌کند و کاربران را به راحتی می‌توانند یک گروه از عناصر فرم را با هم مشخص کنند. این به بهبود سازماندهی و قابلیت خوانایی فرم‌های وب کمک می‌کند.

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - تاریخ‌ها (Dates)

JavaScript – تاریخ‌ها (Dates)

آبجکت‌های تاریخ (Date) در جاوااسکریپت آبجکت‌های تاریخ در جاوااسکریپت به ما امکان کار با تاریخ و زمان را می‌دهند....

بیشتر بخوانید
JavaScript - آرایه‌های ثابت (Array Const)

JavaScript – آرایه‌های ثابت (Array Const)

جاوااسکریپت: تعریف آرایه با const در سال 2015، جاوااسکریپت کلمه کلیدی مهمی به نام const را معرفی کرد. این...

بیشتر بخوانید
JavaScript - تکرار آرایه‌ها (Array Iteration)

JavaScript – تکرار آرایه‌ها (Array Iteration)

جاوا اسکریپت: تکرار بر روی آرایه‌ها جاوا اسکریپت روش‌های مختلفی برای تکرار (Iteration) بر روی آرایه‌ها ارائه می‌دهد که...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.