[HTML] 폼 삽입하기

인터넷에서 볼 수 있는 폼(form)

 

인터넷에서 자주 볼 수 있는 폼 형식 입니다.

 

아이디와 비밀번호를 입력하거나 회원가입을 할 때 개인정보를 입력하는 요소들을 모두 폼이라고 할 수 있습니다.

 

폼을 만드는 <form> 태그

 

폼을 만드는 가장 기본적인 태그로 기본형과 같이 <form> </form> 태그 사이에 여러가지 폼 요소를 넣습니다.

기본형
<form [속성="속성값"]> 여러 폼 요소 </form>

 

폼 요소를 그룹으로 묶는 <fieldset>, <legend> 태그

 

하나의 폼 안에서 여러 구역을 나눌 때 <fieldset> 태그를 사용합니다.

예를 들어 쇼핑몰 사이트에서 주문서를 작성할 때 개인 정보와 배송 정보를 나누어 표시하면 사용자가 입력하기도 편리하고 화면도 깔끔하게 표시할 수 있습니다.

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

 

<legend> 태그는 <fieldset> 태그로 묶은 그룹에 제목을 붙일 수 있습니다.

 

기본형
<fieldset>
  <legend> 그룹 이름 </legend>
</fieldset>

<h3>주녘 쇼핑몰 주문서</h3>

    <form action="">

      <fieldset>

        <legend>상품선택</legend>

      </fieldset>

      <fieldset>

        <legend>배송 정보</legend>

      </fieldset>

    </form>

폼 요소에 레이블을 붙이는 <lable> 태그

lable 태그는 input 태그와 같은 폼 요소에 레이블을 붙일 때 사용합니다.

lable 태그를 사용하면 폼 요소와 레이블 텍스트가 서로 연결되었다는 것을 웹브라우저가 알 수 있습니다.

 

기본형
<lable> 레이블 명 <input> </label>

  <h3>주녘 쇼핑몰 주문서</h3>

    <form action="">

      <fieldset>

        <legend>개인정보</legend>

        <label for="user_name">이름 <input type="text" id="user_name"></label><br>

        <label for="user_address">연락처 <input type="text" id="user_address"></label>

      </fieldset>

      <fieldset>

        <legend>배송 정보</legend>

        <label for="address">이름 <input type="text" id="address"></label><br>

        <label for="message">배송 메시지 <input type="text" id="message"></label>

      </fieldset>

    </form>