상세 컨텐츠

본문 제목

[웹 개발] HTML form 태그 실습

Programming/HTML

by 양명 2018. 11. 27. 20:57

본문

이 장에서는 웹 개발에 필요한 기본 HTML form 태그와 form 태그의 기본 사용 방법에 대해 설명하겠습니다.



1. form 태그 

form 태그는 서버쪽으로 정보 전달 시 사용하는 태그입니다.

사용 예)




위와 같이 body태그 안에 작성하며, 'action'과 'method' 값을 지정해주어야 합니다.

action은 요청하는 컴포넌트의 이름을 작성하며(예: 서블릿의 URL mapping)

method는 요청을 처리하는 방식입니다. (링크 : post와 get방식의 차이)

form 태그를 위와 같이 작성한 후, 내부에서 요청할 데이터를 작성해야 합니다.



2. input 태그

input 태그는 type, name, value 등 속성 값을 정하여 요청할 데이터를 작성해줍니다.

아래의 예제 코드를 통해 알아보겠습니다.

    >     실행 결과     >     



사용한 타입은 일반 텍스트 "text", 패스워드 "password", 

중복 가능한 체크박스 "checkbox", 단일 선택 라디오박스 "radio" 입니다.

"submit" 타입은 form태그내에 입력한 데이터들을 요청 컴포넌트(form action=?)로 전달해주는 역할을 합니다.

"reset" 타입은 입력한 데이터를 초기화 할 때 사용합니다.

위 내용들이 일반적으로 사용되는 input 타입 속성 값입니다.



3. select 태그

리스트 형태의 데이터를 표현해줍니다. form 태그 안에 작성합니다.

   >     실행 결과     >