HTML Tag 모음과 활용 예시2 - <form>

[Form Tag]

 

1. 속성 
 - action : 서버에 있는 어떤 파일을 찾아가는 지 지정
             .jsp .java servlet(웹자바)
- method : 전송방식(get(기본), post)

※ 입력 미완료된 상태로 서버
   전송되는 에러 해결
1) '입력 시. Tab키만 사용하십시오'명시
2) 프로그램을 작성하여 해결
    (javascript)
3) HTML5의 required 사용

 

[form Tag 예시]

<form action = "hello.jsp" method = "get"> ☞ hello.jsp로 "get" 방식으로 데이터 전송
 이름 <input type = "text" name = "irum" autofocus required placeholder = "kildong hong"><br> 
 전화번호 <input type = "text" name = "tel" required><br> 
 이메일 <input type="email" name = "email" required placeholder = "aa@aa.com"><br> 
 생일 <input type="date" name = "birth" required><br>
 <input type = "submit" value = "서버 버튼">
 <input type = "reset" value = "취소 버튼">
</form>

[.html 실행 예시]

 

 

2. 데이터 전송 방식

- get : 기본형

         head 또는 body로 처리(head로 전송)

         전송 내용이 전부 출력됨

         보안문제 관계없는 경우 사용

 

         head – 전송 내용 노출됨, 작은 용량(128byte~2k), 길이 고정(길이 계산 X)(상대적으로 속도 ↑)

                    Ex) http:// ....?name=choi&tel=01011112222

 

                    주소?name=value&name=value&...

                    전송 시, 영어는 그대로 전송 

                    한글 등 특수 문자는 %3% encoding

 

- post : body로 처리

          보안성 높음

          한글에 대해 문장으로 처리 가능

          body – 노출 되지않음, 큰 용량, 길이가 유동적(상대적으로 속도 ↓)