[form] HTML - <legend> 태그 - fieldset제목/설명 (= legend태그 = 레전드태그) (HTML5수정)

1. <legend> 예제 - fieldset 제목/설명 달기
2. <legend> 정의
3. <legend> 속성
4. <legend> 예제 - float:right 사용 시, fieldset 내부 우측으로 이동
5. <legend> 예제 - CSS 사용해 fieldset, legend 스타일 지정
6. <legend> 기본 CSS

<legend> 예제 - fieldset 제목/설명 달기

 

<form>

    <fieldset>

        <legend>개인정보</legend>

        이름: <input type="text"><br>
        별명: <input type="text"><br>
        메일: <input type="text">
    </fieldset>

</form>

결과보기 

<legend> 정의

 

<fieldset> 태그로 묶은 요소들에 대한 제목이나 설명을 붙일 때 사용.

 

---

 

1.

• HTML5 경우 align 속성 제외. CSS로 대체.
• <legend> 태그의 위치 변경은 position 속성 대신 margin 속성 이용.
• float 속성 사용 시, 제목이 fieldset 상자 안에 배치됨.

 

2.

모든 브라우저 지원.

 

<legend> 속성

<legend> 예제 - float:right 사용 시, fieldset 내부 우측으로 이동

 

<form action="/action_page.php">

 <fieldset>

  <legend style="float:right">개인정보</legend>

  <label for="name">이름:</label>

  <input type="text" id="name" name="name"><br><br>

  <label for="email">이메일:</label>

  <input type="email" id="email" name="email"><br><br>

  <label for="birthday">생년월일:</label>

  <input type="date" id="birthday" name="birthday"><br><br>

  <input type="submit" value="확인">

 </fieldset>

</form>

 

결과보기

<legend> 예제 - CSS 사용해 fieldset, legend 스타일 지정

 

<style>

fieldset {background-color: lightgray;}

legend {background-color: gray; color: white; padding: 5px 10px;}

input {margin: 5px; padding:5px 10px}

</style>

<form action="/action_page.php">

 <fieldset>

  <legend>개인정보</legend>

  <label for="name">이름:</label>

  <input type="text" id="name" name="name"><br><br>

  <label for="email">이메일:</label>

  <input type="email" id="email" name="email"><br><br>

  <label for="birthday">생년월일:</label>

  <input type="date" id="birthday" name="birthday"><br><br>

  <input type="submit" value="확인">

 </fieldset>

</form>

 

결과보기

<legend> 기본 CSS

<style>

legend {

    display: block;

    padding-left: 2px;

    padding-right: 2px;

    border: none;

}

</style>