입력 제출, 버튼 및 주요 제출 데이터 입력에 대한 자세한 설명

<form>
  <input name="name">
  <input type="submit" value="提交">
</form>

이런 방식으로 제출하면 입력 값이 22222222일 때 나중에 제출하는 URL은 localhost:3980/input.html?name=222222가 됩니다.
주목할만한 세부 사항이 있습니다:

type=submit을 설정하면 입력 컨트롤이 버튼이 되고 표시되는 텍스트는 해당 값이 됩니다.
form[method]의 기본값은 GET이므로 제출 후 페이지로 이동하려면 GET 메서드를 사용합니다.
input[type]의 기본값은 텍스트이므로 첫 번째 입력은 텍스트 상자로 표시됩니다.

입력은 실제로 초기 웹의 투박한 디자인에서 유래한 입력 컨트롤을 수정한 버튼입니다. 이름을 설정하여 이를 확인할 수 있습니다:

2f525228795bdf9e610202cf159ae6a2

Submit 최종 URL은 localhost:3980/input.html?name=222222&btn=submit

URL이 /?key=foo&btn=ok입니다. 버튼으로서의 입력 컨트롤도 양식 입력으로 서버에 제출됩니다. 대화형 컨트롤인가요, 아니면 데이터 컨트롤인가요? 위치가 좀 불분명하네요. 또한 스타일을 맞춤설정하기 어렵고 다른 태그의 컨테이너로 사용할 수 없으므로 입력을 양식 제출 버튼으로 사용하지 않는 것이 좋습니다.

참고: 입력의 유형 속성은 버튼일 수도 있습니다. 이 경우 버튼일 뿐이며 양식 제출을 트리거하지 않습니다.

2. 버튼[tpe=submit] 버튼의 의미는 매우 명확합니다. 즉, 버튼에는 데이터가 포함되어 있지 않으며 해당 기능은 사용자 상호 작용입니다. 그러나 유형 및 값 속성도 있습니다. type의 기본값은 submit이므로 버튼을 클릭하면 양식이 제출됩니다.

<form>
 <input name=&#39;key&#39;>
 <button>确定</button>
</form>

IE 브라우저 호환을 수행하는 경우 IE에서 버튼[type]의 기본값을 기억하세요. 은 버튼입니다. 이는 단지 버튼일 뿐이며 양식 제출을 실행하지 않는다는 의미입니다.

또한 요소 콘텐츠를 설정하여 버튼의 텍스트를 지정합니다. 이는 버튼이 임의의 HTML 태그를 포함할 수 있는 컨테이너 컨트롤이며 스타일을 사용자 정의하기가 더 쉽다는 것을 의미합니다. 이것이 Bootstrap 문서에서 버튼이 예제로 광범위하게 사용되는 이유 중 하나입니다.

그런데 버튼이 지저분해지네요. 버튼은 이름과 값을 설정할 수 있습니다. 양식이 제출되면 값이 양식 데이터로 서버에 제출됩니다. IE에서는 버튼의 시작 태그와 끝 태그 사이의 내용도 이름에 해당하는 값으로 서버에 제출됩니다. 버튼과 입력 사이의 유사점은 여기서 끝나지 않습니다. 버튼을 type=reset으로 설정할 수도 있습니다. 버튼을 클릭하면 양식이 재설정됩니다(이는 매우 유용합니다). w3school에서는 다음과 같은 예를 제공합니다.

<form action="form_action.asp" method="get">
 First name: <input type="text" name="fname" />
 Last name: <input type="text" name="lname" />
 <button type="submit" value="Submit">Submit</button>
 <button type="reset" value="Reset">Reset</button>
</form>

버튼에 대해서는 별로 말할 것도 없습니다. 양식을 제출하려면 버튼을 대화형 버튼으로 사용하는 것이 좋습니다. IE와 호환되도록 type=submit 설정에도 주의하세요.

Enter 키를 눌러 양식 제출

Enter 키를 누르면 양식을 제출할 수 있습니다! 그러나 Enter 키를 사용하여 모든 양식을 제출할 수 있는 것은 아닙니다. HTML2.0 표준을 살펴보겠습니다.

양식에 한 줄의 텍스트 입력 필드가 하나만 있는 경우 사용자 에이전트는 양식 제출 요청으로 해당 필드의 Enter를 수락해야 합니다.

양식에 한 줄의 텍스트 입력 컨트롤만 있는 경우 사용자 에이전트는 양식을 제출하려면 Enter 키를 수락해야 합니다.

"한 줄"은 텍스트 영역이 아닌 텍스트 유형을 의미하며, 텍스트 영역에 양식을 제출하기 위해 Enter 키를 누르는 것은 허용되지 않습니다. 실제로 실제로 로그인 페이지와 같이 Enter를 사용하여 여러 개의 한 줄 입력을 제출할 수도 있습니다.

4. 양식 제출 방지

양식 제출 방지도 일반적인 주제이며 일반적으로 클라이언트 측 양식 유효성 검사에 사용됩니다. 일반적인 방법은 onsubmit을 설정하는 것입니다.

<form onsubmit="return false;">
 <input name=&#39;key&#39;>
 <input value=&#39;ok&#39; type=&#39;submit&#39;>
</form>

제출을 방지하려면 일련의 onsubmit 문 끝에 false를 반환하기만 하면 됩니다. 제출 방지 여부를 결정하기 위해 메소드를 호출하려면 여기에서 메소드의 반환 값을 반환해야 합니다.

<form onsubmit="return false;">
 <input name=&#39;key&#39;>
 <input value=&#39;ok&#39; type=&#39;submit&#39;>
</form>

입력 제출, 버튼 및 키 제출 데이터 입력에 대한 자세한 내용을 보려면 다음을 참조하세요. PHP 중국어에 주목하세요!