<form> 태그

<form> 태그는 사용자로부터 입력을 받을때 사용합니다

<form> 태그에서 사용 가능한 속성은 여러가지 있습니다 우리는 우선 기본적인 3개의 속성에 대해 알아봅시다

• action 
• method
• name

1. action : 폼 데이터가 서버로 제출될 때 해당 데이터가 도착할 URL을 지정해주는 것입니다

<form action="URL 주소">

 

2. method : 폼 데이터가 서버로 제출할 때 사용할 HTTP 메서드를 지정합니다

HTTP 메서드는 GET과 POST 두가지 있습니다

기본 HTTP 메서드는 GET이기 때문에 method를 따로 지정해주지 않으면 GET 방식으로 제출을 합니다

GET 특징

제출된 데이터가 URL에 표시됩니다(보안에 취약)

URL의 길이는 제한되어 있기 때문에 긴 데이터를 보낼순 없습니다

POST 특징

HTTP 요청 본문 내부에 데이터를 포함시켜 전송하기 때문에 보안이 강하다(URL에 표시되지 않음)

크기 제한이 없기 때문에 많은 양의 데이터를 보낼수 있습니다

<form method="post"> 또는 <form method="get">

 

3. name : <form>요소의 이름

위 3가지 속성을 한번에 사용하면 다음과 같이 된다

<form name="customer_form" method="post" action="customer_request_para.jsp">

 

자 이번엔 사용자 입력을 받는 입력 태그에 대해 알아보겠습니다 입력 요소에도 여러가지가 있지만

저희는 가장 기본적인 4가지를 알아봅시다

• input
• label
• textarea
• fieldset

1. input : 내부에 type 속성을 사용하여 어떠한 방식으로 입력 받을지 결정합니다

 

날짜와 시간

date	사용자 지역의 날짜(연,월,일)를 입력한다
datetime	국제 표준시의 날짜와 시간을 입력한다
datetime-local	사용자 지역의 날짜(연,월,일)와 시간(시,분,초)를 입력한다
month	사용자 지역의 날짜(연,월)를 입력한다
time	사용자 지역의 시간(시,분,초)를 입력한다

 

 

Text : 키보드로 입력할 수 있는 모든 값 (숫자, 문자열)

 

size	글상자의 크기
maxlength	최대 입력 길이
name	요소의 이름을 설정한다 전송된 입력값은 이 이름을 통해 인식된다
required	데이터를 필수로 입력해야 하도록 설정한다 입력하지 않을시 메세지를 띄운다

 

radio & checkbox : name 속성의 값들은 모두 동일해야 연동이 된다

 

radio	여러 선택지를 주고 단 하나만을 선택할 수 있다
checkbox	여러 선택지를 주고 다수 선택 할 수 있다

 

 

나머지

 

color	색을 입력하기 위한 타입 RGB값을 저장하여 전송함
email	이메일을 입력하기 위한 타입 입력값이 이메일 형식이랑 다르면 전송하지 않고 경고 메세지가 뜬다
range	범위 내에서 값을 지정하게 하는 입력 타입
password	비밀번호를 입력하기 위한 타입 입력값이 보이지 않도록 점으로 표시된다
number	숫자 이외의 입력은 되지 않는다  min과 max 속성을 사용하여 최솟값, 최대값을 정할 수 있다
url	url 주소를 입력하기 위한 타입
submit	서버에 데이터 값을 전송하기 위한 타입
reset	초기화를 하기 위한 타입

 

 

2. label : 라벨을 정읠 할 때 사용합니다 for 속성을 사용하여 다른 요소와 결합 할 수 있으며

이때 for 속성값은 결합하고자 하는 요소의 id 속성값과 같아야 합니다

라벨을 클릭하면 라벨과 연결된 요소를 알수 있다는 장점도 있습니다

 

for 속성값과 id값이 같은 것을 알 수 있다

 

3. textarea : 자유 형태의 텍스트를 입력할 때 사용합니다

 

 

4. fieldset : 그룹화 라고 생각하면 됩니다 <legend> 태그를 사용하여 제목을 지어줍니다

위에서 공부 했던 입력요소들을 그룹화 시켜줍니다