<Form> 요소

요소

form 요소

웹 페이지에서는 form 요소를 사용하여 사용자로부터 입력을 받을 수 있습니다. 또한, 사용자가 입력한 데이터를 서버로 보낼 때에도 form 요소를 사용합니다. form 요소는 다음과 같은 문법으로 사용합니다.

action : 사용자가 입력한 데이터를 받아 처리하기 위한 웹 프로그램(ASP, PHP, JSP… 등)의 페이지 지정

method : 웹 서버와 클라이언트 간의 통신 방법 지정(GET 방식, POST 방식)

type : 폼의 모양과 기능 결정

name : 폼의 이름 결정

이렇게 전달받은 데이터를 처리하는 스크립트 파일을 폼 핸들러(form-handler)라고 합니다. 위에서 설명했던 것과 같이 method 속성은 입력받은 데이터를 서버에 전달할 방식을 명시합니다. 따라서 사용자가 form 요소를 통해 입력한 데이터는 action 속성에 명시된 위치로 method 속성의 방식을 통해 전달됩니다.

method 속성

method 속성을 통해 명시할 수 있는 form 요소의 전달 방식은 GET 방식과 POST 방식으로 나눠집니다. Get 방식의 경우 주소 뒤에? key=value &항목=값 형태로 구성되며 Post 방식의 경우 보이지 않는 형태로 다음 페이지에 전송됩니다. 자세한 설명은 아래와 같습니다.

GET 방식

URL 뒤에 파라미터를 붙여서 데이터를 전달하는 방식

사용자가 보내는 데이터는 이름과 값이 결합된 문자열 형태로 전달, 각 이름과 값의 쌍은 '&' 기호로 구분

서버로 보낼 수 있는 최대 글자수는 2,048자

URL을 보면 어떤 데이터를 전송하고자 하는지 알 수 있기 때문에 보안에 취약

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 < !DOCTYPE html > < html > < head > < title > Get 방식 < / title > < / head > < body > < h2 > GET 방식으로 데이터 전송 < / h2 > < form action = "01_getdata.jsp" method = "get" > < p > 이름 : < input type = "text" name = "name" > < / p > < p > 전공 : < input type = "text" name = "major" > < / p > < p > < / p > < input type = "submit" value = "전송" > < input type = "reset" value = "다시작성" > < / form > < / body > < / html > Colored by Color Scripter cs

GET 방식은 주소에 데이터(data)를 추가하여 전달하는 방식입니다.

데이터가 주소 입력창에 그대로 나타나며, 전송할 수 있는 데이터의 크기 또한 제한적입니다. 따라서 검색 엔진의 쿼리(query)와 같이 크기가 작고 중요도가 낮은 정보를 보낼 때 주로 사용합니다.

POST 방식

HTTP Request 헤더에 파라미터를 붙여서 데이터를 전송하는 방식

서버로 보낼 수 있는 글자수 제한 없음

GET 방식과 비교하여 보안상 우위에 있음

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 < !DOCTYPE html > < html > < head > < title > POST 방식 < / title > < / head > < body > < h2 > POST 방식으로 데이터 전송 < / h2 > < form action = "02_postdata.jsp" method = "POST" > < p > 이름 : < input type = "text" name = "name" > < / p > < p > 전공 : < input type = "text" name = "major" > < / p > < p > < / p > < input type = "submit" value = "전송" > < input type = "reset" value = "다시작성" > < / form > < / body > < / html > Colored by Color Scripter cs

POST 방식은 데이터(data)를 별도로 첨부하여 전달하는 방식입니다.

데이터가 외부에 드러나지 않으며, 전송할 수 있는 데이터의 크기 또한 제한이 없습니다. 따라서 보안성 및 활용성이 GET 방식보다 좋습니다.

다양한 타입의 input 요소

HTML에서는 다양한 타입의 input 요소를 사용하여 사용자로부터 입력을 받을 수 있습니다. form 요소 그 자체는 웹 페이지에 나타나지 않습니다. 하지만 form 요소에 포함된 다양한 input 요소를 통해 사용자의 입력을 받을 수 있습니다.

1. 전송/초기화 양식

type 속성값을 "submit"으로 설정하면, 사용자로부터 입력받은 데이터(data)를 서버의 폼 핸들러로 제출하는 버튼을 만들 수 있습니다. 폼 핸들러(form-handler)란 입력받은 데이터를 처리하기 위한 서버 측의 웹 페이지를 의미합니다.

이러한 폼 핸들러의 주소는 form 요소의 action 속성을 이용하여 명시할 수 있습니다.

1 2 3 4 5 6 7 8 9 < body > < h2 > 입력 양식 데이터 전송 버튼 < / h2 > < form action = "page.jsp" method = "get" > < p > 이름 : < input type = "text" name = "name" > < / p > < p > 학과 : < input type = "text" name = "major" > < / p > < p > < / p > < input type = "submit" value = "전송" > < / form > < / body > Colored by Color Scripter cs

초기화 양식은 폼에 입력한 데이터를 버튼으로 누를 시 모두 초기화시키는 작업을 도와줍니다

1 2 3 4 5 6 7 8 9 10 < body > < h2 > 입력 데이터 초기화 버튼 < / h2 > < form action = "page.jsp" method = "get" > < p > 이름 : < input type = "text" name = "name" > < / p > < p > 학과 : < input type = "text" name = "major" > < / p > < p > < / p > < input type = "submit" value = "전송" > < input type = "reset" value = "다시작성" > < / form > < / body > Colored by Color Scripter cs

2. 텍스트/비밀번호 입력 양식

type 속성값을 "text"로 설정하면, 사용자로부터 한 줄의 텍스트를 입력받을 수 있습니다. type 속성값을 "password"로 설정하면, 사용자로부터 비밀번호를 입력받을 수 있습니다. 비밀번호를 입력받기 때문에 화면에는 입력받은 문자나 숫자 대신 별표나 작은 원 모양이 표시됩니다.

1 2 3 4 5 6 7 8 9 10 < body > < h2 > 회원 인증 입력 양식 < / h2 > < form > < p > ID : < input type = "text" name = "ID" size = "15" required > < / p > < p > PW : < input type = "password" name = "psw" size = "15" placeholder = "비밀번호" required > < / p > < p > < / p > < input type = "submit" value = "전송" > < input type = "reset" value = "다시작성" > < / form > < / body > Colored by Color Scripter cs

3. 텍스트 공간 입력 양식

textarea 요소는 사용자로부터 여러 줄의 텍스트를 입력받을 수 있습니다. rows 속성과 cols 속성을 이용하여 textarea 요소의 크기를 자유롭게 지정할 수 있습니다.

1 2 3 4 5 6 7 8 9 < body > < h2 > 텍스트 공간 입력 양식 < / h2 > < form > < textarea rows = "5" cols = "50" > 텍스트를 작성하는 공간입니다. < / textarea > < p > < / p > < input type = "submit" value = "전송" > < input type = "reset" value = "다시작성" > < / form > < / body > Colored by Color Scripter cs

4. 라디오/체크박스/버튼 양식

type 속성값을 "radio"로 설정하면, 사용자로부터 여러 개의 옵션(option) 중에서 단 하나의 옵션만을 입력받을 수 있습니다. 이때 서버로 정확한 입력을 전송하기 위해서는 반드시 모든 input 요소의 name 속성이 같아야 합니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 < body > < form > < h3 > 당신의 성별은 무엇입니까? < / h3 > < input type = "radio" name = "sex" value = "male" checked > 남자 < input type = "radio" name = "sex" value = "female" > 여자 < p > < / p > < h3 > 당신은 몇 학년입니까? < / h3 > < input type = "radio" name = "year" value = "1" checked > 1학년 < input type = "radio" name = "year" value = "2" > 2학년 < input type = "radio" name = "year" value = "3" > 3학년 < input type = "radio" name = "year" value = "4" > 4학년 < p > < / p > < input type = "submit" value = "제출" > < input type = "reset" value = "다시작성" > < / form > < / body > Colored by Color Scripter cs

type 속성값을 "checkbox"로 설정하면, 사용자로부터 여러 개의 옵션 중에서 다수의 옵션을 입력받을 수 있습니다.

체크박스는 라디오 버튼과는 달리 여러 개의 옵션을 한 번에 입력받을 수 있습니다. 이때 서버로 정확한 입력을 전송하기 위해서는 반드시 모든 input 요소의 name 속성이 같아야 합니다.

1 2 3 4 5 6 7 8 9 10 11 12 < body > < form > < h3 > 현재 관심을 가지고 있는 학습 주제는 무엇입니까? < / h3 > < input type = "checkbox" name = "subject" value = "HTML5" checked > HTML5 < br > < input type = "checkbox" name = "subject" value = "CSS3" > CSS3 < br > < input type = "checkbox" name = "subject" value = "Javascript" > Javascript < br > < input type = "checkbox" name = "subject" value = "Jquery" > Jquery < p > < / p > < input type = "submit" value = "제출" > < input type = "reset" value = "다시작성" > < / form > < / body > Colored by Color Scripter cs

button 요소는 사용자가 누를 수 있는 버튼을 나타냅니다.

1 2 3 4 5 6 7 8 9 10 < body > < form > < h3 > Button 태그 사용 < / h3 > < button type = "button" onclick = "alert('클릭-1 사용')" > 클릭-1 < / button > < h3 > Input 태그 사용 < / h3 > < input type = "button" onclick = "alert('클릭-2 사용')" value = "클릭-2" > < h3 > Image 버튼 사용 < / h3 > < button type = "button" onclick = "alert('클릭-3 사용')" > < img src = "button.jpg" > < / button > < / form > < / body > Colored by Color Scripter cs

5. 선택 목록 양식

select 요소는 여러 개의 옵션이 드롭다운 리스트(drop-down list)로 되어 있으며, 그중에서 단 하나의 옵션만을 입력받을 수 있습니다. option 요소는 드롭다운 리스트에서 선택할 수 있는 각각의 옵션을 명시합니다.

다중 선택은

Multiple 속성을 사용합니다.

태그는

여러 항목을 그룹으로 묶을 수 있습니다. 목록 안에 하위 목록을 넣는다고 생각하시면 됩니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 < body > < h3 > 그룹별 선택 항목을 제공합니다. < / h3 > < form > < label > 전공 분야를 선택하세요. < select name = "major" > < optgroup label = "computer" > < option > Software < / option > < option > Robot < / option > < option > System < / option > < / optgroup > < optgroup label = "language" > < option selected > Korea < / option > < option > English < / option > < option > China < / option > < option > Germany < / option > < / optgroup > < optgroup label = "business" > < option > Service < / option > < option > Education < / option > < option > Communication < / option > < option > Marketing < / option > < / optgroup > < / select > < p > < / p > < input type = "submit" value = "선택" > < input type = "reset" value = "다시선택" > < / label > < / form > < / body > Colored by Color Scripter cs

from http://sseoui.tistory.com/22 by ccl(A) rewrite - 2020-03-22 17:54:08