How do I use the element with styles?

Question

I just ran into a quirky problem and haven't been able to find an answer or figure it out.

The problem is regarding the <legend> tag within a <form>.

I've created a form using <form> and when I use <fieldset> with <legend> nested inside, the page renders normally, just fine!

When I use <form> without <fieldset> but continue to use <legend>, the page breaks.

Specifically, the <legend> text does not conform to the style I applied to <body> under <style>. Instead of centering the text, it's on the left. (see code..)

This is probably something really stupid on my part but yeah, I'm stumped. The only thing I can think of is that <legend> cannot be used on its own (without an element like <fieldset>).

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title>Misha's Homepage</title>
        <style>
            body {
                background-color:black;
                text-align:center;
                color:white
            }
        </style>
    </head>
    <body>
        <h1>Welcome!</h1>
        <hr>
        <p title="Carpe Diem">If you are reading this, well, we've only just begun.</p>
        <h2>Stay Hungry...</h2>
        <h3>Stay Foolish!</h3>
 <a href="https://youtu.be/2fAP-5NVZAA">Velocidas Eradico</a>
        <h1>Squad Up!</h1>
        <img src="ak_cartoon_whiteONclear2.jpg" alt="Get Sum." style="width:302px;height:217px">
        <form>
            <legend>Gimme Yo Digitz!</legend>
            <br>First Name:
            <br>
            <input type="text" name="firstname">
            <br>Last Name:
            <br>
            <input type="text" name="lastname">
            <br>
            <br>Choose:
            <br>
            <input type="radio" name="state" value="bored">Bored
            <br>
            <input type="radio" name="state" value="sleepy">Sleepy
            <br>
            <input type="radio" name="state" value="horny">Horny
            <br>
            <br>
            <input type="submit" value="Hit it!">
        </form>
    </body>

</html>

A `legend` **requires** a `fieldset` AFAIK - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend — Paulie_D, Apr 28 '15 at 22:51
@Paulie_D Well, to be valid, maybe. But not to show up: http://jsfiddle.net/mhxohq11/ — TylerH, Apr 28 '15 at 22:59
For some more info from someone who works on web browsers, see [this answer](http://stackoverflow.com/a/5820013/2756409) from a related question. — TylerH, Apr 28 '15 at 23:07

Ahmad Alfy · Accepted Answer · 2015-04-28T23:05:39.630

2

legend must be placed within fieldset. It is like table and its related elements, you can't have td or th without tr.

There is a funny fact about the legend element a lot of people don't know is that if you place legend anywhere within a fieldset it will always show on top of the fieldset. Like tfoot inside table, it will always render after tbody even if you placed it on top in the HTML.

Example:

<fieldset>
    <span>Content</span>
    <legend>Title</legend>
</fieldset>

Even though the <legend> element above is written after the <span> element, it still renders at the top of the <fieldset> element.

edited Apr 28 '15 at 23:05

answered Apr 28 '15 at 22:53

Ahmad Alfy

13,107
6
65
99

I added a code example to help illustrate what your post is saying. Feel free to remove it/rework it if you wish. – TylerH Apr 28 '15 at 23:03
@TylerH this is exactly what I wanted to add, thanks for your contribution! – Ahmad Alfy Apr 28 '15 at 23:04

How do I use the element with styles?

1 Answers1