fieldset、legend tag

Posted on Edited on In Views: Disqus:

 

fieldset、legend tag 算是單純，只是樣式的呈現而已。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
</head>
<body>
    <input type="radio" id="id-1" name="group" value="1" checked>
    <label for="id-1">1</label>
    <input type="radio" id="id-2" name="group" value="2">
    <label for="id-2">2</label>
    <input type="radio" id="id-3" name="group" value="3">
    <label for="id-3">3</label>

    <form>
        <fieldset>
            <legend>Select a maintenance drone</legend>
            <input type="radio" id="huey" name="drone" checked />
            <label for="huey">Huey</label>
            <input type="radio" id="dewey" name="drone" />
            <label for="dewey">Dewey</label>
            <input type="radio" id="louie" name="drone" />
            <label for="louie">Louie</label>
        </fieldset>
    </form>

</body>
</html>

 

fieldset tag 預設的樣式為

 

legend 預設的樣式為

 

參考資料：

HTML <legend> Tag

HTML <fieldset> Tag