(HTML) Form 태그에 사용되는 기본 태그들을 알아보자!

하나의 <form> 태그안에 다양한 태그들에 대해 알아보도록 하자.

우선 폼을 웹문서에 삽입하기 위해서 <form> 태그를 삽입한다.

<form method="" name="" action="">
 ...
</form>

폼이 포함된 웹 문서는 대부분 필드에 대한 설명 옆에 해당 필드가 삽입이 되는데,

예를 들어 아이디라는 텍스트 설명글 옆에 아이디를 입력할 수 있는 텍스트 필드가 있다.

여기서 사용되는 태그가 <label> 태그이다.

<form>
  <label>아이디</label>
</form>

<label>를 사용하여도 사실상 크게 변화는 없지만, 실제로 웹 브라우저 상에서는 폼을 해석하는데 차이가 있다.

<label>를 사용하지 않을 경우 텍스트 필드 부분을 클릭시 내용을 입력할 수 있지만,

<label>태그를 이용할 경우 라벨과 폼 요소를 연결해 주면, 클릭 시 연결된 필드 안에 마우스 커서가 표시된다.

<form>
  <label for="test">테스트</label>
  <input type="text" id="test">
</form>

테스트

<label>안에 존재하는 for 속성을 이용하여 텍스트필드와 연결 시켜서 사용한다.

 

다음으로 여러 태그들을 하나의 그룹화 시키기 위해서 <fieldset>라는 태그를 사용한다.

폼에서 여러 필드를 사용할 경우 <table>태그인 표를 이용하여 구분해서 사용할 경우가 있지만,

<fieldset>태그를 사용하면 원하는 필드끼리 묶어서 그룹화를 표시할 수 있다.

<form>
  <fieldset>
    <label for="test">테스트</label>
    <input type="text" id="test">
    <label for="test2">테스트2</label>
    <input type="text" id="test2">
  </fieldset>
  <fieldset>
    <label for="test3">테스트3</label>
    <input type="text" id="test3">
    <label for="test4">테스트4</label>
    <input type="text" id="test4">
  </fieldset>
</form>

테스트테스트2

테스트3테스트4

이때 <legend> 태그를 함께 사용하게 될 경우 <fieldset>태그로 묶은 그룹에 제목을 붙일 수도 있다.

<form>
  <fieldset>
  	<legend>테스트그룹1</legend>
    <label for="test">테스트</label>
    <input type="text" id="test">
    <label for="test2">테스트2</label>
    <input type="text" id="test2">
  </fieldset>
  <fieldset>
    <legend>테스트그룹2</legend>
    <label for="test3">테스트3</label>
    <input type="text" id="test3">
    <label for="test4">테스트4</label>
    <input type="text" id="test4">
  </fieldset>
</form>

테스트그룹1

테스트 테스트2

테스트그룹2

테스트3 테스트4

마지막으로 <input>태그가 존재하지만 <input>태그 유형은 type 속성을 어떻게 지정하는 것에 따라 다양한 형태로

변경되기 때문에 나중에 시간될 때 추가적으로 작성하겠습니다.