폼(form) 관련 태그

폼 관련 태그

1. form 태그

 - 폼을 생성함

    ※ 폼(form) : 아이디와 비밀번호 또는 로그인 버튼, 회원가입 창 등 웹 사이트로 정보를 보낼 수 있는 요소들

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

 - form 태그는 여러 속성을 통해 서버로 자료를 넘김

    - method 속성 : 사용자가 입력한 내용을 서버 쪽으로 넘기는 방식을 설정함 (속성 값으로 get과 post가 존재)

        - get : 주소 표시줄에 사용자가 입력한 내용이 그대로 표시됨 (256byte~4096byte 까지의 데이터만 가능)

        - post : 사용자의 입력을 표준 입력으로 전달됨 (데이터 길의 제한을 받지 않고 입력 내용이 표시되지 않음)

    - name 속성 : 폼의 이름을 지정

    - action 속성 : 내용을 처리해 줄 서버 상의 프로그램을 지정

    - target 속성 : 새 창으로 열리게 지정

    - autocomplete 속성 : 자동 완성 기능 (이전에 입력한 내용을 자동으로 표시)

 

2. label 태그, input 태그

 - 폼 요소에 레이블 태그를 삽입함

 - 레이블 태그를 입력하는 방법으로는 두 가지 방법이 있음

    - 방법 1. label 태그 안에 input 태그를 삽입함

<form>
    <label>아이디 <input type="text"></label>
</form>

 

    - 방법2. for 속성과 id 속성을 이용해 서로 연결시킴

<form>
    <label for="user-Id">아이디</label>
    <input type="text" id="user-Id">
</form>

 

4. 폼 요소 그룹으로 묶기

 - 폼 요소를 그룹으로 묶고 싶을 경우, fieldset 태그와 legend 태그를 사용

 - fieldset 태그로 폼 요소를 그룹으로 묶은 뒤, legend 태그로 그룹의 제목을 지정

<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>
</form>