폼 관련 태그들 - 폼 만들기 2

폼 관련 태그들 - 폼 만들기 2

<label> 태그 - 폼 요소에 레이블 붙이기

• <label> 태그는 폼 요소에 레이블을 붙이기 위한 것입니다. 레이블이란 입력 창 옆에 '아이디'나 '비밀번호'처럼 붙여 놓은 텍스트를 말합니다.
• <label> 태그를 사용하면 폼 요소와 레이블 텍스트가 서로 연결되어 있다는 것을 브라우저가 알 수 있습니다.
• <label> 태그는 아래 기본형과 같이 두가지 방법으로 사용할 수 있는데 첫 번째 방법은 <label> 태그 안에 폼 요소를 넣는 것입니다.
• 두 번째 방법은 <label> 요소와 폼 요소를 따로 사용하고 <label> 태그에서는 for 속성을 이용하고 폼 요소에서는 id 속성을 이용해 서로 연결하는 것입니다.

기본형 : <label [속성="속성 값"]> 레이블 <input ...> </label> 또는

            <label for="id이름">
                  <input id="id이름" [속성="속성 값"]>
            </label>

label 태그와 input 태그로 만든 로그인 화면

 

<style>
    .exam1 {width: 400px; height: 150px; border: 2px solid pink; padding: 20px 0 0 20px; }
    .exam1 li {list-style: none; margin-bottom: 20px;}
</style>

<div class="exam1">
    <form action="login.php" method="post">
        <ul>
            <li>
                <label for="id">아이디</label>
                <input type="text" id="id">
            </li>
            <li>
                <label for="pw">비밀번호</label>
                <input type="password" id="pw">
            </li>
            <li>
                <input type="submit" title="로그인" value="로그인">
            </li>
        </ul>
    </form>
</div>

라디오 버튼과 체크박스에서 사용하는 <label> 태그

• 스마트폰처럼 화면이 작은 기기에서 라디오 버튼이나 체크박스 부분을 정확히 터치하는 것은 쉽지 않습니다. 이럴 때 <label> 태그를 이용해 라디오 버튼이나 체크박스에 텍스트(label)를 연결해 놓았다면 텍스트만 터치해도 선택되어 사용이 훨씬 쉬워집니다.

<fieldset>, <legend> 태그 - 폼 요소 그룹으로 묶기

• 쇼핑몰 사이트에서 주문서를 작성하는 폼에서 '사용자 정보'와 '배송 정보'를 나누어 표시하면 사용자가 정보를 입력하기에도 편리하고 화면도 깔끔하게 정리할 수 있습니다. 이렇게 하나의 폼 안에서 여러 구역을 나누어 표시하려고 할때 <fieldset>, <legend> 태그를 사용합니다.
• <fieldset> 태그는 <fieldset>과 </fieldset> 태그 사이의 폼들을 하나의 영역으로 묶고 외곽선을 그려주고 <legend> 태그는 <fieldset> 태그로 묶은 그룹에 제목을 붙여줍니다.

기본형 : <fieldset [속성="속성 값"]>...</fieldset>

fieldset 과 legend 로 만든 개인정보와 로그인 정보

 

<style>
    .exam2 {width: 500px; height: 280px; border: 2px solid pink; padding: 30px;}
    .exam2 fieldset {margin-bottom: 20px;}
    .exam2 li {list-style: none; margin-bottom: 10px;}
</style>

<div class="exam2">
    <form>
        <fieldset>
            <legend>개인 정보</legend>
            <ul>
                <li>
                    <label for="name">이름</label>
                    <input type="text" id="name">
                </li>
                <li>
                    <label for="mail">메일 주소</label>
                    <input type="text" id="mail">
                </li>
            </ul>
        </fieldset>
        <fieldset>
            <legend>로그인 정보</legend>
            <ul>
                <li>
                    <label for="id">아이디</label>
                    <input type="text" id="id">
                </li>
                <li>
                    <label for="pw">비밀번호</label>
                    <input type="text" id="pw">
                </li>
            </ul>
        </fieldset>
    </form>
</div>