이 장에서는 HTML <input> 요소에 대한 다양한 form* 속성에 대해 설명한다.
HTML input #form 속성
input form 속성은 <input> 요소가 속한 형식을 지정한다.
이 속성의 값은 해당 특성이 속한 <form> 요소의 id 특성과 같아야 합니다.
| <!DOCTYPE html> <html> <body> <h1> input form 속성</h1> <p>양식 특성은 입력 요소가 속하는 양식을 지정합니다.</p> <form action="/action_page.php" id="form1"> <label for="fname">이름:</label> <input type="text" id="fname" name="fname"><br><br> <input type="submit" value="Submit"> </form> <p>아래 "성" 필드는 양식 요소 외부에 있지만 여전히 양식의 일부입니다.</p> <label for="lname">성:</label> <input type="text" id="lname" name="lname" form="form1"> </body> </html> |
HTML input form #formaction 속성
input form formaction 속성은 양식을 제출할 때 입력을 처리할 파일의 URL을 지정gks다.
참고: 이 속성은 <form> 요소의 작업 속성을 재정의한다.
양식 작업 속성은 제출 및 이미지 입력 유형과 함께 작동한다.
| <!DOCTYPE html> <html> <body> <h1> input formaction 속성</h1> <p>formaction 속성은 양식을 제출할 때 입력을 처리할 파일의 URL을 지정합니다.</p> <form action="/action_page.php"> <label for="fname">이름:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">성:</label> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="Submit"> <input type="submit" formaction="/action_page2.php" value="Submit as Admin"> </form> </body> </html> |
HTML input form #formenctype 속성
input form formentype 속성은 제출할 때 폼 데이터를 인코딩하는 방법을 지정한다(method="post"를 사용하는 폼에만 해당).
참고: 이 속성은 <form> 요소의 encytype 속성을 재정의합니다.
formentype 속성은 input type='submit, 'image' 와 함께 작동한다.
| <!DOCTYPE html> <html> <body> <h1> input formenctype 속성</h1> <p>formentype 속성은 제출 시 양식 데이터를 인코딩하는 방법을 지정합니다.</p> <form action="/action_page_binary.asp" method="post"> <label for="fname">이름 :</label> <input type="text" id="fname" name="fname"><br><br> <input type="submit" value="Submit"> <input type="submit" formenctype="multipart/form-data" value="Submit as Multipart/form-data"> </form> </body> </html> |
HTML input form #formmethod 속성
input form formmethod 속성은 폼 데이터를 작업 URL로 보내기 위한 HTTP 메서드를 정의한다.
참고: 이 속성은 <form> 요소의 메서드 속성을 재정의한다.
formmethod 속성은 input type='submit', 'image' 와 함께 작동한다.
form-data는 URL 변수(http="get") 또는 HTTP post 트랜잭션(http="post")으로 보낼 수 있다.
"get" 방법에 대한 참고 사항:
- 이 메서드는 name/value 쌍으로 URL에 양식 데이터를 추가한다.
- 이 방법은 사용자가 결과를 북마크하려는 양식 제출에 유용한다.
- URL에 저장할 수 있는 데이터의 양에 제한이 있으므로(브라우저마다 다름) 모든 양식 데이터가 올바르게 전송되는지 확신할 수 없다.
- 중요한 정보를 전달하기 위해 "get" 방법을 사용하지 마십시오! (암호 또는 기타 중요한 정보는 브라우저의 주소 표시줄에 표시된다)
"post" 방법에 대한 참고 사항:
- 이 메서드는 form-data를 HTTP post 트랜잭션으로 보낸다.
- "post" method를 사용한 양식 제출은 책갈피로 지정할 수 없다.
- "post" 방법은 "get" 방법보다 더 강력하고 안전하며 "post"에는 크기 제한이 없다.
| <!DOCTYPE html> <html> <body> <h1> input formmethod 속성</h1> <p>formmethod 속성은 폼 데이터를 작업 URL로 보내기 위한 HTTP 메소드를 정의합니다.</p> <form action="/action_page.php" method="get" target="_blank"> <label for="fname">이름:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">성:</label> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="Submit using GET"> <input type="submit" formmethod="post" value="Submit using POST"> </form> </body> </html> |
HTML input form #formtarget 속성
input formtarget 속성은 양식을 제출한 후 수신된 응답을 표시할 위치를 나타내는 이름 또는 키워드를 지정한다.
참고: 이 속성은 <form> 요소의 대상 속성을 재정의한다.
formtarget 속성은 제출 및 이미지와 같은 입력 유형에서 작동한다.
| <!DOCTYPE html> <html> <body> <h1> input formtarget 속성</h1> <p>양식 대상 특성은 양식을 제출한 후 수신된 응답을 표시할 위치를 나타내는 이름 또는 키워드를 지정합니다.</p> <form action="/action_page.php"> <label for="fname">이름:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">성:</label> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="Submit"> <input type="submit" formtarget="_blank" value="Submit to a new window/tab"> </form> </body> </html> |
HTML input form #formnovalidate 속성
input formnovalidate 속성은 제출할 때 <input> 요소의 유효성을 검사하지 않도록 지정한다.
참고: 이 특성은 <form> 요소의 novalidate 특성을 재정의한다.
formnovalidate 특성은 input type='submit' 과 함께 작동한다.
| <!DOCTYPE html> <html> <body> <h1> input formnovalidate 속성</h1> <form action="/action_page.php"> <label for="email">이메일을 입력하세요:</label> <input type="email" id="email" name="email" required><br><br> <input type="submit" value="Submit"> <input type="submit" formnovalidate="formnovalidate" value="Submit without validation"> </form> <p><strong>참고: </strong> Safari 10(또는 이전 버전)에서는 입력 태그의 formnovalidate 특성이 지원되지 않습니다.</p> </body> </html> |
HTML input form #novalidate 속성
novalidate 특성은 <form> 속성입니다.
유효성 검사가 있는 경우 제출할 때 모든 양식 데이터를 유효성 검사하지 않도록 지정하지 않습니다.
| <!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" required><br><br> <input type="submit" value="Submit"> </form> <p><strong>참고: </strong> Safari 10(또는 이전 버전)에서는 양식 태그의 novalidate 특성이 지원되지 않습니다.</p> </body> </html> |
지금가지 HTML input form* 속성에 대하여 살펴보았다.
반드시, 꼭, 손으로 코딩을 하며 익히고, 머리로 익히며 실습하기를 추천합니다.
모두 화이팅입니다!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > HTML 기본문법' 카테고리의 다른 글
| HTML SVG 그래픽스 (0) | 2023.06.17 |
|---|---|
| HTML 캔버스 그래픽스(Canvas Graphics) (0) | 2023.06.16 |
| HTML input 속성-3 (0) | 2023.06.14 |
| HTML input 속성-2 (0) | 2023.06.13 |
| HTML input 속성-1 (0) | 2023.06.12 |
댓글