form 태그
-
form 태그는 스스로 렌더링 결과를 만들지 않는 기능성 태그로 눈에 보이지 않음 입력받은 값을 서버로 전송하는 역할을 담당
-
HTML Form과 HTML Input Control의 관계는 입력 장치(키보드, 마우스, 터치 등)를 통해 데이터를 입력받는 역할(HTML Input Control)과 그 데이터를 서버로 전송하는 역할(HTML Form)로 구분
-
ex) 텍스트 박스, 라디오 버튼, 체크 박스, 버튼
form.method
-
데이터를 서버로 전송하는 방식(서버에게 요청하는 방식)
-
GET - 데이터를 수신자 주소 뒤에 붙여서 전달하는 방식 - URL 뒤에 ?id=hong 형태로 붙음 (Query String) - 여러 데이터는 ?id=hong&age=20&address=서울시 형태 - 데이터가 노출됨 - URL 길이 제한(256자 이내)으로 긴 데이터 전송 불가
-
POST - 데이터를 패킷의 본문(body)에 넣어서 전달하는 방식 - 데이터가 노출되지 않음 - 길이 제한 없음
form.action
- 데이터를 수신할 서버측 프로그램 URL 서버 프로그래밍 언어로 구현한 프로그램에 해당하며 Servlet, JSP, Spring, PHP, Python, Node.js, ASP.NET, Ruby 등이 이에 해당
input 태그
-
단독 태그이며 인라인 태그
- input.type - 입력 컨트롤의 종류, 기본값은 text
- input.name - 식별자, 서버에 전송할 때 사용
- input.id - 식별자, CSS와 JavaScript에서 사용
- input.class - 식별자, CSS와 JavaScript에서 사용
- input.size - 컨트롤의 길이, 글자 수 단위
- input.maxlength - 최대 입력 글자 수 + 유효성 검사
- input.value - 컨트롤이 가지는 현재 입력값
- input.readonly - 플래그형, 읽기 전용으로 입력 불가하지만 역할은 유지
- input.disabled - 플래그형, 비활성화로 입력 불가하고 역할도 없음
- input.accesskey - 바로가기 Alt + 키
- input.autofocus - 플래그형, 자동 포커스
- input.tabindex - 탭 순서
iframe 태그
- frame 태그는 현재 사용하지 않으며 iframe 태그를 사용 inline frame(inner frame)으로 조각 페이지 구성에 활용되며 페이지마다 공통 부분을 분리하는 용도로 사용
시맨틱 태그 (HTML5)
- HTML5에서 추가된 기능으로 기존의 div(블럭 태그)와 span(인라인 태그)은 역할이 없는 태그(division)였으나, 시맨틱 태그는 태그 자체에 의미와 역할을 부여한 태그
