Form.reset() hoạt động như thế nào?

Question

Tôi biết rằng form.reset() sẽ đặt lại tất cả các trường biểu mẫu thành các giá trị mặc định của chúng, nhưng cách hoạt động?

Đây có phải là triển khai DOM của trình duyệt không? tức là trình duyệt biết giá trị cuối cùng được gửi từ máy chủ trong lần đăng lại cuối cùng/get và khi nào reset() được gọi là trình duyệt đặt lại các giá trị đó.

Answer 1

DOM đặc tả tells us rằng nó:

... thực hiện các hành động tương tự như một nút reset.

Và tắt thành HTML. Theo latest spec (vẫn còn là một dự thảo!):

Khi một hình thức yếu tố hình thức được thiết lập lại, user agent phải bắn một thiết lập lại sự kiện đơn giản được đặt tên, đó là hủy ngang, ở hình thức, và sau đó, nếu sự kiện đó là không được hủy bỏ, phải gọi thuật toán đặt lại của mỗi phần tử có thể đặt lại mà chủ sở hữu biểu mẫu là biểu mẫu và các sự kiện thay đổi phát sóng từ biểu mẫu.

Mỗi phần tử có thể đặt lại sẽ xác định thuật toán đặt lại của chính nó. Các thay đổi được thực hiện cho các điều khiển biểu mẫu như một phần của các thuật toán này không được tính là những thay đổi do người dùng gây ra (và do đó, ví dụ: không gây ra sự kiện đầu vào để kích hoạt).

Và "reset algorithm" for input elements (ví dụ) là:

... để đặt cờ giá trị bẩn và cờ checkedness bẩn trở lại sai, thiết lập giá trị của nguyên tố này với giá trị của các giá trị thuộc tính nội dung, nếu có một hoặc chuỗi rỗng khác, đặt độ kiểm tra của phần tử thành true nếu phần tử có thuộc tính nội dung đã chọn và sai nếu thuộc tính nội dung đó không trống, hãy xóa danh sách các tệp đã chọn và sau đó gọi giá trị vệ sinh thuật toán, nếu trạng thái hiện tại của thuộc tính type định nghĩa một.

Vì vậy, về cơ bản, reset đặt giá trị của một đầu vào với giá trị hiện tại của "giá trị" của nó thuộc tính (theElement.getAttribute("value")), mà có thể khác nhau từ hiện tại valuetài sản (theElement.value). Live example here.

Chỉnh sửa: Oooh, Pekka chỉ cho chúng tôi theo số defaultValue. Rất tuyệt, tôi muốn sử dụng nó nhiều hơn getAttribute("value"). Revised live example.

Answer 2

reset sẽ sử dụng các giá trị trong mã nguồn HTML hiện tại. Trình duyệt không biết bất cứ điều gì về Yêu cầu cuối cùng trong Yêu cầu này (đó sẽ là một vi phạm bảo mật rất lớn).

Nếu hình thức có chứa các yếu tố:

<form action="xyz"> 
    <input type="text" name="fieldA" /> 
    <input type="text" name="fieldB" value="Thingy" /> 
    <input type="reset" value="Click me to undo everything" /> 
    <input type="button" onclick="this.form.reset()" value="Click me too" /> 
</form> 

Cả hai nút sẽ làm trống trường đầu tiên và thiết lập giá trị của trường thứ hai để Thingy.