Теги Fieldset и Legend в HTML?

Question

Итак, я работал с формами в HTML, и вот код, который я использовал:

<form>
   <label>Date Of Birth</label>
        <select name="Month">
            <option value="Jan">January</option>
            <option value="Feb">February</option>
            <option value="Mar">March</option>
            <option value="Apr">April</option>
            <option value="May">May</option>
        </select>
        <select name="Day">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
        </select>
        <select name="Year">
            <option value="1992">1992</option>
            <option value="1993">1993</option>
            <option value="1994">1994</option>
            <option value="1995">1995</option>
            <option value="1996">1996</option>
        </select>
   </label>
</form>

Теперь, это неправильно семантически (по крайней мере, это то, что я понимаю).И для группировки тегов выбора мы используем теги Fieldset и legend.Кто-нибудь может объяснить, в чем польза этих двух тегов или как они группируются?Есть ли другое использование двух тегов и / или теги зависят друг от друга?

Answer 1

Как прокомментировали другие, использование тегов fieldset и legend самоочевидно, и вы можете прочитать больше о них здесь и здесь .

Что касается вашего вопроса, Да , вы можете добиться того же поведения и внешнего вида, используя div, label и т. Д .;но это неверно семантически , а также требует больше работы для того, чтобы повторить тот же внешний вид.А тег legend зависит от тега fieldset, так как для его размещения требуется ссылка.

В идеальном случае для него есть тег HTML5, используйте его.вместо простого div это помогает сделать документ более читабельным и поддерживать его в соответствии с большинством современных страниц;

Для справки. Я объяснил немного больше о семантических тегах и по этому вопросу. https://stackoverflow.com/a/53229971/8437694

И эта статья также объясняет преимущества семантических тегов: https://www.lifewire.com/why-use-semantic-html-3468271