인터넷 프로그래밍 #4-1 입력양식 태그

인터넷 프로그래밍
4-1 입력양식 태그

 

단원 목표

1. 폼(Form)의 개념과 작동방식에 대해 설명하기..
2. 입력(Input) 태그 사용법에 대해 설명하기.
3. 네이버 회원가입 양식을 만들 수 있다.

 

폼(Form)
<form [속성="속성값]> 폼 요소 </form>

폼의 속성
액션(Action) 

- 사용자가 제출 버튼 클릭 시, 양식 데이터가 서버의 파일로 전송됨.
메소드(Method) 
- 폼 데이터를 제출할 때 HTTP 메소드가 사용되도록 지정
- 양식 데이터 보내는 방식 1.URL 변수 : method="get" 2.HTTP 포스트 트랜잭션: method:"post"
- 양식 데이터를 제출할 때 기본 방식은 GET

GET
-주소에 데이터를 직접 입력해서 전달
-GET을 사용하여 민감함 데이터를 보내지 않도록 한다.
-URL길이가 (2048자) 제한됨
-사용자가 결과를 책갈피로 지정하려는 양식 제출에 유용
-비보안 데이터에 유용

POST
-별도의 방법을 사용해 데이터를 해당 주소로 전달
-제출된 양식 데이터는 URL에 표시되지 않음
-POST는 크기 제한이 없으며 많은 양의 데이터를 보내는 데 사용
-POST가 포함된 양식 제출은 책갈피로 지정할 수 없음

폼의 요소 (Element)
Label 
-여러 가지 형태의 이름을 정의
- 스크린 리더 사용자에게 유용
-라디오 버튼이나 체크박스 등의 매우 작은 영역을 클릭하는 데 어려움을 겪는 사용자에게 도움이 됨.

(레이블 요소 내의 텍스트를 클릭하면 버튼이 토글되기 때문)
-태그의 for 속성은 label태그를 묶는 요소의 id 속성과 같아야 함
FiledSet & Legend
Filetset - 입력양식의 그룹 지정
Legend - 입력 양식 그룹의 이름 지정
Select & Option
-드롭박스 선택 값을 option태그로 작성
Textarea
-여러 행의 글자 입력 양식 생성
-rows='숫자' 로 줄 허용

 

 

 

*** *** ***  *** ***  *** ***  *** ***  *** ***  *** *** 핵심정리 *** ***  *** ***  *** ***  *** ***  *** ***  *** *

폼(Form) 태그 - 사용자의 입력을 수집하여, 서버에서 처리
입력(Input) 태그 - Text, button, checkbox, file, hidden, password, radio, reset, submit, date, time, color, range
액션(Action) 액션 - 사용자가 제출 버튼을 클릭하면 양식 데이터가 서버의 파일로 전송
메서드(Method) - 폼 데이터를 제출할 때 HTTP 메서드가 사용되도록 지정
레이블(Label) - 여러 가지 형태의 이름을 정의