FORM태그는 ASP나 PHP, JSP등 웹 프로그래밍을 할때 데이터를 입력받고 서버측으로 전송하는데 필요한 데이터를 넘기는 역할을 합니다.
action은 form태그에서 데이터를 받아 전달할 곳을 정해줍니다.
method는 action으로 데이터를 전달할때 전달하는 방식을 정해줍니다.
ex)
<FORM name=form action=abc.php method=post> 또는
<FORM action="abc.php" method="get">
get or post는 데이터의 전송방식을 지정하는 태그입니다.
- get 방식으로 한다면 전달하려는 곳의 URL 뒤에 '?' 기호와 함께 추가되어 전달되지요.
form태그 없이 직접 입력해서 전달할수 있는 장점이 있지만, 외부에 전달하려는 데이터가 공개되기 때문에 보안이 필요하다면 적합하지 않지요.
- post 방식으로 하면 데이터 body 부분에 추가되어 전달 됩니다.전달하려는 데이터가 내부에 있기 때문에 외부에 보이지 않는 장점이 있습니다.
그밖에 form태그에는 enctype, accept-charset, accept등의 속성이 있지요.
input태그는 form태그 안에서 사용되는데, 텍스트박스, 라디오버튼, 체크박스, 파일업로드등을 받을수 있는 화면을 구성해주는 태그입니다.
type은 중요한 속성으로 텍스트박스나 라디오버튼, 체크박스 등의 모양을 정해줍니다.
- text : 텍스트를 입력받을수 있는 필드를 제공합니다.
- password : 텍스트가 * 모양으로 표시되는 필드를 제공합니다.
- radio : 체크할수 있는 라디오 버튼을 제공합니다. (단일 선택)
- checkbox : 체크할수 있는 체크박스버튼을 제공합니다. (다중 선택)
- file : 파일을 선택할수 있는 화면을 제공합니다.
- hidden : 화면에 나타나지는 않지만 전송할 데이터를 미리 정해둘수 있습니다.
- submit : 버튼 모양이며 이 버튼을 누르면 action에 정해진 곳으로 데이터를 전송해줍니다.
- image : submit버튼을 문자 대신 그림으로 사용하고 싶을때 사용합니다.
- button : 버튼 모양이며 데이터를 보내지 않고 자바스크립트 이벤트등을 실행할때 사용합니다.
- reset : 버튼 모양이며 form태그로 데이터를 입력받을것을 초기화 시킵니다.
name을 이용해 각 input 태그의 고유 이름을 정해줄수 있습니다.
value는 input의 초기값을 미리 정해줄수 있습니다.
size로 input의 가로 넓이를 지정할수 있습니다. 입력받을수 있는 양과는 무관합니다.
maxlength로 입력받을수 있는 최대 글자수를 정해주는 겁니다.
checked로 체크박스나 라디오버튼에 초기 선택 값을 정해줍니다.
src를 이용해 type이 image이면 이미지의 경로를 정해줍니다.
disabled는 input에 내용을 입력할수 없게 해줍니다.
tabindex를 이용해 Tab키로 포커스 받는 순서를 정해줍니다.