[HTML] 폼(입력 양식) 작성하기

폼(form)이란 '특정 항목에 사용자가 뭔가를 입력할 수 있게 만든 것'으로

사용자가 웹 사이트로 정보를 보낼 수 있는 요소는 모두 폼이라고 할 수 있다.

대표적으로 로그인 창, 검색 창이 있다.

 

폼과 관련한 작업은 정보를 저장하거나 검색, 수정하는 것이 대부분인데 모두 데이터베이스를 기반으로 작동한다.
그렇기 때문에 폼에 입력한 사용자 정보는 ASP나 PHP, JSP 등의 서버 프로그래밍을 이용해 처리한다.

 

다음은 로그인 폼을 예로 든 폼이 동작하는 방식이다.

1. 웹 브라우저에서 사용자가 아이디와 비밀번호를 입력하고 [로그인] 버튼을 클릭하면 입력한 정보는 웹 서버로 전송된다.

2. 서버는 자신이 가진 데이터베이스에서 입력받은 아이디와 비밀번호가 일치하는지 확인하고 그 결과를 웹 브라우저에 보낸다.

---

• <form> : 폼을 만드는 가장 기본적인 태그
  몇 가지 속성을 사용해서 입력받은 자료를 어떤 방식으로 서버로 넘길 것인지, 서버에서 어떤 프로그램을 이용해 처리할 것인지를 지정한다.
  
  <form [속성="속성값"]>여러가지 폼 요소</form>
  
  
  • autocomplete : 자동 완성 기능
    사용자가 입력한 내용을 기억했다가 비슷한 글자가 입력되면 이전에 입력했던 내용을 아래에 표시해준다.
    기본 속성값은 'on' 으로, 개인정보나 인증번호와 같은 일회성 정보를 입력해야 할 때는 'off' 로 지정하여 사용하지 않는다.
    
    <form action="" autocomplete="off"> ... </form>
    
    

 

• <fieldset>, <legend> : 폼 요소 묶기
  하나의 폼 안에서 여러구역을 나누어 표시할 때 <fieldset> 태그를 사용한다.
  <legend> 태그를 통해 <fieldset> 태그로 묶은 그룹에 제목을 붙일 수 있다.
  
  <fieldset [속성="속성값"]>
    <legend>그룹 이름<legend>
  </fieldset>
  
  

    <form action="">
      <fieldset>
        <legend>상품 선택</legend>
      </fieldset>
      <fieldset>
        <legend>배송 정보</legend>
      </fieldset>      
    </form>

  

  
  
  
• <label> : 레이블 붙이기
  <label> 태그를 사용하면 폼 요소와 레이블 텍스트가 서로 연결되었다는 것을 웹 브라우저가 알 수 있다.
  <label> 태그는 2가지 방법으로 사용할수 있다.
  
  1. <label> 태그 안에 <input> 태그 넣기
  
     <label>레이블명<input></label>
  
  
  2. <label> 태그와 폼 요소를 다로 쓰고 연결하기
  첫 번째 방법보다 복잡해 보이지만 <label> 태그를 사용한 레이블과 사용자 정보를 입력받는 <input> 태그가 떨어져 있어도 둘 사이를 쉽게 연결활 수 있다는 장점이 있다.
  
     <label for="id명">레이블명<input id="id명"><label>
  
  
  

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

  
  

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