[form] HTML - <fieldset> 태그 ★ - 폼양식 관련요소묶음 (= fieldset태그 = 필드셋태그) (HTML5수정)

1. <fieldset> 예제 - 폼양식 관련 요소 묶기
2. <fieldset> 정의
3. <fieldset> 속성
4. <filedset> 기본 CSS
5. <fieldset> 예제 - 모바일모드에서 가로 스크롤 자동 생성

<fieldset> 예제 - 폼양식 관련 요소 묶기

 

<form>

    <fieldset>

        <legend>개인정보</legend>

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

</form>

결과보기 

<fieldset> 정의

 

form 태그 안에서 관련요소들 묶을 때 사용하며, 요소들을 감싸는 박스 생성.

 

---

 

1.

• <legend> 태그 - <filedset> 태그로 묶은 요소들에 제목 지정.
• 모바일모드에서 가로 스크롤 자동 생성 위해선, overflow-x: auto; white-space: nowrap; 속성 외에 min-width 속성도 반드시 추가해줘야 함.
• HTML5에서는 HTML4.01에선 없던 여러가지 속성 새로 추가.

 
2.

모든 브라우저 지원.

 

<fieldset> 속성

<filedset> 기본 CSS

<style>

fieldset { 

    display: block;

    margin-left: 2px;

    margin-right: 2px;

    padding-top: 0.35em;

    padding-bottom: 0.625em;

    padding-left: 0.75em;

    padding-right: 0.75em;

    border: 2px groove (internal value);

}

</style>

<fieldset> 예제 - 모바일모드에서 가로 스크롤 자동 생성

[주의] min-width:0 속성도 반드시 추가해줘야 스크롤 생성됨.

 

<style>

fieldset {

      border: 1px solid gray;

      min-width: 0;

      max-width: 100%;

      overflow-x: auto;

      white-space: nowrap;

}

table {

      width: 100%;

      border-collapse: collapse;

      display: block;

      overflow-x: auto;

}

th, td {

      padding: 8px;

      border: 1px solid #ddd;

      text-align: left;

}    

 </style>

  <fieldset>

    <legend>사이트 소개</legend>

    <table>

      <thead>

        <tr>

          <th>번호</th>

          <th>사이트</th>

          <th>도메인</th>

          <th>비고</th>

        </tr>

      </thead>

      <tbody>

        <tr>

          <td>1</td>

          <td>홈짱닷컴</td>

          <td>Homzzang.com</td>

          <td>그누보드 코딩 강의</td>

        </tr>

        <tr>

          <td>2</td>

          <td>야메떼닷컴</td>

          <td>Yamette.com</td>

          <td>일본어 무료 강의</td>

        </tr>

      </tbody>

    </table>

  </fieldset>

 

결과보기