javascript - tag - label for name




HTML 양식의 기본 제출 버튼은 어떻게 결정됩니까? (10)

11 개의 submit 버튼이있는 폼이 있었고, 사용자가 enter를했을 때 첫 번째 submit 버튼을 사용했습니다. 다른 곳에서는 폼에 하나 이상의 제출 버튼을 두는 것이 좋지 않습니다 (나쁜 습관).이 작업을 수행하는 가장 좋은 방법은 양식의 유일한 제출 버튼으로 기본으로 원하는 버튼을 사용하는 것입니다. 다른 버튼은 "TYPE = BUTTON"으로 만들어 져야하며 Javascript에서 자신의 제출 루틴을 호출하는 onClick 이벤트가 추가되어야합니다. 이 같은 :-

<SCRIPT Language="JavaScript">
function validform()
{
  // do whatever you need to validate the form, and return true or false accordingly
}

function mjsubmit()
{
  if (validform()) { document.form1.submit(); return true;}
  return false;
}
</SCRIPT>
<INPUT TYPE=BUTTON NAME="button1" VALUE="button1" onClick="document.form1.submitvalue='button1'; return mjsubmit();">
<INPUT TYPE=BUTTON NAME="button2" VALUE="button2" onClick="document.form1.submitvalue='button2'; return mjsubmit();">
<INPUT TYPE=SUBMIT NAME="button3" VALUE="button3" onClick="document.form1.submitvalue='button3'; return validform();">
<INPUT TYPE=BUTTON NAME="button4" VALUE="button4" onClick="document.form1.submitvalue='button4'; return mjsubmit();">

여기서는 button3이 기본값이며 다른 단추로 프로그래밍 방식으로 양식을 제출하더라도 mjsubmit 루틴이이를 확인합니다. HTH.

양식이 제출되었지만 특정 버튼 (예 :

  • Enter 키 를 눌러
  • JS에서 HTMLFormElement.submit() 사용

브라우저는 여러 개의 제출 버튼 중 하나를 눌렀을 때 사용할 단추를 결정하는 방법은 무엇입니까?

이것은 두 가지 수준에서 중요합니다.

  • 제출 버튼에 첨부 된 onclick 이벤트 핸들러 호출
  • 웹 서버로 다시 전송 된 데이터

지금까지의 나의 실험 결과는 다음과 같다.

  • Enter 를 누르면 Firefox, Opera 및 Safari는 양식의 첫 번째 제출 버튼을 사용합니다.
  • Enter 키 를 누를 때 IE는 알아낼 수없는 조건에 따라 첫 번째 제출 단추 또는 없음을 사용합니다.
  • 이 모든 브라우저는 JS 제출을 전혀 사용하지 않습니다.

표준은 무엇을 말하고 있습니까?

그것이 도움이된다면, 여기에 내 테스트 코드가있다. (PHP는 내 질문 자체가 아니라 내 테스트 방법에만 관련이있다.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>

<body>

<h1>Get</h1>
<dl>
<?php foreach ($_GET as $k => $v) echo "<dt>$k</dt><dd>$v</dd>"; ?>
</dl>

<h1>Post</h1>
<dl>
<?php foreach ($_POST as $k => $v) echo "<dt>$k</dt><dd>$v</dd>"; ?>
</dl>

<form name="theForm" method="<?php echo isset($_GET['method']) ? $_GET['method'] : 'get'; ?>" action="<?php echo $_SERVER['SCRIPT_NAME']; ?>">
    <input type="text" name="method" />
    <input type="submit" name="action" value="Button 1" onclick="alert('Button 1'); return true" />
    <input type="text" name="stuff" />
    <input type="submit" name="action" value="Button 2" onclick="alert('Button 2'); return true" />
    <input type="button" value="submit" onclick="document.theForm.submit();" />
</form>

</body></html>

Andrezj는 꽤 많이 잡혔습니다 ...하지만 여기에는 쉬운 크로스 브라우저 솔루션이 있습니다.

다음과 같은 형식을 취하십시오.

<form>
    <input/>
    <button type="submit" value="some non-default action"/>
    <button type="submit" value="another non-default action"/>
    <button type="submit" value="yet another non-default action"/>

    <button type="submit" value="default action"/>
</form>

이 리팩터링 :

<form>
    <input/>

    <button style="overflow: visible !important; height: 0 !important; width: 0 !important; margin: 0 !important; border: 0 !important; padding: 0 !important; display: block !important;" type="submit" value="default action"/>

    <button type="submit" value="some non-default action"/>
    <button type="submit" value="another non-default action"/>
    <button type="submit" value="yet another non-default action"/>
    <button type="submit" value="still another non-default action"/>

    <button type="submit" value="default action"/>
</form>

W3C 사양은 여러 제출 단추가 유효 함을 나타내므로 사용자 에이전트가 처리해야하는 방법에 대한 지침을 생략하므로 브라우저 제조업체는 적합하다고 생각하는대로 구현해야합니다. 폼에 첫 번째 제출 단추를 제출하거나 현재 포커스가있는 양식 필드 다음에 다음 제출 단추를 제출할 것입니다.

불행하게도 단순히 디스플레이 스타일을 추가하는 것 : none; W3C 스펙이 숨겨진 요소가 사용자 상호 작용에서 제외되어야 함을 나타내므로 작동하지 않습니다. 대신 일반 시야에 숨기십시오!

위의 예는 생산에 투입된 솔루션의 예입니다. Enter 키를 누르면 기본값 이외의 다른 값이 있고 DOM의 기본 제출 버튼 앞에있는 경우에도 기본 양식 제출이 예상대로 작동합니다. 자바 스크립트 핸들러를 피하면서 명시 적 사용자 입력과 마우스 / 키보드 상호 작용을위한 보너스.

참고 : 양식을 탭 이동해도 시각적 요소에 대한 포커스는 표시되지 않지만 보이지 않는 버튼은 여전히 ​​선택됩니다. 이 문제를 피하려면 tabindex 속성을 적절하게 설정하고 보이지 않는 제출 버튼에서 tabindex 속성을 생략하십시오. 이러한 스타일을 중요하게 장려하는 것은 어떨지 모르지만 프레임 워크 나 기존 단추 스타일이이 수정 사항을 방해하지 못하게 해야합니다 . 또한 인라인 스타일은 분명히 형편이 좋지 않지만 여기서 컨셉을 증명하고 있습니다 ... 프로덕션 코드를 작성하지 않습니다.


Javascript (예 : formElement.submit() 또는 이와 동등한 항목)를 통해 양식을 제출하면 제출 단추가 모두 성공한 것으로 간주되지 않고 제출 된 데이터에 해당 값이 포함되지 않습니다. submitElement.click() 을 사용하여 양식을 제출하면 참조가 있던 제출이 활성으로 간주되므로 제출 단추가 모호하지는 않지만 실제로는 질문에 대한 책임하에 있지는 않으나 첫 번째 부분을 읽고 JS 양식 제출을 통해 제출 단추를 성공적으로 만드는 방법에 대해 궁금해 할 것입니다. 물론 form의 onsubmit 처리기는 form.submit() 통해 그렇게하지 않지만 여전히이 방법으로 실행됩니다. 그것은 물고기의 또 다른 주전자입니다 ...)

textarea가 아닌 필드에서 Enter 키를 눌러 양식을 제출하면 사실상 여기에서 원하는 것을 결정하기 위해 사용자 에이전트에게 전달됩니다. specs 은 텍스트 입력 필드에서 Enter 키를 사용하여 양식을 제출하는 것에 대해서는 아무 것도 말하지 않습니다 (버튼을 탭하고 공백을 사용하여 활성화하면 그 특정 제출 버튼이 명확하게 사용되므로 아무런 문제가 없습니다). 그것이 말하는 것은 제출 버튼이 활성화 될 때 양식을 제출해야한다는 것입니다. 예를 들어 텍스트 입력이 양식을 제출할 때와 같이 입력 할 필요조차 없습니다.

나는 인터넷 익스플로러가 소스에 처음으로 나타나는 제출 버튼을 선택한다고 믿는다; 파이어 폭스와 오페라가 가장 낮은 tabindex를 가진 버튼을 선택했다는 느낌이 들었다. 또한 제출물에 기본값이 아닌 속성 IIRC가 있는지 여부와 관련하여 몇 가지 합병증이 있습니다.

제거해야 할 점은 여기에서 일어나는 일에 대해 정의 된 표준이 없으며 브라우저의 변덕에 완전히 달려 있다는 것입니다. 따라서 가능한 한 특정 행동에 의존하는 것을 피하십시오. 만약 당신이 정말로 알아야만한다면, 아마도 다양한 브라우저 버전의 동작을 발견 할 수있을 것입니다. 그러나 제가 잠시 뒤를 돌아 보았을 때, 꽤 복잡한 상황이있었습니다 (물론 새로운 브라우저 버전으로 변경 될 수 있습니다). 가능하면 피해야합니다!


귀하의 의견 :

결과적으로 동일한 스크립트에 여러 양식이 제출되면 제출 단추를 사용하여 구별 할 수 없습니다.

각 양식에 <input type="hidden" value="form_name" /> 놓습니다.

javascript로 제출하는 경우 : 버튼에 이벤트를 클릭하지 않고 양식에 제출 이벤트를 추가하십시오. Saavy 사용자는 마우스를 자주 만지지 않습니다.


내 요리법 :

<form>
<input type=hidden name=action value=login><!-- the magic! -->

<input type=text name=email>
<input type=text name=password>

<input type=submit name=action value=login>
<input type=submit name=action value="forgot password">
</form>

버튼 중 아무 것도 클릭하지 않으면 기본 숨김 필드를 보냅니다.

사용자가 클릭하면 선호도를 가지며 값이 전달됩니다.


내가 같은 페이지로 리디렉션 된의 중간에 버튼을 제출했기 때문에 나는 다음과 같이 다른 페이지로 복종했다.

<button type="submit" onclick="this.form.action = '#another_page'">More</button>

사용자가 Enter 키를 누를 때이 버튼이 다른 제출 버튼 대신 클릭되었습니다.

그래서 여러 개의 제출 버튼과 다른 가시성 옵션을 가진 from을 생성하고 어떤 버튼이 클릭되었는지 경고하는 onclick 이벤트를 생성하여 원시 테스트를 수행했습니다. https://jsfiddle.net/aqfy51om/1/

테스트에 사용한 브라우저 및 운영체제 :

WINDOWS

  • Google 크롬 43 (google : D)
  • Mozilla Firefox 38
  • Internet Explorer 11
  • 오페라 30.0

OSX

  • Google 크롬 43
  • 사파리 7.1.6

대부분의 브라우저는 숨겨진 컨테이너 내부에 "보이는"세 번째 버튼을 클릭 한 exept IE 및 Safari에 적용된 가시성 옵션에도 불구하고 첫 번째 버튼을 클릭했습니다.

<div style="width: 0; height: 0; overflow: hidden;">
    <button type="submit" class="btn btn-default" onclick="alert('Hidden submit button #3 was clicked');">Hidden submit button #3</button>
</div>

그래서 나 자신을 사용하려고하는 나의 제안은 다음과 같다.

양식에 다른 의미의 제출 버튼이 여러 개있는 경우 다음 중 하나의 양식 시작 부분에 기본 작업과 함께 제출 버튼을 포함하십시오.

  1. 완전히 볼 수 있음
  2. style="width: 0; height: 0; overflow: hidden;" 으로 컨테이너에 래핑 됨

편집 다른 옵션은 버튼을 오프셋 할 수 있습니다 (여전히 from의 시작 부분에 있음). style="position: absolute; left: -9999px; top: -9999px;" , 그냥 IE에서 그것을 시도 - 일했다,하지만 난 그게 예를 들어, 인쇄를 망칠 수있는 다른 생각을 몰라.


단일 폼에 여러 제출 단추가 있고 사용자가 텍스트 필드에서 양식을 전송하기 위해 Enter 키를 누르면이 코드는 키 누르기 이벤트에서 양식의 submit 이벤트를 호출하여 기본 기능을 대체합니다. 그 코드는 다음과 같습니다.

$('form input').keypress(function(e){

    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)){ $(e.target).closest('form').submit(); return false; }
    else return true;

});

이것은 이제 flexbox 사용하여 해결할 수 있습니다.

HTML

<form>
    <h1>My Form</h1>
    <label for="text">Input:</label>
    <input type="text" name="text" id="text"/>

    <!-- Put the elements in reverse order -->
    <div class="form-actions">
        <button>Ok</button> <!-- our default action is first -->
        <button>Cancel</button>
    </div>
</form>

CSS

.form-actions {
    display: flex;
    flex-direction: row-reverse; /* reverse the elements inside */
}

설명
flex 상자를 사용하면 display: flex 를 사용하는 컨테이너에서 CSS 규칙 : flex-direction: row-reverse 를 사용하여 요소 순서를 flex-direction: row-reverse 있습니다. CSS 나 숨겨진 요소가 필요 없습니다. flexbox를 지원하지 않는 구식 브라우저의 경우, 여전히 실행 가능한 솔루션을 얻을 수 있지만 요소는 되돌릴 수 없습니다.

데모
http://codepen.io/Godwin/pen/rLVKjm


HTML 4 사양에서 :

양식에 두 개 이상의 제출 버튼이 포함되어있는 경우 활성화 된 제출 버튼 만 성공합니다.

즉, 두 개 이상의 제출 버튼이 있고 아무 것도 활성화되지 않은 (클릭 한) 경우 아무 것도 성공하지 못합니다.

그리고 저는 이것이 합리적이라고 주장 할 것입니다 : 다중 제출 버튼이있는 거대한 양식을 상상해보십시오. 상단에는 '이 레코드 삭제'버튼이 있습니다. 그러면 많은 입력이 이어지며 하단에는 '이 레코드 업데이트'버튼이 있습니다. 사용자가 폼 맨 아래의 필드에 엔터를 치면 그가 "이 레코드 삭제"를 암시 적으로 쳤을 것입니다.

그러므로 사용자가 정의하지 않은 첫 번째 또는 다른 버튼을 사용하는 것은 좋지 않습니다. 그럼에도 불구하고 브라우저는 물론 그렇게합니다.


편집 : 죄송합니다,이 대답을 쓰고있을 때 나는 일반적인 의미에서 버튼을 제출하는 것에 대해 생각하고있었습니다. 아래의 대답은 하나의 type="submit" 만 남기고 다른 하나는 type="button" 변경하기 때문에 여러 type="submit" 버튼에 관한 것이 아닙니다. 나는 그 type 을 변경할 수있는 누군가를 돕기 위해 참조로 여기에 답을 남깁니다 :

enter를 눌렀을 때 눌려진 버튼을 확인하려면 type="submit" 표시하고 다른 버튼은 type="button" 표시합니다. 예 :

<input type="button" value="Cancel" />
<input type="submit" value="Submit" />






standards