HTML 강좌 13강 - HTML 태그 익히기#12 - form

HTML 강좌 13강 - HTML 태그 익히기#12 - form

이번에는 form 태그에 대해 알아보겠습니다.

입력양식 form 태그는 다음과 같은 경우에 사용합니다.

- 회원가입 양식

- 이벤트참여 양식

- 설문조사 양식

- 게시판 게시글 작성 양식

등등.. form 태그는 정말 많이 사용합니다.

나중에 개발자나 퍼블리셔 쪽으로 직업을 선택하게 된다면, 정말 많이 접하게 될 태그입니다.

우리는 회원가입 양식으로 테스트를 해보겠습니다.

그런데 한가지 알아야 할것은 html에서는 단지 양식의 값을 전달하는 기능만 합니다.

값을 받아서 서버로 전송을하여 DB에 저장을 하기 위해서는 php 혹은 jsp 같은 프로그래밍이 필요합니다.

이후에 공부하게 될 강좌에서 자세히 알아보기로 하고 일단 회원가입 form을 하나 만들어 보겠습니다.

form 태그는 시작태그와 종료태그가 있습니다.

<form>

</form>

시작태그와 종료태그 사이에 입력할 양식들이 들어갑니다.

그리고 form 시작태그에는 몇가지 속성이 있습니다.

(1)method : 서버와의 통신 방법이라고 볼 수 있습니다. 

post, get 두가지가 있는데, get 방식은 입력값이 주소를 통해 전달이 되고, post 방식은 입력값이 따로 보이지 않습니다.

보안상의 문제로 당연히 post 방식을 주로 사용합니다.

(2)action : form 태그의 입력값을 어떤 페이지로 전달하는지 설정하는 속성입니다.

위 두가지 속성을 알고 있다면 회원가입 양식을 만들 수 있습니다.

이제 회원가입으로 받고 싶은 항목들을 설정하겠습니다.

(1)이름

(2)이메일주소

(3)성별

(4)국가

(5)나이

(6)관심사

이렇게 6가지 항목으로 테스트를 해보죠~

위 그림을 보면 입력양식마다 name 속성이 추가되어 있는것을 볼 수 있습니다.

php나 jsp 프로그래밍을 할 경우 name 값을 통해 사용자가 입력한 값을 변수에 담을 수 있습니다.

그러니 name 속성은 중복없이 설정해야 합니다.

단, radio 입력방식은 하나의 체크박스에 같은 이릅값이 들어값니다.

radio 입력방식은 중복체크가 되지 않는 체크박스 입니다.

위와 같이 입력양식이 설정되어 있는것을 볼 수 있습니다.

근데.. 무언가 허전합니다.

입력을 다 해도 입력값을 넘길 수 있는 버튼이 없습니다.

버튼을 추가해 보죠.

<input type="submit" value="완료">

이것은 form 태그에서 입력을 마무리 하고 값을 전송할 때 사용하는 버튼입니다.

반드시 form 시작태그와 종료태그 사이에 있어야 합니다.

이렇게 버튼을 추가했습니다.

웹문서에도 버튼이 추가되었죠~

완료 버튼을 눌러볼까요?

보는바와 같이 설정해 놓은 02.html 페이지로 이동했네요.

하지만 위에서 언급한바 html 문서에선 값을 받을 수가 없습니다.

차후에 있을 php나 jsp 강좌에서 좀 더 알아보도록 하죠.

예제 파일은 첨부파일에서 받을 수 있습니다 :)

13.zip