Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.cdn.mozilla.net/ko/docs/Web/HTML/Reference/Elements/input/reset below:

<input type="reset"> - HTML: Hypertext Markup Language

Baseline Widely available

reset 유형의 <input> 요소는 버튼으로 렌더링되며, 기본 click 이벤트 처리기가 설정되어 있어 폼 내 모든 입력 값을 초기 값으로 초기화합니다.

<form>
  <div class="controls">
    <label for="id">User ID:</label>
    <input type="text" id="id" name="id" />

    <input type="reset" value="Reset" />
    <input type="submit" value="Submit" />
  </div>
</form>

.controls {
  padding-top: 1rem;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: 1fr 2fr;
  gap: 0.7rem;
}

label {
  font-size: 0.8rem;
  justify-self: end;
}

input[type="reset"],
input[type="submit"] {
  width: 5rem;
  justify-self: end;
}

input[type="reset"] {
  grid-column: 2;
  grid-row: 2;
}

input[type="submit"] {
  grid-column: 2;
  grid-row: 3;
}

참고 : 폼에 초기화 버튼을 포함하는 것은 일반적으로 피하는 것이 좋습니다. 이 버튼은 대부분 유용하지 않으며, 오히려 실수로 클릭했을 때 사용자가 불편함을 겪는 경우가 더 많습니다. 특히, 종종 사용자가 클릭하려던 제출 버튼을 잘못 눌러서 문제가 발생하곤 합니다.

<input type="reset"> 요소의 value 속성은 버튼의 레이블로 사용되는 문자열을 포함하며, 이를 통해 버튼에 accessible description 을 제공합니다. resetê³¼ 같은 버튼은 그렇지 않으면 값이 없습니다.

<input type="reset" value="Reset the form" />

value를 지정하지 않으면 기본 레이블이 있는 버튼이 생성됩니다(일반적으로 "Reset"이지만, 이는 사용자 에이전트에 따라 달라질 수 있습니다).

<input type="reset"> 버튼은 폼을 초기화하는 데 사용됩니다. 커스텀 버튼을 만들고 JavaScript를 사용하여 동작을 사용자화하려면 <input type="button"> 또는 더 나아가 <button> 요소를 사용해야 합니다.

기본 초기화 버튼을 생성하는 것부터 시작해 봅시다.

<form>
  <div>
    <label for="example">Type in some sample text</label>
    <input id="example" type="text" />
  </div>
  <div>
    <input type="reset" value="Reset the form" />
  </div>
</form>

이렇게 렌더링됩니다.

텍스트 필드에 텍스트를 입력한 후 초기화 버튼을 눌러 보세요.

의미 있는 모든 <input> 요소와 마찬가지로 초기화 버튼에 키보드 단축키를 추가하려면, accesskey 전역 특성을 사용하면 됩니다.

이 예제에서는 r이 접근 키로 명세되었습니다. 브라우저/OS 조합에 맞는 특정 수정 키와 함께 r을 눌러야 합니다. 자세한 내용은 accesskey에서 유용한 목록을 확인할 수 있습니다.

<form>
  <div>
    <label for="example">Type in some sample text</label>
    <input id="example" type="text" />
  </div>
  <div>
    <input type="reset" value="Reset the form" accesskey="r" />
  </div>
</form>

위 예제의 문제는 사용자가 접근 키가 무엇인지 알 수 없다는 점입니다! 특히 수정 키의 충돌을 피하기 위해 일반적이지 않은 키로 설정하는 경우가 많기 때문에 문제가 더욱 두드러집니다.

사이트를 만들 때는 이 정보를 사이트 디자인에 방해되지 않는 방식으로 제공해야 합니다 (예: 사이트 접근 키에 대한 정보를 제공하는 쉽게 접근할 수 있는 링크를 제공하는 방식). 버튼에 툴팁을 추가하는 것도 도움이 될 수 있지만, title 속성을 사용하는 것처럼 접근성 측면에서 완전한 해결책은 아닙니다.

초기화 버튼을 비활성화하려면, ê·¸ 위에 disabled 속성을 지정하면 됩니다.

<input type="reset" value="Disabled" disabled />

버튼은 실행 중에 disabled를 true 또는 false로 설정하여 활성화하거나 비활성화할 수 있습니다. JavaScript에서는 btn.disabled = true 또는 btn.disabled = false와 같이 작성합니다.

참고 : 버튼을 활성화하거나 비활성화하는 방법에 대한 더 많은 아이디어는 <input type="button"> 페이지에서 확인할 수 있습니다.

버튼은 제한할 값이 없으므로 유효성 검사의 대상이 아닙니다.

초기화 버튼에 대한 추가 예제는 없습니다.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4