[HTML] fieldset

 

◽ <fieldset>

<form> 요소에서 연관된 요소들을 하나의 그룹으로 묶을 때 사용한다.

• 하나의 그룹으로 묶은 요소들 주변으로 박스 모양의 선을 그려준다.
• <legend> 요소를 사용하면 <fieldset> 요소의 캡션(caption)을 정의할 수 있다.
• 하나의 그룹으로 묶인 요소들을 속성인 disabled를 사용하여 한꺼번에 disabled 처리할 수 있다.

 

 

📄 예제 1.

<form>
  <fieldset>
    <legend>Choose your favorite monster</legend>

    <input type="radio" id="kraken" name="monster" value="K">
    <label for="kraken">Kraken</label><br>

    <input type="radio" id="sasquatch" name="monster" value="S">
    <label for="sasquatch">Sasquatch</label><br>

    <input type="radio" id="mothman" name="monster" value="M" />
    <label for="mothman">Mothman</label>
  </fieldset>
</form>

 

📄 예제 2.

<form action="/examples/media/action_target.php" method="get">
    <fieldset>
        <legend>학사 관리 로그인</legend>
        이름 : <input type="text" name="st_name"><br>
        학번 : <input type="text" name="st_id"><br>
        학과 : <input type="text" name="department"><br>
        <button type="submit">제출하기</button>
    </fieldset>
</form>

 

 

---

 

 

출처

<fieldset>: The Field Set element - HTML: HyperText Markup Language | MDN

코딩교육 티씨피스쿨