HTML / (56) Input form 속성

▶ 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