Có thể một <button> trong HTML làm điều gì đó mà không cần javascript?

Question

Tôi có trang web có nút. Hiện tại tôi đang ràng buộc nút này với trình xử lý javascript làm cho trang chuyển hướng đến URL đã cho khi được nhấp.

HTML:

<button class="click-me">Clike me to navigate</button> 

JS:

$('.click-me').on('click', function() { window.location = '/myloc'; }); 

bây giờ tôi đang cố gắng để xây dựng một dự phòng (không-javascript) phiên bản của trang này. Tôi muốn nút này để làm công việc tương tự nhưng không sử dụng javascript. Nói cách khác, tôi đang cố gắng làm cho nút này hoạt động ngay cả khi javascript của trình duyệt bị tắt.

Tôi biết điều này có thể đạt được bằng biểu mẫu (như được hiển thị bên dưới). Nhưng tôi đang tìm kiếm bất kỳ thực hiện sạch hơn nào.

<form name="hack" action="/myloc"> 
    <button type="submit" class="click-me">Click me to navigate</button> 
</form> 

Answer 1

Sử dụng một yếu tố a, đó là những gì họ đang cho:

<a class="click-me" href="/path/to/whatever/page">Click me to navigate</a> 

Và sau đó chỉ cần phong cách nó như là một button.

Ví dụ với CSS sau đây:

.clickMe { 
    -moz-appearance: button; 
    -ms-appearance: button; 
    -o-appearance: button; 
    -webkit-appearance: button; 
    appearance: button; 
    text-decoration: none; 
    color: #000; 
    padding: 0.2em 0.4em; 
}​ 

JS Fiddle demo.

(Rõ ràng điều này giả định việc sử dụng một trình duyệt hỗ trợ appearance (hoặc phiên bản nhà cung cấp tiền tố) thuộc tính CSS.)

Tài liệu tham khảo:

• appearance (albeit it's the -moz- prefixed MDN documentation).
• appearance property, at the W3C.
• Unfortunately-dropped CSS3 features (at the W3C).

Answer 2

Để trả lời câu hỏi được yêu cầu trong tiêu đề, có, button element có thể "thực hiện" mà không cần JavaScript. Với type=submit, nó sẽ gửi biểu mẫu, như trong ví dụ ở cuối câu hỏi. Với type=reset, nó xóa tất cả dữ liệu nhập của người dùng khỏi biểu mẫu. Chỉ là type=button (mặc định khi phần tử ở bên ngoài bất kỳ biểu mẫu nào) phụ thuộc vào JavaScript và không làm bất kỳ điều gì mà không có tập lệnh.

Để trả lời câu hỏi bạn nên hỏi: Sử dụng liên kết, Luke. Bạn có thể tạo kiểu liên kết trông giống như một nút nếu bạn muốn (có thể có ý nghĩa trong ngữ cảnh giống như ứng dụng), thậm chí chỉ sử dụng CSS 2.1 cộng với các cải tiến CSS3 tùy chọn như các góc tròn.

Answer 3

Bạn chỉ có thể thêm thực hiện nút bấm (nếu tham chiếu đến bất kỳ trang web) bằng cách thêm thẻ trước khi dụ it..For:

<a href="https://www.youtube.com/"> 
<button>Youtube</button> 
</a> 

doesnot này cần bất kỳ javascript như xa như tôi biết.