HTML 양식의 여러 제출 버튼

263

HTML 양식으로 마법사를 작성한다고 가정 해 봅시다. 하나의 버튼이 돌아가고 하나의 버튼이 앞으로 이동합니다. 뒤로 버튼은을 누르면 마크 업에서 첫 번째로 표시 되므로 Enter해당 버튼을 사용하여 양식을 제출합니다.

예:

<form>
  <!-- Put your cursor in this field and press Enter -->
  <input type="text" name="field1" />

  <!-- This is the button that will submit -->
  <input type="submit" name="prev" value="Previous Page" />

  <!-- But this is the button that I WANT to submit -->
  <input type="submit" name="next" value="Next Page" />
</form>

스 니펫 확장

사용자가을 누를 때 양식을 제출하는 데 사용되는 버튼을 결정하고 싶습니다 Enter. 그러면 Enter마법사 를 누르면 이전 페이지가 아닌 다음 페이지로 이동합니다. 이 작업 tabindex을 수행해야합니까?

— 케빈
소스

142

이게 도움이 되길 바란다. float버튼을 오른쪽 으로 돌리는 트릭을 수행 하고 있습니다.

이렇게하면 Prev버튼이 버튼의 왼쪽에 Next있지만 NextHTML 구조에서 가장 먼저 나타납니다.

.f {
  float: right;
}
.clr {
  clear: both;
}

<form action="action" method="get">
  <input type="text" name="abc">
  <div id="buttons">
    <input type="submit" class="f" name="next" value="Next">
    <input type="submit" class="f" name="prev" value="Prev">
    <div class="clr"></div><!-- This div prevents later elements from floating with the buttons. Keeps them 'inside' div#buttons -->
  </div>
</form>

스 니펫 확장

다른 제안에 비해 이점 : JavaScript 코드가없고 액세스 가능하며 두 단추가 모두 남아 있습니다 type="submit".

— 팔로 타스
소스

23

탭 순서를 변경하지 않고이 작업을 수행하지 마십시오. 탭 버튼을 누르면 화면에 표시되는 버튼이 순환됩니다.

— Steve

61

이전 버튼 유형을 다음과 같은 버튼으로 변경하십시오.

<input type="button" name="prev" value="Previous Page" />

이제 다음 버튼이 기본값이되고 default속성을 추가 하여 브라우저에서 강조 표시되도록 할 수도 있습니다 .

<input type="submit" name="next" value="Next Page" default />

— 월리 로리 스
소스

39

무슨 default속성에 대해 이야기하고 있습니까? 유효한 "default"속성은 없습니다 : w3.org/html/wg/drafts/html/master/… (HTML5, HTML 4.01 과도 / 엄격, XHTML 1.0 엄격하지 않음). 그리고 입력 유형을에서 submit로 변경하는 button것이 더 나은 이유를 알 수 없습니다 . 한 가지 형태로 여러 제출 유형 입력 요소를 문제없이 가질 수 있습니다. 이 답변이 왜 그렇게 찬성되었는지 이해가되지 않습니다.

— Sk8erPeter 10

3

"button"유형의 입력이 있으면 양식 조치가 실행되지 않습니다. onclick 또는 무언가를 가질 수 있으므로 "default"양식 조치 ( "submit"유형 단추를 눌러 실행) 이외의 다른 기능을 실행할 수 있습니다. 그것이 내가 찾던 것이기 때문에 내가 그것을 찬성 한 이유입니다. "default"속성을 말할 수 없으며 내 문제의 일부는 아니 었습니다.) 명확하게 해 주셔서 감사합니다.

— Jonas

2

@ Sk8erPeter, @Jonas .... 흠 ..이 default속성이 전역 속성 인 것 같습니다. 열거 상태와 관련된 열거 속성 .. : w3.org/html/wg/drafts/html/master/... . 그 점을 제외하고 ..이 답변의 버튼 측면은 답이 아닙니다. ' 조건부 제안 '또는 쿼리 ( 질문 자체 )입니다.

— Brett Caswell 17

3

@Jonas : 예, type="button"양식을 제출하지는 않지만 type="submit"버튼 유형을 변경하는 것은 해결책이 아닙니다.이 버튼은 기본적으로 동일한 방식으로 작동해야하기 때문에 OP의 질문은 "다음"버튼을 만드는 방법이었습니다. Enter 키를 누르는 기본값. 그리고 받아 들여진 대답에 가능한 해결책이 있습니다.

— Sk8erPeter 10

4

@BrettCaswell :이 버튼의 유형을 변경하는 것은 나쁜 해결 방법입니다 (이전 의견 참조). HTML default에 input태그에 대한 유효한 속성 이 없으며 (앞에서 언급 한대로) (인기) 브라우저는이 속성이있는 버튼을 강조 표시하지 않으므로이 속성의 비표준 구현이 없으므로 여전히 알 수 없습니다. @Wally Lawless의 이야기와이 답변이 과대 평가 된 이유는 무엇입니까? 단 하나의 유효이 defaultHTML5에 도입 된 속성은하지만만을위한, <track>태그 : developer.mozilla.org/en-US/docs/Web/HTML/Element/track

— Sk8erPeter

56

제출 버튼에 다음과 같은 이름을 지정하십시오.

<input type="submit" name="submitButton" value="Previous Page" />
<input type="submit" name="submitButton" value="Next Page" />

사용자 누를 때 Enter와 요청이 서버로 이동, 당신은의 값을 확인할 수 있습니다 submitButton형식의 컬렉션을 포함하여 서버 측 코드에 name/value쌍. 예를 들어,에서 ASP 클래식 :

If Request.Form("submitButton") = "Previous Page" Then
    ' Code for the previous page
ElseIf Request.Form("submitButton") = "Next Page" Then
    ' Code for the next page
End If

참조 : 단일 양식에서 여러 제출 단추 사용

— 허 세이트
소스

26

이것은 사용자가 요구 한 것이 아닙니다. 사용자는 Enter 키를 누를 때 활성화되는 양식의 제출 단추를 제어하는 방법을 알고 싶어했습니다. 기본 버튼입니다.

— kosoant

20

버튼의 레이블을 모르는 I18n 응용 프로그램에서는 작동하지 않습니다.

— Chris

어떤 시스템 또는 기술 솔루션에서 서버 자체가 다음 및 뒤로 단추에 사용 된 레이블을 알지 못합니까? 서버가 처음에 다음 및 뒤로 단추를 생성하지 않았습니까? (현지화가 클라이언트 쪽에서 처리된다면 서버는 알지 못할 것 같지만 HTML에 대해서는 들어 본 적이 없습니다)

— Jacob

이 답변은 질문을 완전히 놓쳤습니다. 다른 질문 일 가능성이 큽니다. 왜 그렇게 많은 투표를 하는가 ??? 버튼의 레이블을 절대로 확인해서는 안된다는 것은 말할 것도없고 ... 많은 문제가 있습니다. 간단한 경우에도 "문자열을 '이전 페이지'로 줄여야합니다"는 사이트 기능을 망칩니다.

— Tylla

30

첫 번째 버튼이 기본적으로 사용된다는 사실이 여러 브라우저에서 일관된 경우 소스 코드에서 올바른 방향으로 놓은 다음 CSS를 사용하여 명백한 위치를 전환하십시오.

float 예를 들어 왼쪽과 오른쪽으로 시각적으로 전환합니다.

— 폴 손비
소스

18

때로는 @palotasb가 제공 한 솔루션으로는 충분하지 않습니다. 예를 들어 "필터"제출 버튼이 "다음 및 이전"과 같은 버튼 위에 배치되는 사용 사례가 있습니다. 이 문제에 대한 해결 방법을 찾았 습니다. 숨겨진 div에서 기본 제출 버튼 역할을 해야하는 제출 버튼을 복사 하여 다른 제출 버튼 위의 양식 안에 배치하십시오. 기술적으로 Enter 키를 누르면 보이는 다음 버튼을 클릭 할 때와 다른 버튼으로 제출됩니다. 그러나 이름과 값이 동일하므로 결과에 차이가 없습니다.

<html>
<head>
    <style>
        div.defaultsubmitbutton {
            display: none;
        }
    </style>
</head>
<body>
    <form action="action" method="get">
        <div class="defaultsubmitbutton">
            <input type="submit" name="next" value="Next">
        </div>
        <p><input type="text" name="filter"><input type="submit" value="Filter"></p>
        <p>Filtered results</p>
        <input type="radio" name="choice" value="1">Filtered result 1
        <input type="radio" name="choice" value="2">Filtered result 2
        <input type="radio" name="choice" value="3">Filtered result 3
        <div>                
            <input type="submit" name="prev" value="Prev">
            <input type="submit" name="next" value="Next">
        </div>
    </form>
</body>
</html>

— 네티 울
소스

17

JavaScript를 사용하여 양식을 제출합니다. 이 기능은 양식 요소의 OnKeyPress 이벤트에 의해 트리거되며 Enter키가 선택 되었는지 여부를 감지합니다 . 이 경우 양식을 제출합니다.

다음은이 작업을 수행하는 방법을 설명하는 두 페이지입니다. 1 , 2 . 이를 바탕으로 사용 예는 다음과 같습니다 ( here 기반 ).

<SCRIPT TYPE="text/javascript">//<!--
function submitenter(myfield,e) {
  var keycode;
  if (window.event) {
    keycode = window.event.keyCode;
  } else if (e) {
    keycode = e.which;
  } else {
    return true;
  }

  if (keycode == 13) {
    myfield.form.submit();
    return false;
  } else {
    return true;
  }
}
//--></SCRIPT>

<INPUT NAME="MyText" TYPE="Text" onKeyPress="return submitenter(this,event)" />

— 야 코브 엘리스
소스

2

자바 스크립트가 비활성화되면 어떻게됩니까?

— Jon Winstanley

2

JS를 주석 처리하기 위해 <!-및->를 사용하면 안됩니다. 이러한 태그는 Javascript 언어 토큰이 아닙니다

— Marecky

2

@Marecky 그들은 JS를 주석 처리하지 않습니다. <script>를 지원하는 브라우저에서 <script>의 내용을 구문 분석 할 때 무시됩니다. 오늘날에는 실제로 필요하지 않습니다. 그러나 매우 오래된 브라우저에서는 스크립트가 일반 텍스트로 인쇄되는 것을 피하기위한 호환성 해킹이었습니다.

— leemes

17

설치 대화 상자처럼 작동하게하려면 "다음"버튼 OnLoad에 초점을 두십시오.

이렇게하면 사용자가 Return에 도달하면 양식이 제출되어 전달됩니다. 그들이 돌아가려면 Tab버튼을 누르 거나 클릭 할 수 있습니다 .

— 스콧 고 트루
소스

2

그들은 누군가가 양식을 작성하고 텍스트 필드에있는 동안 리턴을 누르는 것을 의미합니다.

— Jordan Reiter

17

순수한 HTML로는이 작업을 수행 할 수 없습니다. 이 트릭에는 JavaScript를 사용해야합니다.

그러나 HTML 페이지에 두 개의 양식을 배치하면이 작업을 수행 할 수 있습니다.

Form1에는 이전 버튼이 있습니다.

Form2에는 사용자 입력 + 다음 버튼이 있습니다.

사용자 Enter가 Form2를 누르면 다음 제출 단추가 시작됩니다.

— 플라이 스왓
소스

16

CSS로 할 수 있습니다.

와 마크 업에 버튼을 넣어 Next다음, 첫번째 버튼 Prev후 버튼을 누릅니다.

그런 다음 CSS를 사용하여 원하는 방식으로 CSS를 배치하십시오.

— qui
소스

14

대부분의 브라우저에서 JavaScript 또는 CSS없이 작동합니다.

<form>
    <p><input type="text" name="field1" /></p>
    <p><a href="previous.html">
    <button type="button">Previous Page</button></a>
    <button type="submit">Next Page</button></p>
</form>

Firefox, Opera, Safari 및 Chrome이 모두 작동합니다.
항상 그렇듯이 Internet Explorer가 문제입니다.

이 버전은 JavaScript가 켜져있을 때 작동합니다.

<form>
    <p><input type="text" name="field1" /></p>
    <p><a href="previous.html">
    <button type="button" onclick="window.location='previous.html'">Previous Page</button></a>
    <button type="submit">Next Page</button></p>
</form>

따라서이 솔루션의 결함은 다음과 같습니다.

JavaScript를 끈 상태에서 Internet Explorer를 사용하면 이전 페이지가 작동하지 않습니다.

뒤로 버튼은 여전히 작동합니다!

— 졸리 온
소스

1

자바 스크립트가 없으면 type = "button"! "이전 페이지"버튼을 활성화 할 수 없습니다!

— riskop

제안하는 문제는 버튼 type = "button"이 양식을 게시하지 않으므로 기본적으로 아무것도 수행하지 않지만 앵커가있는 두 번째 버전은 POST 대신 GET을 생성한다는 것입니다.

— Tylla

12

한 페이지에 여러 개의 활성 버튼이 있으면 다음과 같이 할 수 있습니다.

Enter키 누르기시 트리거하려는 첫 번째 단추를 양식의 기본 단추로 표시하십시오. 두 번째 버튼의 Backspace경우 키보드 의 버튼에 연결하십시오 . BackspaceEVENTCODE는 8입니다.

$(document).on("keydown", function(event) {
  if (event.which.toString() == "8") {
    var findActiveElementsClosestForm = $(document.activeElement).closest("form");

    if (findActiveElementsClosestForm && findActiveElementsClosestForm.length) {
      $("form#" + findActiveElementsClosestForm[0].id + " .secondary_button").trigger("click");
    }
  }
});

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>

<form action="action" method="get" defaultbutton="TriggerOnEnter">
  <input type="submit" id="PreviousButton" name="prev" value="Prev" class="secondary_button" />
  <input type="submit" id='TriggerOnEnter' name="next" value="Next" class="primary_button" />
</form>

스 니펫 확장

— 사용자 1591131
소스

11

이를 위해 탭 순서를 변경하면됩니다. 간단하게 유지하십시오.

또 다른 간단한 옵션은 HTML 코드에서 제출 버튼 뒤에 뒤로 버튼을 넣지 만 제출 버튼 앞에 페이지에 표시되도록 왼쪽으로 띄우는 것입니다.

— 케니 존슨
소스

10

<input type="submit" name="perv" value="Previous Page"> 
<input type="submit" name="prev" value="Next Page">

모든 제출 버튼의 이름을 동일하게 유지하십시오 ( "이전").

유일한 차이점은 value 고유 한 값을 가진 속성입니다. 스크립트를 만들 때 이러한 고유 한 값을 통해 어떤 제출 단추를 눌렀는지 알아낼 수 있습니다.

그리고 다음 코딩을 작성하십시오.

    btnID = ""
if Request.Form("prev") = "Previous Page" then
    btnID = "1"
else if Request.Form("prev") = "Next Page" then
    btnID = "2"
end if

— 자유
소스

문제는 텍스트 필드에서 Enter 키를 누르면 의도 된 것이 아닌 첫 번째 제출 단추로 양식을 제출한다는 것입니다 (예제에서 두 번째 것). 양식을 제출하는 데 사용 된 제출 버튼을 찾는 것은 쉬운 일이 아닙니다.

— riskop

왜 name="perv"?

— Peter Mortensen

10

또 다른 간단한 옵션은 HTML 코드에서 제출 버튼 뒤에 뒤로 버튼을 넣지 만 왼쪽으로 플로팅하여 제출 버튼 전에 페이지에 표시하는 것입니다.

이를 위해 탭 순서를 변경하면됩니다. 간단하게 유지하십시오.

— 피터 모텐슨
소스

10

처음 으로이 문제를 제기했을 때 선택의 단순성으로 여전히 이전 / 다음이 아닌 경우 onclick () / JavaScript 핵을 만들었습니다. 다음과 같이 진행됩니다.

@model myApp.Models.myModel

<script type="text/javascript">
    function doOperation(op) {
        document.getElementById("OperationId").innerText = op;
        // you could also use Ajax to reference the element.
    }
</script>

<form>
  <input type="text" id = "TextFieldId" name="TextField" value="" />
  <input type="hidden" id="OperationId" name="Operation" value="" />
  <input type="submit" name="write" value="Write" onclick='doOperation("Write")'/>
  <input type="submit" name="read" value="Read" onclick='doOperation("Read")'/>
</form>

제출 단추를 클릭하면 원하는 조작을 숨겨진 필드 (형식과 연관된 모델에 포함 된 문자열 필드)에 저장하고 모든 결정을 수행하는 제어기에 양식을 제출합니다. 컨트롤러에서 간단히 다음과 같이 작성하십시오.

// Do operation according to which submit button was clicked
// based on the contents of the hidden Operation field.
if (myModel.Operation == "Read")
{
     // Do read logic
}
else if (myModel.Operation == "Write")
{
     // Do write logic
}
else
{
     // Do error logic
}

문자열 구문 분석을 피하기 위해 숫자 연산 코드를 사용하여 이것을 약간 강화할 수도 있지만, 열거 형으로 재생하지 않으면 코드를 읽기 어렵고 수정 가능하며 자체 문서화 할 수 없으며 구문 분석은 간단합니다.

— 중년층 돌연변이 닌자 프로그래머
소스

9

에서 https://html.spec.whatwg.org/multipage/forms.html#implicit-submission

양식 요소의 기본 버튼은 양식 소유자가 해당 양식 요소 인 트리 순서의 첫 번째 제출 버튼입니다.

사용자 에이전트가 사용자가 양식을 암시 적으로 제출할 수 있도록 지원하는 경우 (예 : 일부 플랫폼에서 텍스트 필드에 초점을 맞추고 텍스트 필드에 초점을 둔 상태에서 "enter"키를 누르는 경우) 양식을 제출합니다 ...

다음 입력을 type = "submit"으로하고 이전 입력을 type = "button"으로 변경하면 원하는 기본 동작이 제공됩니다.

<form>
   <input type="text" name="field1" /> <!-- put your cursor in this field and press Enter -->

   <input type="button" name="prev" value="Previous Page" /> <!-- This is the button that will submit -->
   <input type="submit" name="next" value="Next Page" /> <!-- But this is the button that I WANT to submit -->
</form>

— nikkypx
소스

9

이것이 내가 시도한 것입니다.

버튼에 다른 이름을 지정해야합니다
if두 버튼 중 하나를 클릭하면 필요한 조치를 수행 할 설명을 작성하십시오 .

<form>
    <input type="text" name="field1" /> <!-- Put your cursor in this field and press Enter -->

    <input type="submit" name="prev" value="Previous Page" /> <!-- This is the button that will submit -->
    <input type="submit" name="next" value="Next Page" /> <!-- But this is the button that I WANT to submit -->
</form>

PHP에서

if(isset($_POST['prev']))
{
    header("Location: previous.html");
    die();
}

if(isset($_POST['next']))
{
    header("Location: next.html");
    die();
}

— 사무엘 무 기사
소스

문제는 텍스트 필드에서 Enter 키를 누르면 의도 된 것이 아닌 첫 번째 제출 단추로 양식을 제출한다는 것입니다 (예제에서 두 번째 것). 양식을 제출하는 데 사용 된 제출 버튼을 찾는 것은 쉬운 일이 아닙니다.

— riskop

7

ASP 버튼에는 UseSubmitBehavior제출하는 작업을 설정할 수 있는 속성이 있다는 것을 알았을 때 기본적으로 ASP.NET 컨트롤에서만 기본적으로 동일한 것에 대한 답을 찾으려고 할 때이 질문을 보았습니다.

<asp:Button runat="server" ID="SumbitButton" UseSubmitBehavior="False" Text="Submit" />

누군가가 ASP.NET 버튼 방식을 찾고있는 경우를 대비하여.

— 배리 프랭클린
소스

6

JavaScript (여기서는 jQuery)를 사용하면 양식을 제출하기 전에 이전 버튼을 비활성화 할 수 있습니다.

$('form').on('keypress', function(event) {
    if (event.which == 13) {
        $('input[name="prev"]').prop('type', 'button');
    }
});

— 기 illa
소스

1

이 시도..!

<form>
  <input type="text" name="Name" />
  <!-- Enter the value -->

  <input type="button" name="prev" value="Previous Page" />
  <!-- This is the button that will submit -->
  <input type="submit" name="next" value="Next Page" />
  <!-- But this is the button that I WANT to submit -->
</form>

스 니펫 확장

— 고 wtham Balusamy
소스

1

이런 식으로 매우 비슷한 문제를 해결했습니다.

JavaScript가 활성화 된 경우 (대부분의 경우 현재) 모든 제출 버튼은 JavaScript (jQuery)를 통해 페이지로드시 버튼으로 "성능이 저하됩니다 ". " 저하 된 "버튼 유형 버튼 의 클릭 이벤트 도 JavaScript를 통해 처리됩니다.
JavaScript가 활성화되어 있지 않으면 양식은 여러 제출 버튼으로 브라우저에 제공됩니다. 타격이 경우 EnterA의 textfield형태 내에서 첫 번째 단추 대신의 의도와 양식을 제출합니다 기본 ,하지만 적어도 형태는 계속 사용할 수 있습니다 : 당신은 모두 제출 이전 및 다음 단추.

작업 예 :

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    </head>

    <body>
        <form action="http://httpbin.org/post" method="post">
            If JavaScript  is disabled, then you CAN submit the form
            with button1, button2 or button3.

            If you press enter on a text field, then the form is
            submitted with the first submit button.

            If JavaScript is enabled, then the submit typed buttons
            without the 'defaultSubmitButton' style are converted
            to button typed buttons.

            If you press Enter on a text field, then the form is
            submitted with the only submit button
            (the one with class defaultSubmitButton)

            If you click on any other button in the form, then the
            form is submitted with that button's value.

            <br />

            <input type="text" name="text1" ></input>
            <button type="submit" name="action" value="button1" >button 1</button>
            <br />

            <input type="text" name="text2" ></input>
            <button type="submit" name="action" value="button2" >button 2</button>
            <br />

            <input type="text" name="text3" ></input>
            <button class="defaultSubmitButton" type="submit" name="action" value="button3" >default button</button>
        </form>

        <script>
            $(document).ready(function(){

                /* Change submit typed buttons without the 'defaultSubmitButton'
                   style to button typed buttons */
                $('form button[type=submit]').not('.defaultSubmitButton').each(function(){
                    $(this).attr('type', 'button');
                });

                /* Clicking on button typed buttons results in:
                   1. Setting the form's submit button's value to
                      the clicked button's value,
                   2. Clicking on the form's submit button */
                $('form button[type=button]').click(function( event ){
                    var form = event.target.closest('form');
                    var submit = $("button[type='submit']",form).first();
                    submit.val(event.target.value);
                    submit.click();
                });
            });
        </script>
    </body>
</html>

스 니펫 확장

— 위험
소스

0

Tabindex이 문제를 해결하는 데 사용할 수 있습니다 . 또한 버튼 순서를 변경하는 것이 더 효율적인 방법입니다.

단추의 순서를 변경하고 float값을 추가 하여 HTML보기 에 표시 할 원하는 위치를 지정하십시오 .

— 죠티 미 쉬라
소스

-4

당신이 준 예제를 사용하여 :

<form>
    <input type="text" name="field1" /><!-- Put your cursor in this field and press Enter -->
    <input type="submit" name="prev" value="Previous Page" /> <!-- This is the button that will submit -->
    <input type="submit" name="next" value="Next Page" /> <!-- But this is the button that I WANT to submit -->
</form>

"이전 페이지"를 클릭하면 "이전"값만 제출됩니다. "다음 페이지"를 클릭하면 "다음"값만 제출됩니다.

그러나 Enter양식의 어딘가 를 누르면 "이전"또는 "다음"이 제출되지 않습니다.

따라서 의사 코드를 사용하면 다음을 수행 할 수 있습니다.

If "prev" submitted then
    Previous Page was click
Else If "next" submitted then
    Next Page was click
Else
    No button was click

— 게이트 킬러
소스

1

어떤 버튼도 트리거되지 않은 경우 (js를 사용하지 않고) 상황이 없습니다. ENTER를 누르면 코드의 첫 번째 버튼이 이벤트를 잡습니다. html 예제에서는 이전 버튼입니다.

— SimonSimCity