■ HTML – FORM
- <form> 태그는 사용자로부터 입력을 받을 수 있는 HTLM 입력 폼(form)을 정의할 때 사용
- <form> 요소는 다음과 같은 요소들을 하나 이상 포함할 수 있음
- <button>
- <fieldset>
- <input>
- <label>
- <option>
- <optgroup>
- <select>
- <textarea>
[ form 요소 ]
- 웹 페이지에서는 form 요소를 사용하여 사용자로부터 입력을 받을 수 있음
- 또한, 사용자가 입력한 데이터를 서버로 보낼 때에도 form 요소 사용
- 문법 => <form action="처리할페이지주소" method="get|post"></form>
- action 속성 : 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시
( 이렇게 전달받은 데이터를 처리하는 스크립트 파일 -- 폼 핸들러(form-handler) )
- method 속성 : 입력받은 데이터를 서버에 전달할 방식을 명시
- 사용자가 form 요소를 통해 입력한 데이터는 action 속성에 명시된 위치로 method 속성의 방식을 통해 전달됨
[ action 속성 ]
- 양식이 제출 될 때 작업을 수행 할 정의
- 일반적으로 사용자가 제출 버튼을 클릭하면 양식 데이터가 서버의 파일로 전송됨
- 양식 데이터는 action 속성값으로 명시된 파일( ex) "/action_page.php" )로 전송됨
이 파일에 양식 데이터를 처리하는 서버측 스크립트가 포함됨
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>[ method 속성 ]
- 양식 데이터를 제출할 때 사용할 HTTP 메소드를 지정 ( 기본 HTTP 메소드는 GET )
- 양식 데이터는 URL 변수 (사용 method="get") 또는 HTTP 사후 트랜잭션 (사용 method="post") 으로 전송 될 수 있음
- GET 방식
- GET 메서드. 양식 데이터를 action URL과 ? 구분자 뒤에 이어 붙여서 전송
- 주소(url)에 데이터(data)를 추가하여 전달하는 방식
- 데이터가 주소 입력창에 그대로 나타나며, 전송할 수 있는 데이터의 크기 또한 제한적
- 검색 엔진의 쿼리(query)와 같이 크기가 작고 중요도가 낮은 정보를 보낼 때 주로 사용
- POST 방식
- POST 메서드. 양식 데이터를 요청 본문으로 전송
- 데이터(data)를 별도로 첨부하여 전달하는 방식
- 데이터가 외부에 드러나지 않으며, 전송할 수 있는 데이터의 크기 또한 제한이 없음
- 보안성 및 활용성이 GET 방식보다 좋음
- dialog : 양식이 <dialog> 안에 위치한 경우, 제출과 함께 대화 상자를 닫음
- <button>, <input type="submit"> (en-US), <input type="image"> (en-US) 요소의 formmethod 특성으로 재정의 할 수 있음
[ 다양한 타입의 input 요소 ]
- HTML에서는 다양한 타입의 input 요소를 사용하여 사용자로부터 입력을 받을 수 있습니다.
1. 텍스트 입력(text)
2. 비밀번호 입력(password)
3. 라디오 버튼(radio)
4. 체크박스(checkbox)
5. 파일 선택(file)
6. 선택 입력(select)
7. 문장 입력(textarea)
8. 버튼 입력(button)
9. 전송 버튼(submit)
10. 필드셋(fieldset)
[ 전송 버튼 ]
- <input>태그의 type 속성값을 "submit"으로 설정하면, 사용자로부터 입력받은 데이터(data)를 서버의
폼 핸들러( 입력받은 데이터를 처리하기 위한 서버 측의 웹 페이지 )로 제출하는 버튼을 만들 수 있음
- form 요소의 action 속성을 이용하여 폼 핸들러의 주소 명시
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
method
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
url로 파라미터 전달 ( get 요청 )
GET 메소드를 사용하면 모든 form data는 URL로 인코딩되어 action URL에 query string parameters로 전달됨
폼의 데이터를 서버로 전달 ( post 요청 )