▶ HTML <input> 요소의 다양한 form 속성을 설명한다.
■ form 속성
▶ input "form" 속성은 <input> 요소가 속한 form을 지정한다.
▶ 속성값은 속해 있는 <form> 요소의 "id" 속성과 같아야 한다.
<form action="/action_page.php" id="form1">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
</form>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" form="form1">실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_form
■ formaction 속성
▶ input "formaction" 속성은 form이 제출될 때 input을 처리할 파일의 url를 지정한다.
※ 속성은 <form> 요소의 "action" 속성을 재정의한다.
▶ "formaction" 속성은 submit과 image input 유형과 같이 동작한다.
<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</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>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_formaction
■ formenctype 속성
▶ input "formenctype" 속성은 제출될 때 form 데이터를 인코딩하는 방법을 지정한다. ( method="post"가 있는 양식에만 해당 )
※ 속성은 <form> 요소의 "enctype" 속성을 재정의한다.
▶ "formenctype" 속성은 submit 과 image input 요소와 함게 동작한다.
<form action="/action_page_binary.asp" method="post">
<label for="fname">First name:</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>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_formenctype
■ formmethod 속성
▶ input "formmethod" 속성은 form 데이터를 action URL로 전송하기 위한 HTTP 메소드를 정의한다.
※ 속성은 <form> 요소의 "method" 속성을 재정의한다.
▶ "formmethod" 속성은 submit, image input 유형과 함께 동작한다.
▶ form 데이터는 URL 변수 ( method="get" ) 또는 HTTP post 트랜잭션 ( method="post" )으로 보낼 수 있다.
□ "get" 메소드
▶ "get" 메소드는 form 데이터를 이름/값 쌍의 URL에 추가한다.
▶ 사용자가 결과를 북마크하려는 form 제출에 유용하다.
▶ URL에 넣을 수 있는 데이터의 양에는 제한이 있으므로( Browser마다 다름 ) 모든 form 데이터가 올바르게 전송되는지 확신할 수 없다.
▶ 중요한 정보를 전달하기 위해 "get" 방법을 사용하지 않는다. ( 암호 또는 기타 민감한 정보는 Browser의 주소 표시줄에 표시된다. )
□ "post" 메소드
▶ "post" 메소드는 form 데이터를 HTTP post 트랜잭션으로 보낸다.
▶ "post" 방법을 사용한 form 제출은 북마크할 수 없다.
▶ "post" 방법은 "get"보다 강력하고 안전하며 "post"에는 크기 제한이 없다.
<form action="/action_page.php" method="get">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</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>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_formmethod
■ formtarget 속성
▶ input "formtarget" 속성은 form을 제출한 후 수신된 응답을 표시할 위치를 나타내는 이름이나 키워드를 지정한다.
※ 속성은 <form> 요소 "target" 속성을 재정의한다.
▶ "formtarget" 속성은 submit 및 image input 유형과 함께 동작한다.
<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</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>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_formtarget
■ formnovalidate 속성
▶ input "formnovalidate" 속성은 제출 시 <input> 요소의 유효성을 검사하지 않도록 지정한다.
※ 속성은 <form> 요소의 "novalidate" 속성을 재정의한다.
▶ "formnovalidate" 속성은 submit input 유형과 함께 동작한다.
<form action="/action_page.php">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
<input type="submit" formnovalidate="formnovalidate"
value="Submit without validation">
</form>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_formnovalidate
■ novalidate 속성
▶ "novaildate" 속성은 <form> 속성이다.
▶ "novalidate"가 있는 경우 제출 시 모든 form 데이터의 유효성을 검사하지 않아야 함을 지정한다.
<form action="/action_page.php" novalidate>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
</form>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_form_novalidate
출처 : https://www.w3schools.com/html/html_form_attributes_form.asp
HTML Input form* Attributes
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
'HTML' 카테고리의 다른 글
| HTML / (55) Input 속성 (0) | 2023.03.06 |
|---|---|
| HTML / (54) Input Type (0) | 2023.03.06 |
| HTML / (53) form 요소 (0) | 2023.03.01 |
| HTML / (52) 폼 속성 (0) | 2023.03.01 |
| HTML / (51) Forms (0) | 2023.02.28 |
