이 장에서는 HTML <form> 요소의 다양한 속성에 대해 설명한다.
HTML form #action 속성
action 속성은 양식을 제출할 때 수행할 작업을 정의한다.
일반적으로 사용자가 제출 단추를 누르면 양식 데이터가 서버의 파일로 전송된다.
아래 예제에서 양식 데이터는 "action_page.php"라는 파일로 전송된다. 이 파일에는 양식 데이터를 처리하는 서버측 스크립트가 포함되어 있다:
| <!DOCTYPE html> <html> <body> <h2>HTML Forms</h2> <form action="/action_page.php"> <label for="fname">이름:</label><br> <input type="text" id="fname" name="fname" value="길동"><br> <label for="lname">성:</label><br> <input type="text" id="lname" name="lname" value="홍"><br><br> <input type="submit" value="Submit"> </form> <p>"제출" 버튼을 클릭하면 양식 데이터가 "/action_page.php"라는 페이지로 전송됩니다.</p> </body> </html> |
form-data는 aciton_page.php라는 파일로 서버에 전송이 된다.
아래에는 서버에 전송된 데이터는 'fname=John&lname=Doe'가 서버에서 처리되고 그에 대해 응답을 클라이언트에 회신할 것이다.
팁: 액션 속성을 생략하면 액션이 현재 페이지로 설정된다.
HTML form #target 속성
target 속성은 양식을 제출한 후 수신된 응답을 표시할 위치를 지정한다.
target 속성은 다음 값 중 하나를 가질 수 있다:
| 값 | 설명 |
| _blank | 응답이 새 창 또는 탭에 표시됩니다 |
| _self | 응답이 현재 창에 표시됩니다 |
| _parent | 응답이 상위 프레임에 표시됩니다 |
| _top | 응답이 창의 전체 본문에 표시됩니다 |
| framename | 응답이 명명된 iframe에 표시됩니다 |
기본값은 _self 이며, 이는 응답이 현재 창에서 열린다는 것을 의미한다.
| <!DOCTYPE html> <html> <body> <h2>form target 속성</h2> <p>이 양식을 제출하면 새 브라우저 탭에서 결과가 열립니다:</p> <form action="/action_page.php" target="_blank"> <label for="fname">이름:</label><br> <input type="text" id="fname" name="fname" value="길동"><br> <label for="lname">성:</label><br> <input type="text" id="lname" name="lname" value="홍"><br><br> <input type="submit" value="Submit"> </form> </body> </html> |
HTML method 속성
method 속성은 양식 데이터를 제출할 때 사용할 HTTP 메서드를 지정한다.
양식 데이터는 URL 변수(method="get") 또는 HTTP 사후 트랜잭션(method="post")으로 보낼 수 있다.
양식 데이터를 제출할 때 기본 HTTP 방법은 GET이다.
| <!DOCTYPE html> <html> <body> <h2>method 속성</h2> <p>이 form은 GET 방법을 사용하여 제출됩니다:</p> <form action="/action_page.php" target="_blank" method="get"> <label for="fname">이름:</label><br> <input type="text" id="fname" name="fname" value="길동"><br> <label for="lname">성:</label><br> <input type="text" id="lname" name="lname" value="홍"><br><br> <input type="submit" value="Submit"> </form> <p>제출한 후 양식 값이 새 브라우저 탭의 주소 표시줄에 표시됩니다.</p> </body> </html> |
GET에 대한 참고 사항:
- 이름/값 쌍으로 양식 데이터를 URL에 추가한다
- GET를 사용하여 중요한 데이터를 전송하지 마시오! (제출된 양식 데이터는 URL에 표시됩니다!)
- URL 길이가 제한된다(2048자)
- 사용자가 결과를 책갈피로 지정하려는 양식 제출에 유용한다
- GET는 Google의 쿼리 문자열과 같은 보안되지 않은 데이터에 적합하다
POST 시 참고 사항:
- HTTP 요청 본문 내에 양식 데이터를 추가한다(제출된 양식 데이터는 URL에 표시되지 않음)
- POST는 크기 제한이 없으며 대량의 데이터를 전송하는 데 사용할 수 있다.
- POST가 포함된 양식 제출은 책갈피로 지정할 수 없다
HTML form #autocomple 속성
form autocomplete 속성은 양식에 자동 완성 기능을 설정할지 여부를 지정한다.
자동 완성이 설정되어 있으면 브라우저는 사용자가 이전에 입력한 값을 기준으로 값을 자동으로 완료한다.
| <!DOCTYPE html> <html> <body> <h1>form autocomplete 속성</h1> <p>양식을 작성하고 제출한 후 페이지를 다시 로드하고 양식을 다시 작성하기 시작합니다. 그리고 자동 완성이 어떻게 작동하는지 확인합니다.</p> <p>그런 다음 자동 완성을 "꺼짐"으로 설정합니다.</p> <form action="/action_page.php" autocomplete="on"> <label for="fname">이름:</label> <input type="text" id="fname" name="fname"><br><br> <label for="email">이메일:</label> <input type="text" id="email" name="email"><br><br> <input type="submit"> </form> </body> </html> |
HTML form #novalidate 속성
novalidate 특성은 부울 특성이다.
form-data(input) 가 있는 경우 제출 시 유효성을 검사하지 않도록 지정한다.
| <!DOCTYPE html> <html> <body> <h1>form novalidate 속성</h1> <p>novalidate 특성은 제출 시 양식 입력의 유효성을 검사할 수 없음을 나타냅니다:</p> <form action="/action_page.php" novalidate> <label for="email">이메일:</label> <input type="email" id="email" name="email"><br><br> <input type="submit"> </form> <p><strong>참고사항:</strong> 양식 태그의 novalidate 특성은 Safari 10 이전 버전에서는 지원되지 않습니다.</p> </body> </html> |
<form> 속성 정리
| 속성 | 설명 |
| accept-charset | 양식 제출에 사용되는 문자 인코딩을 지정합니다 |
| action | 양식을 제출할 때 양식 데이터를 보낼 위치를 지정합니다 |
| autocomplete | 양식에 자동 완성 기능을 설정할지 여부를 지정합니다 |
| enctype | 폼 데이터를 서버에 제출할 때 폼 데이터를 인코딩하는 방법을 지정합니다(method="post"에만 해당) |
| method | 폼 데이터를 보낼 때 사용할 HTTP 메서드를 지정합니다 |
| name | 양식의 이름을 지정합니다 |
| novalidate | 제출 시 양식의 유효성을 검사하지 않도록 지정합니다 |
| rel | 연결된 리소스와 현재 문서 간의 관계를 지정합니다 |
| target | 양식을 제출한 후 수신된 응답을 표시할 위치를 지정합니다 |
지금까지 <form> 요소에서 사용되는 속성에 관하여 실습하고 개념을 정리하였다.
모두 하나씩 실습하시고 확인하시기 바랍니다.
모두화이팅입니다.!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > HTML 기본문법' 카테고리의 다른 글
| HTML input 유형-1 (0) | 2023.06.08 |
|---|---|
| HTML form 요소 (0) | 2023.06.07 |
| HTML Forms (0) | 2023.06.05 |
| HTML vs XHTML (0) | 2023.06.04 |
| HTML URL(Uniform Resource Locators) (0) | 2023.06.03 |
댓글