HTML - form / 데이터 수집

 HTML-form 태그

form 태그 : 사용자가 제공하는 데이터를 서버에 저장시키기 위해 사용하는 태그 (사용자의 데이터를 수집한다.)

<div class="login_frm">
	<form method="get" action="http://naver.com">
		<!-- <input type="hidden" name="where" value="nexearch" /> -->
		<span class="int">
			<input type="text" name="userid" id="uid" placeholder="아이디를 입력해주세요">
		</span>
        <span class="int">
            <input type="password" name="userpw" id="upw" placeholder="비밀번호를 입력해주세요">
        </span>
        <button type="submit">로그인</button>
        <div class="between">
            <span>아직도 회원이 아니신가요?</span> <a href="#">회원가입</a> 
        </div>
    </form>
</div>

input 태그를 이용할 때 form 태그를 상위 태그로 사용해 데이터를 서버에서 저장한다.

form태그를 쓸 때는 상위에 다른 엘리먼트로 감싸서 사용하는 것을 권장한다.

form 태그의 필수 속성으로 속성 method 와 속성 action이 있다.

 

속성 action 과 속성 method

action의 속성 값은 “링크” 이다. (button type=”submit” 과 연동해서 작동한다.)

 

method의 속성 값은 get 과 post가 있다. (초기값은 get)

 

 

get 의 특징

쿼리스트링(queryString) 형태로 전달된다.

쿼리스트링 : 입력 데이터를 가장 단순하게 전달하는 방법으로 url 창에 ? 이후에 표현된다.

url에 표시되기 때문에 직접적으로 확인이 가능하다.

 

ex) naver.com?userid=aaa&userpw=1234

 

? 뒤부터 변수(파라미터)1=값1&변수2=값2&변수3=값3 … 형태로 표현된다.

? : 쿼리 스트링 시작을 뜻하고, & 는 변수를 구분해주는 구분자로 사용된다.

 

post 의 특징

똑같이 쿼리스트링으로 전달을 하며, url에 직접적으로 보이지 않는다.

보이지 않는다고 볼 수 없다는 것은 아니고, 숨겨져 있기 때문에 찾아서 확인할 순 있다.

 

input 태그의 속성

 

type : text, password ... 텍스트 입력창, 체크박스 등을 만들어 준다.( hidden 도 있지만 아직 안 배움.)

 

name : 쿼리스트링의 변수의 이름을 지정한다. 데이터의 변수 이름이 되기 때문에 헷갈리지 않게 잘 구분해서 적는다.
input 박스에 값(텍스트 입력 값)은 쿼리스트링의 변수 값에 해당한다. 

 

id : input 태그의 이름을 지정한다.

 

placeholder : 텍스트 입력창에 기본적으로 보이는 문구를 작성할 수 있게 해 준다. 포커스가 되면 텍스트는 지워진다.

 

 

 

button 태그의 속성

 

 

type=”submit”

submit 스스로는 의미가 없지만 form 태그 안에서 사용해야 기능이 생긴다.

form 태그 안에 button의 타입을 submit으로 지정 후,

button을 클릭하면 form의 속성이었던 action의 속성 값으로 지정한 링크로 이동하게 된다.