프론트엔드 센트럴파크 (☞ﾟヮﾟ)☞

<fieldset>, <legend> 본문

HTML

<fieldset>, <legend>

자라나라나무나무나 2022. 6. 1. 20:38
HTML <legend> 요소는 부모 <fieldset>콘텐츠의 설명을 나타냅니다.
<legend>태그는 무조건 부모요소가 <fileldset>이여하 한다는 뜻
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="printpage.css" />
</head>
<body>
    <h2>Form</h2>

    <form action="https://binggle-binggle.tistory.com/" method="GET">
        <fieldset>
            <legend>하아아암 잠온다</legend>
            <div>
                <label for="foodNameBox">음식 이름 :</label>
                <input type="text" name="foodName" id="foodNameBox">
            </div>
            <div>
                <label for="colorBox">색깔 :</label>
                <input type="text" name="colorName" id="colorBox">
            </div>
        </fieldset>
        <button type="submit">제출</button>

    </form>

</body>

</html>

<fieldset>의 장점

<disabled>이라는 태그를 이용하여 특정  input 이나 fieldset에 비활성화를 할 수 있다.

 

참고

https://developer.mozilla.org/ko/docs/Web/HTML/Element/fieldset

저작자표시 비영리 변경금지 (새창열림)

'HTML' 카테고리의 다른 글

<input> - range  (0) 2022.06.01
<input> - minlength, maxlength  (0) 2022.06.01
<label> 과 <input>  (0) 2022.06.01
<form> - action, method  (0) 2022.06.01
video  (0) 2022.05.29
'HTML' Related Articles more
Comments