HTML Form
Form
사용자가 웹사이트로 정보를 보낼수 있는 요소
텍스트필드, 체크박스, 라디오 버튼, 송신 버튼 등 다양한 유형의 입력 요소를 위한 컨테이너
Form의 동작방식
action에 대한 url이 있고 input 창에 입력 → action에 주소로 지정해둔 method방식으로 전송 → 입력한 data가 key와 value형태로 전달이 된다
HTML의 form 요소는 사용자로부터 입력을 받아 서버로 데이터를 전송하는 기능을 제공한다.
일반적으로 form 요소 안에는 다양한 입력 요소들(input, select등)이 포함되며, 사용자는 이 입력 요소들을 채워서 데이터를 입력하게 된다. 이 때, form 요소의 action 속성에 지정된 서버 URL로 데이터가 전송된다.
전송 방식에는 GET과 POST 방식이 있습니다. GET 방식은 URL에 데이터를 포함시켜 전송하며, POST 방식은 HTTP 요청 본문에 데이터를 포함시켜 전송한다.
Get과 Post
브라우저가 url 쳐서 넘기면 get방식으로 넘어간다. 데이터를 얻는 용도로 쓰는게 get 방식. 서버로 데이터를 작성하려고 하는게 post 방식
get은 클라이언트가 서버에게 달라고 요청하는것이므로 데이터를 숨길필요가 없어서 url에 데이터를 포함해서 보낸다. post의 경우 서버에 데이터를 저장하는 용도로 작성하는것이므로 숨겨서 넘어가게된다. get은 url에 담아서 가고 post는 리퀘스트의 body에 숨겨져서 데이터가 넘어간다.
post 전송 시 가려지게 된다는 의미?
브라우저는 우리가 보낸 정보를 알고 있다. 네트워크로 갈 적에 가려진다는의미 브라우저 ------------> 네이버 이렇게 갈수 없다.
여러 노드(node)들을 거쳐서 지나감. 이때 header url이 맞는지 확인하는데 post로 보내면 이때 정보들이 가려져서 이동하게 된다는 의미
추가설명 (Chat GPT)
POST 방식으로 데이터를 전송할 때, 데이터가 HTTP 요청의 본문(body)에 담겨 전송됩니다. 이는 GET 방식과 달리 URL에 데이터가 노출되지 않는다는 장점이 있습니다.
즉, 사용자가 입력한 중요한 정보(예: 로그인 정보, 결제 정보 등)가 URL에 노출되는 것을 방지할 수 있습니다. 이는 보안상 매우 중요한 이슈입니다.
또한, POST 방식은 HTTP 요청 메시지가 바이트 스트림으로 전송되기 때문에 GET 방식보다 더 많은 데이터를 전송할 수 있습니다. 이는 파일 업로드 등의 대용량 데이터 전송에 적합합니다.
하지만, POST 방식은 GET 방식과 달리 브라우저의 뒤로 가기 버튼으로 이전 페이지로 돌아갈 때, 사용자가 이전에 입력한 데이터가 보존되지 않는다는 단점이 있습니다. 이는 브라우저의 캐시 기능과 관련이 있습니다.
그리고 POST 방식으로 전송된 데이터는 HTTP 요청 본문에 담겨 있기 때문에 URL에서 확인할 수 없습니다. 따라서, 디버깅이나 개발 시에는 HTTP 요청을 볼 수 있는 도구를 사용해야 합니다.
node
"노드(node)"란 일반적으로 네트워크에서 데이터를 전송하는데 중간 역할을 수행하는 장치를 가리킨다. 이러한 장치를 네트워크 노드라고도 부른다.
예를 들어, 클라이언트가 서버에 데이터를 전송할 때, 클라이언트와 서버 사이에 네트워크 노드가 위치할 수 있다. 이 경우, 클라이언트가 POST 방식으로 데이터를 전송하면 데이터는 먼저 해당 노드로 전송되고, 그 후에 서버로 전송된다. 이 때, 노드는 전송된 데이터를 중계하여 서버로 전달하는 역할을 수행한다.
노드는 일반적으로 라우터, 스위치, 게이트웨이, 프록시 등의 장치로 구성된다. 이들 장치는 네트워크에서 데이터 전송을 담당하며, 전송 속도 향상 및 보안, 부하 분산 등 다양한 기능을 제공한다.
요약하자면, 노드는 네트워크에서 데이터 전송을 중개하는 역할을 수행하는 장치를 가리키며, 클라이언트와 서버 사이에 위치하여 POST 방식으로 데이터를 전송할 때 중간에서 데이터를 중계하는 역할을 수행한다.
서버는 전송된 데이터를 처리하여 적절한 응답을 반환한다. 이때, form 요소의 method 속성을 통해 전송 방식(GET 또는 POST)을 지정할 수 있다.
또한, form 요소의 enctype 속성을 통해 전송되는 데이터의 형식을 지정할 수 있다. 기본적으로는 application/x-www-form-urlencoded가 사용되지만, 파일 업로드 등의 경우 multipart/form-data를 사용할 수 있다.
요약하면, form 요소는 사용자로부터 데이터를 입력받아 서버로 전송하는 기능을 제공하며, 입력 요소들과 함께 action, method 등의 속성을 이용하여 전송 방식과 데이터 형식을 지정할 수 있다.
Form 태그
<!--기본형-->
<form [속성="속성값"]>~</form><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form</title>
</head>
<body>
<!--Form 요소>
<!--사용자로부터 입력을 받아 특정한 리소스로 요청을 보낼때-->
<!--사용되는 요소-->
<form>
<input name="id" /> <!--key와 value형태로 넘어간다-->
<input name="password" />
<button type="submit">로그인</button>
</form>
id에 qwer, password에 qwer을 입력시 주소창에 포함되어 표시된다
쿼리 스트링 (Query String)
쿼리스트링(Query string)은 웹 페이지 주소(URL) 끝에 '?'와 함께 파라미터(key=value)를 전달하는 방식을 말한다. 이때 전달된 파라미터를 쿼리 파라미터(Query parameter) 또는 쿼리스트링 파라미터(Querystring parameter)라고 부른다.
쿼리스트링을 사용하면 클라이언트(브라우저)가 서버에 요청할 때 요청에 필요한 정보를 함께 전달할 수 있다. 이때 전달된 파라미터의 값을 바탕으로 서버는 적절한 응답을 반환한다.
쿼리스트링의 파라미터 중에는 특정 값을 가리키는 식별자 역할을 하는 쿼리 파라미터와, 페이지를 구분하거나 검색 조건 등을 전달하는 패스 쿼리가 있다.
패스쿼리(Path query) 는 URL의 경로(path) 부분에 쿼리스트링 형태로 전달되는 파라미터를 말한다.
쿼리밸류(Query value)는 쿼리스트링에서 key=value에서 value에 해당하는 값이다.
id와 password 는 패스쿼리 각각 쿼리 value는 qwer
Form 속성
method : 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지 지정
- get :데이터를 256 ~ 4,096byte 까지만 서버로 전송 가능. 주소 표시줄에 사용자가 입력한 내용이 그대로 드러남(보안성이 낮다.)
- post : 입력한 내용의 길이에 제한❌, 사용자가 입력한 내용도 드러나지❌
action : form을 제출했을적에 어떤 리소스로 보낼지에 대한 리소스 작성부분
name : 지칭할 적에 사용한다. 폼(form) 요소(form element)에 대해 사용자가 지정한 이름을 제공. 폼 요소는 사용자 입력을 받는 요소로서, 텍스트 필드(text field), 버튼(button), 체크박스(checkbox), 라디오버튼(radio button)이 있다.
autocomplete : 로그인 입력하려고할때 밑에 자동완성으로 캐시가 켜지는데 그걸 켜놓을 것인지 아닐지에 대한 설정
<br />
<!--Form 속성-->
<!--action / method 속성-->
<!--action : Form을 제출할때 어떠한 리소스로 제줄할 것인지-->
<!--method : Form을 제출할때 어떠한 방식(GET, POST)으로 제출할 것인지-->
<!--GET 방식 : 데이터를 url에 담아서 전송-> Request Header의 url에 담겨서 이동-->
<!--POST 방식 : 데이터를 숨겨서 전송 -> Request Body에 담겨서 이동-->
<form action="http://naver.com" method="GET">
<input name="data" />
<button type="submit">GET 전송</button>
</form>
<br />
<form action="http://naver.com" method="POST">
<input name="data" />
<button type="submit">POST 전송</button>
</form>
<br />
get전송 입력시
get 전송 시 url주소
GET 정보 나타낸다.
post전송 입력시
post 전송시 url에 전송입력값이 나타나지 않는다.
POST 정보 나타낸다.
Button 태그
submit / reset 타입이 있다.
reset의 경우 입력한 값을 초기화시킨다.
<!--Form Button-->
<form>
<input name="first" />
<input name="second" />
<!--submit : form을 action에 method 방식으로 요청을 보내는 형식-->
<button type="submit">제출</button>
<input type="submit" value="인풋 제출" />
<!--이렇게 쓰기도 하나 잘 안씀-->
<!-- reset : form의 input value 들을 초기값으로 변경-->
<button type="reset">초기화</button>
<input type="reset" value="인풋 초기화" />
</form>
<br />
button : ‘submit’이나 ‘reset’ 버튼과 같은 기능 아니다. → only 버튼 형태❗
주로 버튼을 클릭해서 자바스크립트를 실행할 때 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button</title>
</head>
<body>
<!--Button 요소-->
<!--사용자의 클릭 이벤트를 인식-->
<!--button 요소의 경우 JavaScript와-->
<!--연결해야 의미가 있다-->
<button type="button" onClick="⭐onButtonHandler()">버튼</button>
<!--on이 붙으면 이벤트를 생성함-->
<script>
function ⭐onButtonHandler(){
console.log('로그 기록');
location.href = 'http://naver.com';
}
</script>
</body>
</html>
버튼을 누르면 개발자도구의 console부분에 '로그 기록'이 뜨면서 네이버로 실행되게된다.
Fieldset, Legend, Label 태그
Fieldset, Legend : 폼 요소를 그룹으로 묶는 태그
- fieldset 태그 : 하나의 폼 안에서 여러 구역을 나누어 표시
- legend 태그 : field 태그로 묶은 그룹에 제목을 붙이는 태그
Label : input 태그와 같은 form 요소에 레이블을 붙일 때 사용
- 라벨(label) : 입력란 가까이에 아이디나 비밀번호처럼 붙여 놓은 텍스트
- label 태그 사용 시 폼 요소와 레이블 텍스트가 서로 연결되었다는 것을 웹 브라우저가 인식
<!--기본형-->
<label>레이블명<input/></label>
<label>아이디(6자 이상)<input type="text"/></label>
<!--기본형2-->
<label for="id명">레이블명<input id="id명"/></label>
<label for="user-id">아이디(6자 이상)</label>
<input type="text" id="user-id"/>
<!--폼 요소의 id 속성값을 <label> 태그의 for속성에게 알려주는 방법-->
<!--<label> 태그를 사용한 레이블과 사용자 정보를 입력받는
<input> 태그가 떨어져 있더라도 둘 사이를 쉽게 연결할 수 있다는 장점이 있다.--> <!--Field Set 요소-->
<!--form의 field를 그룹하 지어주는 요소-->
<!--Lable 요소-->
<!--form의 요소에 라벨을 달아주는 요소, 이름 지칭등을 함-->
<!--label요소의 for 속성에 form의 요소의 id속성값을-->
<!-- 지정하면 해당 label요소와 form의 요소가 연결-->
<form>
<fieldset>
<legend>예약정보</legend>
<label for="reservation_input">예약일</label>
<!--xhtml상에는 for이 없다-->
<input type="date" id="reservation_input" />
<!--id를 label의 for을 통해서 연결해줄수 있다-->
</fieldset>
<fieldset>
<legend>예약자 정보</legend>
<input />
<input />
</fieldset>
</form>
</body>
</html>
HTML Input
Input / 태그
사용자로부터 입력을 받을 수 있는 입력 필드(input filed)를 정의
사용자가 데이터를 입력할 수 있는 입력 필드를 선언하기 위해 form 요소 내부에서 사용 (html상에서만! xhtml에서는 사용하지않는다)
Input 태그 type 속성
가장 많이 쓰이는 속성 : text, password, checkbox, radio, file, hidden
- email : 입력시 양식을 확인해준다
- checkBox : 주어진 여러 항목에서 2개 이상 선택할 수 있는 체크 박스
(0개 이상 선택가능) - radio : 주어진 여러 항목에서 1개만 선택할 수 있는 라디오 버튼
(필수로 하나 선택!) - size : input box의 사이즈 지정 몇글자까지 표시되게 할건지
- maxLength : 해당 input의 최대 길이 지정
- value : input의 값을 지정해 놓을때 사용하는것
- name : form 제출 시 해당 name으로 value를 전송, radio의 경우 name으로 그룹화
- checked : 기본적으로 선택되게한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input</title>
</head>
<body>
<!-- Input 요소의 type 속성-->
<!-- text, password type-->
<!--text와 password type에서 자주쓰이는 추가 속성-->
<!-- size : input box의 사이즈 지정 몇글자까지 표시되게 할건지-->
<!-- maxLength : 해당 input의 최대 길이 지정-->
<!-- value : input의 값을 지정해 놓을때 사용하는것 -->
<input type="text" size="5" maxLength="3" value="1234"/>
<!-- value지정해놓은건 maxLength영향받지 않는다-->
<input type="password" />
<br />
<!--search, url, email, tel type-->
<form>
<input type="search" />
<input type="url" />
<input type="email" /> <!--강제성을 띤다. 양식에 맞춰 작성해야함-->
<input type="tel" />
<button type="submit">submit</button>
</form>
<br />
email 속성의 경우 양식에 맞춰야하는 강제성을 가진다
checkbox, radio 속성
<!--checkbox, radio type-->
<!--checkbox : 0개 이상 선택할때 사용 -->
<!--radio : 1개만 선택할때 사용-->
<!-- value : checkbox나 radio의 값을 지정-->
<!-- name : form 제출 시 해당 name으로 value를 전송-->
<!-- radio의 경우 name으로 그룹화-->
<!-- checked : 기본적으로 선택-->
<form>
<fieldset>
<legend>CheckBox</legend>
<input type="checkbox" name="check_group" value="1" checked /><label>1</label>
<input type="checkbox" name="check_group" value="2" checked/><label>2</label>
<input type="checkbox" name="check_group" value="3" checked/><label>3</label>
</fieldset>
<fieldset>
<legend>Radio</legend>
<input type="radio" name="radio_group" value="1" checked/><label>1</label> <!--name으로 그룹화되면 그 중 하나만 선택가능-->
<input type="radio" name="radio_group" value="2" /><label>2</label>
<input type="radio" name="radio_group" value="3" /><label>3</label> <!--radio의 경우 다 checked해놔도 맨 마지막에 읽은걸로 인식함-->
</fieldset>
checkbox에 checked 를 모두 걸어놨기때문에 셋다 선택된 상태가 기본이 된다.
value값도 선택되어진 id의 value값을 주소로 나타낸다.
Select 태그
<!--*Select -->
<!--선택창은 input요소가 아니고 select요소-->
<!--주어진 옵션 중에 특정한 하나 혹은 그 이상을 선택하게한다-->
<!--option 요소로 선택할 수 있는 옵션을 지정한다-->
<!--⭐optiongorup 요소로 option 요소들을 그룹화-->
<!-- select 요소에 작성-->
<!--name : form 제출시 해당 name으로 value전송한다-->
<!--multiple : 해당 select를 여러개의 option 선택 가능하게 함-->
<!--size : 한번에 보여지는 option의 수를 지정-->
<!--option 요소에 작성-->
<!--value : option의 값을 지정-->
<!-- selected : 해당 option을 선택된 상태로 지정-->
<!--disabled : 해당 option을 선택하지 못하는 상태로 지정-->
<fieldset>
<legend>Select</legend>
<select name="fruits" multiple size="6"> <!--key값과 value값이 입력되면 주소창에 적용된다-->
<!--multiple해서 ctrl눌러 선택한 다음 엔터하면 모두 제출된다-->
<optgroup label="real fruit"> <!--optgroup 선택창 내에서 그룹을 만들어줄수 있다.-->
<option value="apple">apple</option>
<option value="banana">banana</option>
</optgroup>
<optgroup label="food">
<option value="carot" selected>carot</option> <!--selected : select에서 기본으로 선택되는값 설정-->
<option value="donut" disabled>donut</option> <!--disabled : 선택할수 없게 변환된다-->
</optgroup>
</select>
</fieldset>
<button type="submit">제출</button> <!--버튼눌러서 제출하면 주소창에 value값이 나오게 된다-->
</form>
<br />
optgroup으로 real fruit과food로 그룹화가 되었고 option에 값을 넣었다. carot에 selected 속성이 걸려있어서 기본 선택값이 carot으로 되었고 donut에는 disable속성이 걸려서 선택이 되지 않게 설정되었다.
multiple size를 6으로 설정해서 한번에 다보이지만 size 조절을 통해서 보이는 범위를 조절할 수 있다.
number, range 속성
number : 스핀 박스를 사용하여 숫자를 선택
- 스핀 박스 : 오른쪽에 작은 화살표(▲▼)를 표시해서 클릭할 때마다 숫자를 높이거나 낮추는 기능
range : 슬라이드 막대를 움직여 숫자를 입력
<!-- number, range 속성-->
<!-- 숫자를 다루는 속성-->
<!-- number는 직접입력하거나 스핀으로 조작-->
<!--range는 드래그로 조작-->
<!-- min : 최소값 지정-->
<!-- max : 최댓값 지정-->
<!--step : 증감량 조절-->
<!--value : 기본값 지정-->
<form>
<input type="number" name="number" min="0" max="10" step="2" value="2"/>
<input type="range" name="range" min="-10" max="10" step="2" value="0"/>
<button type="submit">제출</button>
</form>
number의 경우 기본값인 value를 2로 해뒀고 증감범위도 2로 새둬서 ▲ 누르면 4로 증가가 된다.
range의 경우 기본값인 value를 0으로해둬서 중앙에 위치하고, 이동시 증감범위를 2로 설정해둬서 걸리는 느낌으로 움직이게 된다.
file, hidden 속성
file : 파일 첨부, 사진 OR 문서를 첨부, 웹 브라우저 화면에 [파일 선택] OR [찾아보기] 버튼 표시 → 버튼을 클릭하여 파일 선택 시 파일 첨부
첨부한 파일을 서버로 전송하려면 ‘자바스크립트’ 등 웹 프로그래밍 언어를 사용해야 한다.
hidden : > 히든 필드로 화면의 폼에는 보이지 않는다.
→ 사용자가 입력을 마치면 폼과 함께 서버로 전송되는 요소
사용자에게 보여주지 않으면서 관리자가 알아야하는 정보를 히든 필드로 입력
<!--file, hidden type-->
<!-- file타입은 파일을 입력할때 사용-->
<!-- hidden 타입은 화면에 보여주지 않고자 할때 사용-->
<form enctype="multipart/form-data">
<!--multipart/form-data 지정해야 파일이 파일로 넘어간다-->
<input type="file" name="file"/>
<input type="hidden" name="hidden" value="hidden_value"/>
<!--사용자가 입력을 못받으므로 value로 기본값 지정해줘야한다.-->
<button type="submit">제출</button>
</form>
</body>
</html>
hidden 영역은 보이지않는다.
