용오름체험휴양마을영농조합법인 / 홍천 용오름캠핑장 팸투어 다녀왔어요.

용오름체험휴양마을영농조합법인 / 홍천 용오름캠핑장 팸투어 다녀왔어요.강원도 홍천 서석면에 위치해있으며 1급수 용오름계곡 바로 옆에 있습니다.홍천군 1등 마을로 마을에서 직접 관리하는 용오름캠핑장,펜션 10개를 운영하고 있으며 각종 모임이 가능하도록 식당,회의실,야외무대가 설치되어 있습니다.홍천군 1등 마을답게 캠핑장,펜션 마을 전지역 wi-fi 사용이 가능하며 매년 봄 팸투어 실시, 여름엔 마을에서 재배한 홉으로 직접만든 맥주축제,마리소리 음악축제 를 열고 있습니다.계곡의 경우 수심이 다양하여 다이빙 포인트가 2곳이 있으며 아이들이 안전하게 물놀이를 할 수 있는 곳도 여러 곳 있습니다.홍천 용오름캠핑장 팸투어 다녀왔어요.요즘은 농산촌체험마을에서 캠핑과 여러프로그램을 같이 하는 곳이 추세더라고요. 아미산이 둘러쌓인 청정계곡이 흐르는 아름다운 용오름체험휴양마을 에서 운영하는 홍천 용오름캠핑장 팸투어 다녀왔어요. 테크 앞 강이...붕어빵 가족의 담너머 세상구경https://m.blog.naver.com/1092119/220711235599가을여행-홍천여행- 홍천 용오름 마을 첫째날여행의 계절 가을입니다. 요즘 저희는 강원도에 꽃힌 상태인지라...카페 행복한 이티씨와 함께하는 홍천 용오름 마을 1박2일 체험에 참가를 하였답니다! 평소 체험 시간보다 조금 늦은 출발을 해서 차가 밀리지 않으려나...귀여운 단지https://m.blog.naver.com/sanguidan/50181593653용오름마을 캠핑장여름휴가의 시즌이다.. 강원도의 계곡과 시원함을 만끽하기 위해 캠핑장을 검색하다 우연히 알게 된 홍천의 용오름 캠핑장.. 성수기라 캠핑장 요금들이 사악하다 용오름캠핑장 옆엔 해미르 캠핑장이 있는데...★살로몬의 잇츠캠핑★https://m.blog.naver.com/freeguy9040/20163628934맥주효모로 만든 용오름맥주마을 바쏘 맥주샴푸와 맥주마스크팩...1988년까지 맥주 원료인 홉을 재배하며 번성했던 강원도 홍천군 서석면 용오름 마을이란 곳이 있었습니다…

<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

댓글

이 블로그의 인기 게시물

용오름체험휴양마을영농조합법인 / 홍천 용오름캠핑장 팸투어 다녀왔어요.

[C언어] 백준 알고리즘 - 숫자의 개수(2577번)

[2020 정보처리기사 실기 - 프로그래밍 언어 활용] 2. 언어 특성 활용...