<input type="reset">

Try it

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

Giá trị

Thuộc tính value của phần tử <input type="reset"> chứa một chuỗi được dùng làm nhãn của nút, cung cấp cho nút một accessible description. Các nút như reset không có giá trị thực chất khác.

Đặt thuộc tính value

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

Bỏ qua thuộc tính value

Nếu bạn không chỉ định value, bạn nhận được nút có nhãn mặc định (thường là "Reset," nhưng điều này sẽ thay đổi tùy thuộc vào user agent):

<input type="reset" />

Sử dụng nút đặt lại

Các nút <input type="reset"> được dùng để đặt lại biểu mẫu. Nếu bạn muốn tạo nút tùy chỉnh rồi tùy chỉnh hành vi bằng JavaScript, bạn cần dùng <input type="button">, hoặc tốt hơn là phần tử <button>.

Nút đặt lại cơ bản

Chúng ta sẽ bắt đầu bằng cách tạo nút đặt lại cơ bản:

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

Nó hiển thị như sau:

Hãy thử nhập một số văn bản vào trường văn bản, rồi nhấn nút đặt lại.

Thêm phím tắt đặt lại

Để thêm phím tắt bàn phím cho nút đặt lại—giống như bạn làm với bất kỳ <input> nào có nghĩa—bạn dùng thuộc tính toàn cục accesskey.

Trong ví dụ này, r được chỉ định là phím truy cập (bạn sẽ cần nhấn r cộng với các phím sửa đổi cụ thể cho tổ hợp trình duyệt/hệ điều hành của bạn; xem accesskey để biết danh sách hữu ích về những phím đó).

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

Vấn đề với ví dụ trên là người dùng không có cách biết phím truy cập là gì! Điều này đặc biệt đúng vì các phím sửa đổi thường không chuẩn để tránh xung đột. Khi xây dựng trang web, hãy đảm bảo cung cấp thông tin này theo cách không ảnh hưởng đến thiết kế trang web (ví dụ bằng cách cung cấp liên kết dễ tiếp cận trỏ đến thông tin về các phím truy cập của trang web). Thêm tooltip vào nút (dùng thuộc tính title) cũng có thể giúp ích, mặc dù nó không phải là giải pháp hoàn chỉnh cho mục đích khả năng tiếp cận.

Vô hiệu hóa và bật nút đặt lại

Để vô hiệu hóa nút đặt lại, hãy chỉ định thuộc tính disabled trên nó, như sau:

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

Bạn có thể bật và vô hiệu hóa nút trong thời gian chạy bằng cách đặt disabled thành true hoặc false; trong JavaScript điều này trông như btn.disabled = true hoặc btn.disabled = false.

Xác thực

Các nút không tham gia xác thực ràng buộc; chúng không có giá trị thực để bị ràng buộc.

Ví dụ

Chúng ta đã bao gồm các ví dụ cơ bản ở trên. Không có gì thêm để nói về nút đặt lại.

Tóm tắt kỹ thuật

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• <input> và giao diện HTMLInputElement triển khai nó.
• Biểu mẫu và nút
• Biểu mẫu HTML
• Phần tử <button>