[HTML5] <form> 태그 2

2020. 7. 6. 16:23 Web Programing/HTML5

<form> 태그 2


1. 폼 요소 그룹으로 묶기

(1) <fieldset>, <legend> 태그


<fieldset>, <legend> 태그는 폼 요소들을 보기 쉽게 그룹으로 묶어주는 태그이다. 예를 들어 쇼핑몰 사이트에서 주문서를 작성하는 폼에서 '사용자 정보'와 배송 정보'를 따로 나우어 표시하면 사용자가 정보를 입력하기에도 편리하고 화면도 깔끔하게 정리할 수 있다.

이렇게 하나의 폼 안에서 여러 구현을 나눠 표시하려고 할 때 <fieldset> 태그를 이용하면 <fieldset> 과 </fielset> 태그 사이의 폼들을 하나의 영역으로 묶고

외곽선을 그려준다.


(2) <fieldset> 태그의 속성

1) disabled: 이 속성을 사용하면 <fieldset> 태그의 자식 요소들을 사용할 수 없게 만든다. 즉, 화면에는 표시되지만, 사용자가 내용을 입력하거나 항목을 선택할 수 없다.

2) form: 현재 <fieldset> 태그가 속해 있는 form의 이름을 표시할 수 있다.

3) name: 이 속성을 이용해 서버로 넘겨줄 이름을 지정할 수 있다.


<fieldset> 태그로 나누어진 구역에 제목을 붙이고 싶다면 <legend> 태그를 사용한다. <legend> 태그는 <fieldset> 태그 다음에 오며, 필수 옵션은 아니므로 생략할 수 있다.

<!doctype html>

<html>

  <head>

  <meta charset="utf-8">

  <title>폼 만들기</title>

     <style>

       ul {

        list-style-type:none;

       }

       fieldset {

        margin : 5px 2px;

        width: 350px;

       }

     </style>

  </head>

  <body>

    <h1> 회원 가입 양식</h1>

<form>    

    <fieldset>

      <legend> 로그인 정보 </legend>

      <ul>

        <li>아이디 : <input type="text" id="user_id"></li>

        <li>비밀번호 : <input type="password" id="pw"></li>

      </ul>

    </fieldset>

    <fieldset>

      <legend> 가입자 정보</legend>

      <ul>

        <li>이름 : <input type="text" id="user_name"></li>

        <li>메일 주소 : <input type="text" id="user_mail"></li>

        <li>생년월일 : <input type="text" id="birth"></li>

      </ul>  

    </fieldset>

    <fieldset>

      <input type="submit" value="가입하기"></input>  

    </fieldset>

</form>

  </body>

</html>

2. 폼 요소 캡션 붙이기


(1) <label> 태그

<label> 태그는 폼 요소에 캡션을 붙이기 위한 것으로, 폼 요소와 캡션으로 사용하는 텍스트가 짝을 이루고 있으므로 폼 요소의 위치가 바뀌더라도 캡션이 항상 따라다니게 된다.

cf.) 기존 input 태그

아이디(6자이상)<input type="text" id="id">


cf.) <label> 태그 사용하면 장점

체크 박스나 라디오 버튼에서 텍스트(영어 회화)를 클릭해도 체크가 된다.


※ <label> 태그를 사용하는 방법

1) <label> 태그 안에 폼 요소를 넣는다.

<label>아이디(6자이상)<input type="text" id="id></label>

폼 요소의 앞뒤에 <label> 태그와 </label> 태그를 붙여도 결과 화면은 달라지지 않지만, 브라우저에서 폼 요소를 인식할 때 '아이디(6자이상)'이라는 캡션과 텍스트 입력 창을 한 묶음으로 인식하게 된다.

<form>

      <fieldset>

       <legend>로그인 정보</legend> 

        <ul>

            <li>

              <label>아이디(6자 이상)<input type="text" id="id"></label>

            </li>

            <li>

              <label>비밀번호<input type="password" id="pw1"></label>

            </li>

         <li>

          <label>비밀번호(확인)<input type="password" id="pw2"></label>

            </li>  

        </ul>

      </fieldset>

      <fieldset>

       <legend>개인 정보</legend>

        <ul>

<li><label>이름 <input type="text" id="name"></label></li>

<li><label>이메일 주소 <input type="email" id="email"></label></li>

<li>...</li>

       </ul>

      </fieldset>

</form>


2) <label> 요소와 폼 요소를 따로 쓰고 for 속성과 id 속성을 이용해 연결한다.

<label [속성="속성 값"] for="이름"> 캡션 </label>

<input ....id="이름">


<form>

      <fieldset>

        <legend>로그인 정보</legend> 

        <ul>

<li><label for="id">아이디(6자 이상)</label>

               <input type="text" id="id"></li>

         <li><label for="pw1">비밀번호</label>

               <input type="password" id="pw1"></li>

         <li><label for="pw2">비밀번호(확인)</label>

               <input type="password" id="pw2"></li>  

        </ul>

      </fieldset>

      <fieldset>

        <legend>개인 정보</legend>

        <ul>

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

     <input type="text" id="name"></li>

<li><label for="email">이메일 주소</label>

     <input type="email" id="email"></li>

<li>...</li>

       </ul>

      </fieldset>

</form>

<label> 태그에서 for 속성을 사용해 어떤 폼 요소에 연결할지를 결정하게 된다. 



출처: https://devbox.tistory.com/entry/HTML5-form-태그-2?category=574553 [장인개발자를 꿈꾸는 :: 기록하는 공간]

'Web Programing > HTML5' 카테고리의 다른 글

[HTML5[ <table> 태그  (0) 2020.07.06
[HTML5] <a> 태그  (0) 2020.07.06
[HTML5] <input> 태그  (0) 2020.07.06
[HTML5] <form> 태그_GET과 POST  (0) 2020.07.06
[HTML5] <form> 태그 1  (0) 2020.07.06
[HTML5] 아이프레임과 프레임  (0) 2020.07.06
[HTML5] <meta> 태그  (0) 2020.07.06
[HTML5] 이스케이핑  (0) 2020.07.06