HTML legend

Created By: chatGPT

In HTML, a <legend> element is used within a <fieldset> to provide a title or description for that fieldset. This helps in grouping related elements within forms, improving usability and accessibility. The <legend> is usually displayed at the top of the fieldset.
<fieldset>
    <legend>User Information</legend>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
</fieldset>
It's good practice to include a <legend> in your forms when using fieldsets. It gives context to the fields inside, which is particularly beneficial for users utilizing assistive technologies. Here’s a simple example that shows how to create a fieldset with a legend.
<form>
    <fieldset>
        <legend>Contact Details</legend>
        <label for="phone">Phone:</label>
        <input type="tel" id="phone" name="phone">
        <label for="address">Address:</label>
        <input type="text" id="address" name="address">
    </fieldset>
    <button type="submit">Submit</button>
</form>
Introduction And SetupHeadTitleMetaLinkStyleScriptBodyHeaderNavSectionArticleAsideFooterH1H2H3H4H5H6PBlockquoteOlUlLiAImgTableTrTdThCaptionFormInputTextareaButtonSelectOptionLabelFieldsetLegendCanvasSvgVideoAudioEmbedObjectIframeDivSpanStrongEmSmallSubSupMarkCiteDfnAbbrTimeDataVarCodeKbdSampQCiteRubyRbRtRtcRpBdiBdoWbrDatalistOutputProgressMeterDetailsSummaryTemplatePictureSourceTrackMeta CharsetMeta NameMeta ContentMeta ViewportMeta Http EquivLink RelLink HrefScript SrcScript AsyncStyle TypeBody OnloadIdClassStyleSrcHrefAltTitleValueNameTypePlaceholderDisabledReadonlyCheckedActionMethodForMaxlengthMinlengthAutocompleteTargetRelData *WidthHeightLangTabindexAria *DraggableHiddenAutofocusRequiredDownload