[HTML] 폼 삽입하기

🔍폼의 동작 과정

1. 사용자가 아이디와 비밀번호를 입력하고 [로그인] 버튼을 클릭
2. 서버는 자신이 가진 데이터베이스에서, 입력받은 아이디와 비밀번호가 일치하는지 확인
3. 그 결과를 웹 브라우저로 보냄

• 폼과 관련한 작업은 정보를 저장하거나 검색, 수정하는 것이 대부분
  • 위 작업은 모두 데이터베이스를 기반으로 작동
  • 텍스트 박스•버튼과 같은 폼 형태 - HTML 태그로 만듦
  • 폼에 입력한 사용자 정보 - ASP•PHP•JSP와 같은 서버 프로그래밍을 이용하여 처리
    
    

✨폼을 만드는 <form> 태그

• 기본 형식

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

• <form> : 입력받은 자료를 어떤 방식으로 서버로 넘길 것인지, 서버에서 어떤 프로그램을 이용해 처리할 것인지를 지정함

  • <form> 태그의 속성

    종류	설명
    method	사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지를 지정 get과 post 속성을 사용할 수 있다.
    name	자바스크립트로 폼을 제어할 때, 사용할 폼의 이름을 지정
    action	<form> 태그 안의 내용을 처리해 줄 서버 프로그램을 지정
    target	action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 함

• 예를 들어,
  폼에 내용을 입력하고 서버로 전송했을 때, 서버에 있는 register.php를 실행한다면 다음과 같이 작성한다.

  <form action="register.php">
    /* 여러 폼 요소 */
  </form>

 💡 자동 완성 기능을 나타내는 autocomplete 속성

• 사용자가 입력한 내용을 기억했다가, 비슷한 글자가 입력되면 이전에 입력한 내용을 힌트로 보여줌
• autocomplete의 기본 속성값: "on"
• 중요한 개인 정보나 인증 번호와 같은 일회성 정보를 입력할 때, 이 기능을 사용하고 싶지 않다면 autocomplete 속성을 off로 지정한다.
• 자동 완성 기능 끄기

  <form action="" autocomplete="off">
   /* 여러 폼 요소 */
  </form>

  
  

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

• <fieldset> : 하나의 폼 안에서 여러 구역을 나누어 표시할 때
  • ex) 쇼핑몰 사이트에서 주문서를 작성할 때 개인 정보와 배송 정보를 나누어 표시하는 것
• <legend> : <fieldset> 태그로 묶은 그룹에 제목을 붙임
  
  

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

• label : 입력란 가까이에 아이디나 비밀번호처럼 붙여 놓은 텍스트

• <input> 태그와 같은 폼 요소에 레이블을 붙일 때 사용

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

• <label> 태그의 두 가지 사용 방법

  1. 태그 안에 폼 요소 넣기

     <label>레이블명<input></label>

     • <label> 태그 안에 <input> 태그 넣기

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

       
       

  2. <label> 태그와 폼 요소를 따로 사용하고, <label> 태그의 for 속성과 폼 요소의 id 속성을 이용해 서로 연결

     <label for="id명">레이블명<input id="id명"></label>

  • 폼 요소의 id 속성값을 <label> 태그의 for 속성에게 알려 주는 방법

  • 첫 번째 방법보다 복잡해 보이지만, <label> 태그를 사용한 레이블과 사용자 정보를 입력받는 <input> 태그가 떨어져 있더라도 둘 사이를 쉽게 연결할 수 있다는 장점이 있음

    • <label> 태그와 폼 요소를 따로 쓰고 연결하기

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

      • for와 id의 "user-id" 의 값을 똑같이 설정해야 연결됨
        
        

• 두 경우 모두에서 결과 :

  아이디(6자 이상)
  

출처: Do it! HTML+CSS+자바스크립트 웹 표준의 정석 (고경희, 이지스퍼블리싱)