데이터 제출을 위한 입력 제출, 버튼 및 Enter 키에 대한 자세한 설명

최근 프로젝트에서는 많은 양식 제출이 사용되었으며, 입력, 버튼, 제출, 심지어 Enter 키로도 양식 제출이 실행될 수 있다는 사실을 발견했습니다. 아래에서는 이들의 사용 차이점에 대해 설명하겠습니다.

<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]의 기본값은 텍스트이므로 첫 번째 입력은 텍스트 상자로 표시됩니다.

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

<input name=&#39;btn&#39; value=&#39;提交&#39; type=&#39;submit&#39;>

제출 후 URL은 localhost:3980/input.html?name=222222&btn=Submit

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

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

2. button[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 키를 수락하여 양식을 제출해야 합니다.

4. 양식 제출 방지

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

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

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

HTML 비디오 튜토리얼

위 내용은 데이터 제출을 위한 입력 제출, 버튼 및 Enter 키에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!