[HTML5] 11. 웹 폼 + <input>, <select>, <textarea> 태그 + 폼 전송 과정 + 로그인 폼 생성 + 폼 요소 + 텍스트 입력 + <datalist> + 텍스트 및 이미지 버튼 + 체크박스와 라디오버튼 + 선택형 입력 + 설문지 만들기

11. 웹 폼 + <input>, <select>, <textarea> 태그 + 폼 전송 과정 +  로그인 폼 생성 + 폼 요소 + 텍스트 입력 + <datalist> + 텍스트 및 이미지 버튼 + 체크박스와 라디오버튼 + 선택형 입력 + 설문지 만들기

 

 

 

 

#웹 폼

: 웹 페이지에서 사용자 입력을 받는 폼으로 로그인이나 등록, 예약, 검색, 쇼핑 등에 사용된다.

 

- 폼 요소

: <input>, <textarea>, <select> 등의 태그를 사용한다.

 

 

 

 

# 정보 검색 과정 및 방식과 폼 전송 과정 이해

get 방식의 정보처리법(디폴트 값)

 

+ 1은 프론트 엔드, 2~5는 서버(백엔드)의 역할

 

 

1. 네이버 사이트에 접속

 

2. 입력 창에 'Elvis' 입력-> '검색' 버튼 누르면 브라우저는 <form> 태그의 action="https://search.naver.com/search.naver"을 참고하여 search.naver.com 서버에 접속 후 search.naver 응용 프로그램의 실행을 요구해야 한다는 것을 확인

 

3. 웹 서버 응용 프로그램에 보낼 폼 데이터 생성

https://search.naver.com/search.naver?... query=Elvis...

 

4. 브라우저는 search.naver.com에 접속, search.naver의 실행을 요청하고 query=Elvis 를 전달

 

5. 웹 서버에서 search.naver 응용 프로그램이 실행되고, 검색 결과를 브라우저에게 전송

 

6. 브라우저가 검색 결과를 화면에 출력

 

 

 

 

# 폼 작성

- 폼 태그 <form>

<form name="fo" method="get" action="fo.jsp">

      .....

</form>

 

- name 속성 : 폼의 이름 지정

- action : 폼 데이터를 처리할 웹 서버 응용 프로그램의 이름

+ submit 버튼이 눌리면 브라우저는 action에 지정된 웹 서버 응용 프로그램의 실행을 요청한다.

+ 웹 서버 응용 프로그램은 Java, PHP, JSP, C, C++ 등 다양한 언어로 작성된다.

 

- enctype : 폼 데이터를 웹 서버로 전송할 때 암호화 방식 지정

- target : 웹 서버 응용 프로그램으로부터 전송받은 데이터(HTML 문서나 이미지)를 출력할 윈도우의 이름

- method : 폼 데이터를 웹 서버로 전송하는 형식으로, 대표적인 전송 방식으로는 GET, POST 방식이 있다.

- readonly : 정보 수정이 불가하게 만든다.

 

 

 

 

# 간단한 로그인 폼 만들기

 

 

 

 

# 폼 요소의 종류

 

 

 

 

# 텍스트 입력

<input type="text">	<input type="password">	<textarea>
한줄 입력 창	암호 입력 창으로, 사용자가 입력한 문자가 그대로 나타나지 않고 다른 글자나 문자로 출력된다.	여러 줄 입력 창

 

- maxlength : 입력가능한 최대 문자개수

- size : 입력 창의 크기로, 단위는 문자의 개수이다.

- cols :열 개수

- rows : 행 개수

- wrap : 자동 줄바꿈 처리 지정

+ wrap="OFF", wrap="HARD", wrap="SOFT" 세 가지의 옵션이 있으며, SOFT 값이 디폴트 값이다.

 

 

+  자소서 입력받기

 

 

 

 

 

 

 

# 데이터 목록을 가진 텍스트 입력 창과 <datalist> 태그

- <datalist>

: 목록 리스트를 작성하는 태그로, 태그로 항목 하나를 표현할 수 있다.

 

- <input type="text">에 입력 가능한 데이터 목록 제고

id랑 list랑 같은 내용이여야 함

 

 

 

 

 

# 텍스트 및 이미지 버튼 만들기

<input type="button 또는 reset 또는 submit 또는 image" value="버튼의 문자열">

 

 

<button type="button 또는 reset 또는 submit"> 버튼의 문자열 </button>

 

 

 

 

# 다양한 버튼 생성

 

 

 

 

# 선택형 입력 : 체크박스

 

- value : 폼 요소가 선택된 상태일때 웹 서버에 전송되는 값

- checked : 위 속성이 있다면, 초기에 선택된 상태로 출력된다.

 

name 삽입 전

 

 

name 삽입 후

 

 

 

 

 

 

# 선택형 입력 : 라디오버튼

 

- value : 폼 요소가 선택된 상태일때 웹 서버에 전송되는 값

- checked : 위 속성이 있다면, 초기에 선택된 상태로 출력된다.

 

name이 다르면 중복선택이 가능하게 되니 조심!

 

 

 

 

 

# 설문지 만들기