programing

HTML 폼의 디폴트 송신 버튼은 어떻게 결정됩니까?

copyandpastes 2022. 11. 8. 21:39
반응형

HTML 폼의 디폴트 송신 버튼은 어떻게 결정됩니까?

폼이 송신되었지만, 특정의 버튼에 의해서 송신되지 않은 경우(예:

  • 눌러서
  • 를 사용합니다.HTMLFormElement.submit()JSJS의

브라우저는 여러 개의 송신 버튼 중 어떤 버튼을 눌러야 하는지 어떻게 판단합니까?

이는 다음 두 가지 수준에서 중요합니다.

  • onclick[ ]버튼에
  • 웹 서버로 반송되는 데이터

지금까지의 실험에서는, 다음과 같이 나타났습니다.

  • 를 누르면 Firefox, Opera 및 Safari가 폼의 첫 번째 제출 버튼을 사용합니다.
  • 를 누르면 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>

JavaScript(예를 들어 를 사용하여 ,formElement.submit()또는 이와 동등한 것)이 있으면, 송신 버튼은 모두 정상적으로 동작하지 않는 것으로 간주되어 송신 데이터에 그 값이 포함되지 않는 것에 주의해 주세요( 를 사용하여 폼을 송신할 경우,submitElement.click()그러면 참조가 있었던 제출은 액티브한 것으로 간주됩니다.여기서 제출 버튼은 명확하기 때문에 질문의 소관에 해당하지 않습니다만, 자바스크립트 폼 제출을 통해 제출 버튼을 성공시키는 방법을 알고 싶은 분들을 위해 포함시키고 싶다고 생각했습니다.물론, 폼의 온서밋 핸들러는 여전히 이런 방식으로 작동하지만form.submit()그그 ) )

텍스트 영역이 아닌 필드에서 Enter 키를 눌러 양식을 제출하는 경우, 여기서 원하는 항목을 결정하는 것은 사용자 에이전트에 달려 있습니다.사양에는 텍스트 입력 필드에 키를 사용하여 폼을 송신하는 것에 대해서는 기재되어 있지 않습니다(버튼을 탭하여 공백 등을 사용하여 활성화하면 특정 제출 버튼이 명확하게 사용되므로 문제 없습니다).제출 버튼이 활성화되면 양식을 제출해야 한다는 내용뿐입니다.예를 들어 텍스트 입력을 누르면 양식을 제출할 필요가 없습니다.

Internet Explorer는 소스에 처음 나타나는 제출 버튼을 선택하는 것으로 알고 있습니다.Firefox와 Opera는 탭 인덱스가 가장 낮은 버튼을 선택하고, 그 밖에 정의되어 있지 않은 경우는 처음 정의된 버튼으로 돌아갑니다.또한 제출물에 기본값 이외의 속성 IIRC가 있는지 여부에 대한 몇 가지 복잡한 문제도 있습니다.

여기서 일어나는 일에 대해 정해진 기준이 없고, 전적으로 브라우저의 변덕에 달려있다는 것을 잊지 말아야 합니다.무엇을 하든 가능한 한 특정 행동에 의존하지 않도록 하세요.꼭 알아야 한다면 다양한 브라우저 버전의 동작을 알 수 있을 것입니다만, 조금 전에 조사했을 때는 매우 복잡한 상황(물론 새로운 브라우저 버전에 따라 변경될 수 있습니다)이 있었습니다.가능하면 피하는 것이 좋습니다.

HTML 4는 그것을 명시하지 않습니다.HTML 5 에서는, 최초의 송신 버튼이 디폴트로 되어 있을 필요가 있습니다.

4.10.21.2 암묵적인 제출

A form요소의 기본 버튼은 다음과 같은 양식 소유자의 트리 순서대로 첫 번째 제출 버튼입니다.form★★★★★★ 。

사용자 에이전트가 사용자가 암묵적으로 폼을 송신하는 것을 서포트하고 있는 경우(예를 들어 텍스트컨트롤이 암묵적으로 초점을 맞추고 있을 때 「Enter」키를 누르고 있는 경우 등), 디폴트버튼에 액티베이션 동작이 있어 디세이블이 되어 있지 않은 폼에 대해서, 유저 에이전트는 그 디폴트버튼으로 이벤트를 기동할 필요가 있습니다.

시각적인 순서를 유지하면서, 어느 쪽이 「최초」인지 영향을 주고 싶은 경우는, 몇개의 어프로치를 취할 수 있습니다.

사용할 수 없는 화면 외 버튼입니다.

.hidden-default {
    position: absolute;
    left: -9999px;
}
<form>
  <input name="text">
  <button name="submit" value="wanted" class="hidden-default" tabindex="-1"></button>
  <button name="submit" value="not wanted">Not the default</button>
  <button name="submit" value="wanted">Looks like the default</button>
</form>

Flexbox 주문:

.ordering {
    display: inline-flex;
}

.ordering button {
    order: 2;
}

.ordering button + button {
    order: 1;
}
<form>
  <input name="text">
  <div class="ordering">
    <button name="submit" value="wanted">First in document order</button>
    <button name="submit" value="not wanted">Second in document order</button>
  </div>
</form>

앙드레즈지의 대답은 거의 맞아떨어졌어하지만 여기 간단한 교차 솔루션이 있습니다.

다음과 같은 폼을 취합니다.

<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 사양에서는 여러 개의 송신 버튼이 유효하지만 사용자 에이전트의 처리 방법에 대한 가이던스는 생략되어 있기 때문에 브라우저 제조원은 필요에 따라 실장할 수 있습니다.양식에서 첫 번째 제출 버튼을 제출하거나 현재 포커스가 있는 양식 필드 다음에 다음 제출 버튼을 제출하는 것을 발견했습니다.

W3C 사양은 숨겨진 요소를 사용자 상호 작용에서 제외해야 함을 나타내기 때문에 디스플레이 스타일을 추가하는 것만으로 기능하지 않습니다.그러니 대신 잘 보이는 곳에 숨기세요!

이상, 제가 실전에 투입한 솔루션의 예를 제시하겠습니다.Enter 키를 누르면 기본 폼 전송이 예상대로 동작합니다.기본값이 아닌 다른 값이 존재하고 DOM 기본 전송 버튼 앞에 있는 경우에도 마찬가지입니다.JavaScript 핸들러를 피하면서 사용자 입력과 마우스/키보드 상호 작용에 대한 추가 사항입니다.

참고: 폼을 탭으로 표시해도 시각적 요소에 대한 포커스는 표시되지 않지만 보이지 않는 버튼은 계속 선택됩니다.이 문제를 방지하려면 tabindex 속성을 적절하게 설정하고 보이지 않는 전송 버튼에서 tabindex 속성을 생략합니다.이러한 스타일을 !중요하게 홍보하는 것은 적절하지 않다고 생각될 수 있지만, 프레임워크 또는 기존 버튼 스타일이 이 수정에 간섭하지 않도록 해야 합니다.그리고 그 인라인 스타일은 확실히 서투른 폼이지만 컨셉을 증명하고 있습니다.제품 코드를 작성하지 않았습니다.

이제 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 */
}

설명.

하면 Flexbox를 사용하는 내의 로 할 수.display: flex규칙인 CSS를 합니다.flex-direction: row-reverse이를 위해 CSS나 숨겨진 요소는 필요하지 않습니다.Flexbox를 지원하지 않는 오래된 브라우저의 경우 실행 가능한 솔루션이 제공되지만 요소는 바뀌지 않습니다.

데모

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

이 게시물은 jQuery를 사용하고 싶은 사람이 있다면 도움이 될 것 같습니다.

http://greatwebguy.com/programming/dom/default-html-button-submit-on-enter-with-jquery/

기본 솔루션은 다음과 같습니다.

$(function() {
    $("form input").keypress(function (e) {
    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
        $('input[type=submit].default').click();
        return false;
    }
    else {
        return true;
    }
    });
});

그리고 내가 좋아했던 또 다른 것은

jQuery(document).ready(function() {
    $("form input, form select").live('keypress', function (e) {
        if ($(this).parents('form').find('button[type=submit].default, input[type=submit].default').length <= 0)
            return true;

        if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
            $(this).parents('form').find('button[type=submit].default, input[type=submit].default').click();
            return false;
        }
        else {
            return true;
        }
    });
});

11개의 송신 버튼이 있는 폼이 있었습니다.사용자가 를 누르면 항상 첫 번째 송신 버튼이 사용됩니다.다른 곳에서 읽었는데, 폼에 복수의 송신 버튼이 있는 것은 좋은 생각(나쁜 방법)이 아닙니다.이것에 가장 좋은 방법은, 폼의 유일한 송신 버튼으로서 원하는 버튼을 디폴트로 하는 것입니다.다른 버튼은 "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 루틴에 의해 검증됩니다.

<form onsubmit="alert('submit');return false;">
    <input name="username">
    <input name="password" type="password">
    <button onclick="if(document.activeElement === this){alert('button 1');}else{default_submit.click();}return false;">button 1</button>
    <button onclick="if(document.activeElement === this){alert('button 2');}else{default_submit.click();}return false;">button 2</button>
    <input id="default_submit" type="submit">
</form>

텍스트 입력에서 누르면 버튼의 초점이 맞지 않습니다.그런 다음 이 클릭을 무시하고 기본 제출을 클릭하지만 마우스별 버튼을 클릭하면 초점이 맞춰지고 이 클릭이 적용됩니다.

데모: https://codepen.io/remon-reffat/pen/mdRaXbp

양식 중간에 제출 버튼이 있어 다음과 같이 제출을 다른 페이지로 수정하는 데 어려움을 겪었습니다.

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

사용자가 키를 눌렀을 때 다른 송신 버튼 대신 이 버튼이 클릭되었습니다.

그래서 여러 개의 제출 버튼과 다른 가시성 옵션이 있는 폼을 만들고 클릭 이벤트 알림으로 어떤 버튼을 클릭했는지 https://jsfiddle.net/aqfy51om/1/를 작성했습니다.

테스트에 사용한 브라우저 및 OS:

창문들

OS X

  • 구글 크롬 43
  • Safari 7.1.6

Internet Explorer와 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;"

하나의 의 에 있습니다).style="position: absolute; left: -9999px; top: -9999px;"Internet Explorer에서 시도했을 뿐인데 - 작동했습니다만, 인쇄 등, 그 밖에 무엇을 망칠 수 있는지 모르겠습니다.

코멘트 내용:

그 결과, 같은 스크립트에 복수의 폼이 송신되고 있는 경우, 그것들을 구별하기 위해서 송신 버튼을 사용할 수 없게 됩니다.

<input type="hidden" value="form_name" />각 형태에 맞게.

JavaScript를 사용하여 제출하는 경우: 이벤트에 버튼을 클릭하지 않고 양식에 이벤트를 추가합니다.현명한 사용자는 마우스를 자주 만지지 않습니다.

단일 양식에 여러 개의 제출 버튼이 있는 경우 사용자가 키를 눌러 텍스트필드에서 양식을 제출하면 이 코드는 키 누르기 이벤트에서 폼의 제출 이벤트를 호출하여 기본 기능을 덮어씁니다.이 코드는 다음과 같습니다.

$('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;
});

이상하게도 jQuery 사용 등 표시 여부에 관계없이 첫 번째 단추가 항상 첫 번째 단추로 이동합니다.show/hide(). 속성 추가.attr('disabled', 'disabled')송신 버튼을 완전하게 수신할 수 없게 합니다.예를 들어 레코드 대화상자에서 Insert/Edit+Delete(삽입/편집+삭제) 버튼 표시를 조정할 때 문제가 됩니다.[Insert] (삽입) 앞에 [Edit](편집)을 배치하는 것이 덜 번거롭고 간단하다는 것을 알았습니다.

<button type="submit" name="action" value="update">Update</button>
<button type="submit" name="action" value="insert">Insert</button>
<button type="submit" name="action" value="delete">Delete</button>

JavaScript 코드 사용:

$("#formId button[type='submit'][name='action'][value!='insert']").hide().attr('disabled', 'disabled');
$("#formId button[type='submit'][name='action'][value='insert']").show().removeAttr('disabled');

내 레시피:

<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>

버튼을 하나도 클릭하지 않으면 기본 숨김 필드가 전송됩니다.

하나를 클릭하면 기본 설정이 지정되고 값이 전달됩니다.

제가 사용한 또 다른 해결책은 하나의 버튼만 양식에 넣고 다른 버튼은 가짜로 만드는 것입니다.

다음은 예를 제시하겠습니다.

<form>
  <label for="amount">Amount of items</label>
  <input id="amount" type="text" name="amount" />
  <span id="checkStock" class="buttonish">Check stock</span>
  <button type="submit" name="action" value="order">Place order</button>
</form>

그런 다음 스판 요소를 단추처럼 스타일링합니다.JavaScript 리스너는 스팬을 감시하고 클릭 후 원하는 작업을 수행합니다.

모든 상황에 맞는 것은 아니지만, 적어도 꽤 쉽게 할 수 있습니다.

HTML 4 의 사양으로부터:

폼에 복수의 송신 버튼이 포함되어 있는 경우는, 액티브한 송신 버튼만이 성공합니다.

즉, 여러 개의 송신 버튼을 지정해도 활성화(클릭)되지 않으면 아무것도 성공하지 못합니다.

그리고 나는 이것이 말이 된다고 생각한다.

복수의 송신 버튼이 있는 거대한 폼을 상상해 주세요.맨 위에는 "이 레코드 삭제" 버튼이 있고, 그 다음 많은 입력이 뒤따르고 맨 아래에는 "이 레코드 업데이트" 버튼이 있습니다.폼 하단의 필드에 있는 동안 사용자가 치고 있는 경우, 사용자가 "이 레코드 삭제"를 위에서 암묵적으로 눌렀다고는 생각하지 않습니다.

따라서 첫 번째 버튼이나 사용자가 정의하지 않은 버튼(클릭)을 사용하는 것은 좋지 않다고 생각합니다.그럼에도 불구하고 브라우저는 물론 그것을 하고 있다.

Enter 키를 눌렀을 때 어떤 버튼을 누를지 결정하려면 다음을 사용하여 표시할 수 있습니다.type="submit"기타 버튼은 다음과 같이 표시됩니다.type="button" §:

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

죄송합니다, 이 답변을 쓸 때 일반적인 의미에서 제출 버튼을 생각하고 있었습니다. 번이 번이 아니라 여러 번이 아닙니다.type="submit"1개밖에 않기 type="submit"를 '보다 낫다'로 .type="button"을 수 을 줄 수 경우를 을 남겨두겠습니다. 면을면면면면면면면면면면면면면면면type그들의 형태로.

언급URL : https://stackoverflow.com/questions/925334/how-is-the-default-submit-button-on-an-html-form-determined

반응형
저작자표시

'programing' 카테고리의 다른 글

Jai와 Jai-imageio는 어디서 다운로드 받을 수 있나요?  (0) 2022.11.08
이전 인증을 사용하여 MySQL 4.1+에 연결할 수 없음  (0) 2022.11.08
여러 열을 사용한 중복에 대한 MySQL 선택 레코드 선택  (0) 2022.11.08
MySQL select 문에 조건문을 작성하려면 어떻게 해야 합니까?  (0) 2022.11.08
MYSQL phmyadmin 사용자 계정 업데이트/추가 오류  (0) 2022.11.08

'programing'의 다른글

  • 현재글HTML 폼의 디폴트 송신 버튼은 어떻게 결정됩니까?

관련글

댓글

티스토리툴바