데이터 제출을 위한 입력, 제출, 버튼, Enter 키의 차이 분석 예시

이 기사에서는 입력, 제출, 버튼 및 데이터 제출을 위한 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]의 기본값은 텍스트이므로 첫 번째 입력은 텍스트 상자로 표시됩니다.

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

제출 후 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 키를 누르는 것은 허용되지 않습니다. 실제로 실제로 로그인 페이지와 같이 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>

관련 권장 사항:

양식 제출 데이터 문제

데이터 제출에 대한 질문

html

에서 입력 형식을 제어하는 ​​방법의 예

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