웹프로그래밍/HTML

HTML Form 속성

유노brain 2023. 9. 7. 10:40
반응형

Action 속성

action 속성은 양식이 제출될 때 수행되는 작업을 뜻합니다.

일반적으로 사용자가 제출 버튼을 클릭하면 양식 데이터가 서버의 파일로 전송이 됩니다.

<!DOCTYPE html>
<html>
<body>

<h2>HTML Forms</h2>

<form action="/action_ex_page.php">
  <label for="fname">ID:</label><br>
  <input type="text" id="ID" name="info" value="goodguy"><br>
  <label for="lname">password:</label><br>
  <input type="text" id="password" name="info" value="asdf1234"><br><br>
  <input type="submit" value="Submit">
</form> 

<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_ex_page.php".</p>

</body>
</html>

위의 예시코드에서는 form 데이터가 action_ex_page.php 파일로 전송이 된다.

 

Target 속성

target 속성의 경우 양식 제출 후의 반응을 어디에서 보여줄 것인지를 보여주는 속성이다.

target 속성은 아래의 Value들 중 하나이다.

Value Description
_blank 새로운 윈도우나 탭에서 열림
_self 현재의 윈도우 창에서 열림
_parent 부모 프레임 안에서 창이 열림
_top 윈도우 창 전체 표시
framename iframe에 이름이 설정된 위치에서 표시 
<!DOCTYPE html>
<html>
<body>

  <h2>Target Attribute</h2>
  
  <p>제출 버튼 누른 다음의 상태를 확인하세요</p>
  <form action="action_ex_page.php" target="_blank"></form>
  <label for="ID">ID:</label><br>
  <input type="text" id="ID" name="information" value="아이디를 입력하시오"><br>
  <label for="PW">Password:</label><br>
  <input type="text" id="PW" name="information" value="비밀번호를 입력하시오"><br>

  <p></p>

</body>
</html>

위의 코드는 target = "_blank"를 사용한 코드이다.

 

Method 속성

method 속성은 양식으로부터 데이터를 제출할 때 사용할 HTTP 메소드를 지정한다.

양식 데이터는 URL 변수(method="get") 또는 HTTP post 트렌섹션(method="post")로 전송할 수 있다.

<!DOCTYPE html>
<html>
<body>

  <h2>Target Attribute</h2>
  
  <p>제출 버튼 누른 다음의 상태를 확인하세요</p>
  <form action="action_ex_page.php" target="_blank" method="get"></form>
  <label for="ID">ID:</label><br>
  <input type="text" id="ID" name="information" value="아이디를 입력하시오"><br>
  <label for="PW">Password:</label><br>
  <input type="text" id="PW" name="information" value="비밀번호를 입력하시오"><br>

  <p></p>

</body>
</html>

위의 방법은 method="get"을 진행한 코드이다.

 

Autocomplete 속성

autocomplete 속성은 자동완성 기능을 on/off 여부를 지정한다.

autocomplete 속성을 on 할 경우 브라우저는 사용자가 이전에 입력 값을 기반으로 자동으로 값을 완성한다.

<!DOCTYPE html>
<html>

<body>

  <h2>The form autocomplete attribute</h2>

  <p>Fill in and submit the form, then reload the page,
    start to fill in the form again - and see how autocomplete works.</p>
  <form action="action_ex_page.php" autocomplete="on"></form>
  <label for="ID">ID:</label><br>
  <input type="text" id="ID" name="information" value="아이디를 입력하시오"><br>
  <label for="PW">Password:</label><br>
  <input type="text" id="PW" name="information" value="비밀번호를 입력하시오"><br>

  <p></p>

</body>

</html>

autocomplete 를 on 한 코드이다.

 

반응형