HTML 폼

<form> 요소

HTML <form>요소는 사용자 입력을 수집하는 데 사용되는 양식을 정의합니다.

HTML 양식은 양식 요소를 포함 합니다 .

양식 요소는 텍스트 필드, 확인란, 라디오 버튼, 제출 버튼 등과 같은 다양한 유형의 입력 요소입니다.

<form>
.
form elements
.
</form>

 

<input> 요소

<input>요소는 가장 중요한 형태 요소입니다.

<input>요소는에 따라 여러 가지 방법으로 표시 할 수있는 유형의 속성.

<input type = "text">	한 줄 텍스트 입력 필드를 정의합니다
<input type = "radio">	라디오 버튼을 정의합니다 (많은 선택 중 하나를 선택하기위한 것)
<input type = "submit">	제출 단추를 정의합니다 (양식 제출).

 

텍스트 입력

<input type="text">텍스트 입력을 위한 한 줄 입력 필드를 정의합니다 .

  First name:

  

  Last name:

  

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>

 

라디오 버튼 입력

<input type="radio">라디오 버튼을 정의 합니다 .

라디오 버튼을 사용하면 제한된 수의 선택 중 하나를 선택할 수 있습니다.

Male
Female
Other

<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>

 

제출 버튼

<input type="submit">양식 데이터를 양식 핸들러 에 제출 하기 위한 버튼을 정의 합니다 .

양식 핸들러는 일반적으로 입력 데이터를 처리하기위한 스크립트가있는 서버 페이지입니다.

양식 핸들러는 양식의 action 속성에 지정됩니다 .

First name:

Last name:

<form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>

 

동작 속성

이 action속성은 양식을 제출할 때 수행 할 작업을 정의합니다.

일반적으로 사용자가 제출 단추를 클릭하면 양식 데이터가 서버의 웹 페이지로 전송됩니다.

위의 예에서 양식 데이터는 "/action_page.php"라는 서버의 페이지로 전송됩니다. 이 페이지에는 양식 데이터를 처리하는 서버 측 스크립트가 포함되어 있습니다.

이 action속성을 생략하면 작업이 현재 페이지로 설정됩니다.

<form action="/action_page.php">

 

메소드 속성

이 method속성 은 양식 데이터를 제출할 때 사용할 HTTP 메소드 ( GET 또는 POST )를 지정합니다 .

<form action="/action_page.php" method="get">

<form action="/action_page.php" method="post">

 

GET을 언제 사용해야합니까?

양식 데이터를 제출할 때 기본 방법은 GET입니다.

그러나 GET을 사용하면 제출 된 양식 데이터가 페이지 주소 필드에 표시됩니다 .

/action_page.php?firstname=Mickey&lastname=Mouse

GET에 대한 참고 사항 :

• 이름 / 값 쌍으로 양식 데이터를 URL에 추가
• URL의 길이는 제한되어 있습니다 (2048 자)
• 민감한 데이터를 보내려면 절대 GET을 사용하지 마십시오! (URL에서 볼 수 있습니다)
• 사용자가 결과를 즐겨 찾기에 추가하려는 양식 제출에 유용
• GET은 Google의 쿼리 문자열과 같은 비보안 데이터에 적합합니다.

---

POST를 언제 사용해야합니까?

양식 데이터에 민감한 정보 나 개인 정보가 포함 된 경우 항상 POST를 사용하십시오. POST 메소드는 제출 된 양식 데이터를 페이지 주소 필드에 표시하지 않습니다.

POST에 대한 참고 사항 :

• POST에는 크기 제한이 없으며 대량의 데이터를 보내는 데 사용할 수 있습니다.
• POST가 포함 된 양식 제출은 북마크 할 수 없습니다.

 

이름 속성

각 입력 필드에는 name제출할 속성이 있어야합니다 .

name속성이 생략되었을 경우, 해당 입력 된 필드의 데이터가 전혀 전송되지 않는다.

이 예에서는 "성"입력 필드 만 제출합니다.

<form action="/action_page.php">
  First name:<br>
  <input type="text" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>

 

 

<fieldset>을 사용하여 양식 데이터 그룹화

<fieldset>소자 형태로 그룹과 관련된 데이터를 저장하는 데 사용된다.

<legend>요소는 캡션 정의 <fieldset> 요소를.

<form action="/action_page.php">
  <fieldset>
    <legend>Personal information:</legend>
    First name:<br>
    <input type="text" name="firstname" value="Mickey"><br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>