📁 HTML 입력 양식

✔ 입력 양식은 사용자로부터 데이터를 받아서 서버로 넘기는데 사용된다.
✔ 입력 양식에 채워진 데이터는 서버로 전달되고
✔ 서버에서 받은 데이터를 처리해서 실행 결과를 사용자에게 돌려준다.

📌 입력 양식의 작동 방식

✔ 입력 양식(form)은 기본적으로 사용자가 정보를 넣을 수 있는 입력 필드를 가지고 있는 웹페이지 이다.

🔎 작동 순서

① 입력 양식에 데이터를 채워서 서버로 보낸다.
② 서버는 입력 양식을 받아서 JSP와 같은 서버 스크립트로 보낸다.
③ JSP는 입력 데이터를 처리하여서 새로운 웹페이지를 생성한다.
④ 입력에 대한 응답으로 새로운 웹페이가 전달된다.

📌 GET 방식과 POST 방식

✔ 클라이언트 컴퓨터가 서버 컴퓨터로 데이터를 전달하는 방식에는 GET방식과 POST방식이 있다.

🔎 GET 방식

✔ URL 주소 뒤에 파라미터를 붙여서 데이터를 전달하는 방식이다.

🧐 GET 방식 특징

✔ GET 방식으로 보낼 수 있는 글자 수는 제한되어 있다.(최대 2048글자)
✔ 비밀이 보장되지 않는다.
✔ 북마크가 가능하고 "뒤로 가기"가 가능하다.

🔎 POST 방식

사용자가 입력한 데이터를 URL 주소에 붙이지 않고 HTTP Request헤더에 포함시켜서 전송시키는 방식이다.

🧐 POST 방식 특징

✔ 길이 제한이 없다.
✔ 보안이 유지된다.
✔ 브라우저 히스토리에 남아있지 않아서 북마크가 불가능하다.
✔ GET 방식과 다르게 "뒤로 가기" 버튼을 누르면 데이터를 다시 보내야 한다는 브라우저의 경고가 나온다.

📁 입력 태그 #1

📌 input 형식

✔ < input > 태그의 일반적인 구조

• type 속성 : 입력 요소의 유형은(type)이다.
• value 속성 : 입력 요소의 초기값이다. 입력 요소에 따라서 사용자가 변경하능하다.
• name 속성 : 입력 요소의 이름이며 서버의 변수의 이름처럼 전달된다.

🔎 텍스트 필드

✔ 사용자가 입력할 수 있는 한 줄짜리 입력 필드를 정의한다.
✔ 서버에서는 name을 변수 이름처럼 생각해 값을 참조한다.

🔎 패스워드 필드

✔ 사용자가 입력한 글자는 보이지 않는다.
✔ 비밀번호 입력에 주로 사용한다.

🔎 라디오 버튼

✔ 여러 항목 중에서 하나만 선택 할 때 사용한다.
✔ type은 radio로 설정해야 하고 name과 value속성도 반드시 지정해야한다.
✔ name이 같아야 동일한 그룹으로 취급한다.

🔎 체크박스

✔ 사용자가 여러 개의 항목을 동시에 선택 할 수 있다.
✔ name 속성은 동일해야 한다.

🔎 제출 버튼과 초기화 버튼

✔ < input type="submit' > 제출 버튼은 데이터를 서버로 전송하는데 사용한다.
✔ 데이터는 "name1=value1&name2=value2..."의 형태로 action속성에 지정된 스크립트로 전송된다.
✔ < input type="reset' > 초기화 버튼은 입력 필드에 입력한 값이 모두 초기화 된다.

🔎 < input > 버튼

✔ onclick 속성에 버튼이 클릭되면 실행되는 자바스크립트를 지정한다.
✔ onclick은 "버튼이 클릭이 되면"이라는 의미를 가지고 있다.

🔎 < button > 버튼

✔ 버튼 요소 안에는 텍스트나 이미지와 같은 콘텐츠를 삽입할 수 있다.
✔ < input type="button' > 요소로 생성된 버튼과 다르다.

🔎 이미지 버튼

✔ input 태그로 작성된 이미지 버튼은 항상 제출 버튼의 역할만 하지만
✔ button 태그를 사용하면 어떤 버튼도 이미지로 작성할 수 있다.

📁 입력 태그 #2

🔎 < textarea > 요소

✔ < textarea >는 여러 줄의 텍스트를 입력받을 떄 사용하는 태그이다.
✔ 영역의 크기는 rows와 cols로 설정한다.
✔ 사용자가 초기 공간보다 더 많은 텍스트를 입력하면 자동으로 스크롤바가 생성된다.

🔎 < select > 요소

✔ < select > 요소는 메뉴를 표시하고 사용자가 선택하게 한다.
✔ < option > 요소와 함께 사용한다
✔ < option > 요소는 반드시 value 속성을 가지고 있어야 한다.

🔎 < fieldset > 요소

✔ 입력요소를 그룹핑하는데 사용되는 태그이다.
✔ < fieldset > 요소 안에는 다양한 입력 요소를 넣을 수 있고 그룹의 경계에 선을 그려준다.
✔ < legend > 태그를 사용하면 그룹에 제목을 붙일 수 있다.

🔎 < label > 태그

✔ < label > 태그는 < input > 요소를 위한 레이블을 정의한다.
✔ < label > 태그의 속성 for를 사용하면 레이블과 < input > 요소를 서로 연결할 수 있다.
✔ < label > 요소는 마우스 사용자에게 편리하다.

🔎 파일 업로드 버튼

✔ 사용자가 파일을 선택해서 서버로 업로드해야 하는 경우에 사용한다.
✔ < input type="file" > 로 사용한다.
✔ < form > 태그에 속성으로 enctype="multi-part/form-data"를 추가하는 것이 좋다.

🔎 < input type="hidden" >

✔ 사용자가 입력하는 데이터는 아니지만 클라이언트 컴퓨터가 서버 컴퓨터로 특정한 데이터를 전송하고 싶은 경우에 많이 사용한다.
✔ 화면에는 아무것도 나타나지 않는다.
✔ 사용자가 "제출" 버튼을 누를 때, 서버로 < input type="hidden" > 요소의 name과 value 속성값이 전송된다.