폼(form) 구성 요소 및 사용법

<form></form>

폼 요소들은 사용자 입력 양식을 표현하기 위해 사용하며,  보통 회원가입 및 로그인할 때 사용합니다.

<form method="get" action="#"> 

</form>

action

실행 애플리케이션을 지정하는 것이며, 데이터를 처리하는 서버에 데이터를 보내려면 브라우저가 전송 위치를 알아야 하기 때문에 이 속성을 사용합니다. 보통 속성값을 모르더라도 비워둔채 정의해야 문서 검사를 하는 validation에 오류가 나지 않습니다.

 

method

어떤 방법으로 데이터를 전송할 지를 정의하는 것이며, 두가지의 방법이 있습니다.

• get : 기본값이며, 입력된 데이터가 url에 의해 전송되므로 암호화하지 않으면 어떤 데이터를 입력했는지 알 수 있습니다.
• post : 입력된 데이터를 HTTP Body에 담아 전송하며 서버측에서 데이터를 처리하는 방식이며, 주로 민감한 정보 데이터인 사용자의 아이디나 패스워드, 이베을 등을 전송하는 경우에 이용하는 방식입니다. 보안이 높음.

input

사용자가 입력한 데이터를 받을때 입력 영역을 표시하는데 사용합니다. 다양한 type들이 있으며, type에 따라 동작방식이 달라집니다.

• type = "text" : 디폴트 값이며, 텍스트를 받습니다. 
• type = "button" : 값을 사용하는 버튼입니다.
• type = "date" : 연월일 날짜를 지정할 수 있습니다.
• type = "file" : 파일을 지정할 수 있습니다.
• type = "password" : 값이 가려진 텍스트 필드 입니다.
• type ="radio" : 여러개의 선택중에서 하나의 값을 선택하게 하는 라디오 버튼입니다.
• type = "chekbox" : 단일 값을 선택하거나 해제할 수 있는 체크 박스입니다.
• type = "내용을 초기화하는 버튼입니다." 

lable

input 요소는 박스만 있기 때문에, label을 줘야 합니다. 

항목이나 파일을 식별하기 위해 사용되는 제목이나 이름을 말하며, 브라우저가 레이블과 컨트롤 사이의 관계를 알 수 있도록 사용해야 합니다.

<label for="member">
	<span>회원</span>
    <input type="text" name="" id="member">
</label>