FORM 관련 태그 정리(HTML)

<form> 태그

- 여러가지 속성을 통해 사용자가 입력한 자료들을 서버로 어떤 방식으로 넘길지 서버에서는 어떤 프로그램을 이용해 처리할지 지정한다.

- method 속성은 사용자가 입력한 내용들을 서버쪽으로 어떻게 넘겨줄지 결정한다. get방식으로 하는 경우가 있고 post 방식으로 하는 경우도 있다. 

- get 방식은 256~ 4096byte 까지의 데이터를 서버로 넘길 수 있다.

- post 방식은 입력 내용의 길이에 제한을 받지 않고 사용자가 입력한 내용이 url에 드러나지 않는다.

- name 속성은 폼의 이름을 지정한다. 하나의 html 파일에 여러개의 form 태그가 존재할 수 있는데 각 태그를 구별할 때 name 속성으로 알 수 있다.

- action 속성은 form 태그안에 내용들을 처리해 줄 서버 프로그램을 지정한다.

- target 속성은 <action> 태그에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정한다.

  > _blank : 서버로부터 받은 응답을 새로운 윈도우나 탭에서 보여준다.

  > _self : 기본값으로 생략 가능하고 서러로부터 받은 응답을 링크가 위치한 현재 프레임에서 보여준다.

  > _parent : 서버로부터 받은 응답을 현재 프레임의 부모 프레임에서 보여준다.

  > _top : 서버로부터 받은 응답을 현재 윈도우 전체에서 보여준다.

- <form>과 </form> 태그 사이에 여러 폼 태그들을 넣어서 내용을 입력하고 서버로 보낼 수 있다. 예를들어 로그인 할때 아이디나 비밀번호를 입력하는 경우도 있고, 개인정보 들을 입력해서 회원가입하는 경우 등등이 있다. 이때 그전에 입력했던 내용들을 기억해서 자동으로 완성해주는 기능이 있다. 아이디의 첫글자만 작성했는데 밑에 selectbox로 그전에 입력했던 아이디가 떠서 클릭하면 자동 완성을 해준다. 이렇게 자동으로 완성시켜주는 기능은 form태그의 autocomplete 속성으로 설정한다. 기본값은 "on"으로 따로 설정을 하지 않으면 자동완성 기능이 적용된다. 하지만 주민번호와 같은 중요한 정보들도 자동완성 기능이 되면 안된다. 이럴때는 "off"로 자동완성 기능을 끌 수 있다. 

<form action="서버경로" method="post" name="formTag1" target="_blank" autocomplete="on">
	<input type="text" title"검색">
    <input type="submit" value="검색">
</form>
<form action="서버경로" method="get" name="formTag2" target="_self" autocomplete="off">
	<input type="text" title"검색">
    <input type="submit" value="검색">
</form>

 

<label>태그

- <label>태그는 입력 창 옆에 '아이디'나 '비밀번호' 처럼 붙여 놓은 텍스트를 만들기 위해 사용한다. 이렇게 입력창 옆에 텍스트를 붙여 넣는 방법이 두가지 있다.

- 첫번째로는 <label></label>태그 안에 텍스트와 입력창을 전부 넣는 방법이다.

<label>아이디 <input type="text" title="아이디"></label>
<label>비밀번호 <input type="text" title="비밀번호"></label>

아이디 비밀번호

- 두번째 방법으로는 <label>태그안에 전부 넣지 않고 텍스트만 감싸고 id를 통해서 연결하는 방법이다. 연결할때 label태그의 for 속성에 input 태그의 id를 넣어준다.

<label for="idInput">아이디</label> <input type="text" title="아이디" id="idInput">
<label for="pwdInput">비밀번호</label> <input type="text" title="비밀번호" id="pwdInput">

아이디 비밀번호

- 우리가 스마트폰과 같은 작은 화면에서 체크박스를 클릭해 선택을 하는 경우가 있다. 화면이 작아서 작은 체크박스를 누르는게 불편할 수 있다. 이때 텍스트와 체크박스를 label 태그로 연결해두면 텍스트를 클릭해도 라디오버튼이 체크되도록 할 수 있다. 그럼 작은 화면에서 선택하기 편리하다. 

<form>
	<h2>label을 이용해 체크박스에 텍스트 연결</h2>
    <ul>
    	<label><input type="checkbox">선택1</label>
        <label><input type="checkbox">선택2</label>
        <label><input type="checkbox">선택3</label>
    </ul>
    
    <h2>체크박스에 텍스트 연결 안함</h2>
    <ul>
    	<li><input type="checkbox">선택1</li>
        <li><input type="checkbox">선택2</li>
        <li><input type="checkbox">선택3</li>
    </ul>
</form>

label을 이용해 체크박스에 텍스트 연결

선택1 선택2 선택3

체크박스에 텍스트 연결 안함

• 선택1
• 선택2
• 선택3

 

 

<fieldset>, <legend> 태그

- <form> 태그 내에서 여러 정보들을 입력할때 정보들을 나눠서 외곽선으로 묶어주면 보기 깔끔해진다. 이때 사용하는데 fieldset과 legend 태그이다. 

- fieldset 태그 안에 묶을 정보들을 넣고 묶은 정보들의 제목을 legend 태그로 나타내면 된다.

<form>
	<fieldset>
    	<legend>개인정보</legend>
        <ul>
        	<li>
            	<label for="name">이름</label>
                <input type="text" id="name">
            </li>
            <li>
            	<label for="tel">전화번호</label>
                <input type="text" id="tel">
            </li>
        </ul>
    </fieldset>
    <fieldset>
    	<legend>로그인 정보</legend>
        <ul>
        	<li>
            	<label for="id">아이디</label>
                <input type="text" id="id">
            </li>
            <li>
            	<label for="pwd">비밀번호</label>
                <input type="text" id="pwd">
            </li>
        </ul>
    </fieldset>
</form>

개인정보

• 이름
• 전화번호

로그인 정보

• 아이디
• 비밀번호