Loại đầu vào = nút trong HTML

Các phần tử

<input type="button" />
4 thuộc loại
<input type="button" />
5 được hiển thị dưới dạng các nút ấn đơn giản, có thể được lập trình để điều khiển chức năng tùy chỉnh ở bất kỳ đâu trên trang web theo yêu cầu khi được gán chức năng xử lý sự kiện (thường dành cho sự kiện
<input type="button" />
6)

Thử nó

Ghi chú. Trong khi các phần tử

<input type="button" />
4 thuộc loại
<input type="button" />
5 vẫn là HTML hoàn toàn hợp lệ, thì phần tử
<input type="button" />
9 mới hơn hiện là cách ưa thích để tạo các nút. Cho rằng văn bản nhãn của
<input type="button" />
9 được chèn giữa thẻ mở và thẻ đóng, bạn có thể đưa HTML vào nhãn, thậm chí cả hình ảnh

Giá trị

Nút có giá trị

Thuộc tính

<form>
  <input type="button" value="Start machine" />
</form>
<p>The machine is stopped.</p>
2 của phần tử
<form>
  <input type="button" value="Start machine" />
</form>
<p>The machine is stopped.</p>
1 chứa một chuỗi được sử dụng làm nhãn của nút

<input type="button" value="Click Me" />

Nút không có giá trị

Nếu bạn không chỉ định

<form>
  <input type="button" value="Start machine" />
</form>
<p>The machine is stopped.</p>
2, bạn sẽ nhận được một nút trống

<input type="button" />

Sử dụng các nút

Các phần tử

<form>
  <input type="button" value="Start machine" />
</form>
<p>The machine is stopped.</p>
1 không có hành vi mặc định (anh em họ của chúng,
<form>
  <input type="button" value="Start machine" />
</form>
<p>The machine is stopped.</p>
5 và
<form>
  <input type="button" value="Start machine" />
</form>
<p>The machine is stopped.</p>
6 được sử dụng để gửi và đặt lại biểu mẫu, tương ứng). Để làm cho các nút làm bất cứ điều gì, bạn phải viết mã JavaScript để thực hiện công việc

Một nút đơn giản

Chúng tôi sẽ bắt đầu bằng cách tạo một nút đơn giản với trình xử lý sự kiện

<input type="button" />
6 để khởi động máy của chúng tôi (tốt, nó bật tắt
<form>
  <input type="button" value="Start machine" />
</form>
<p>The machine is stopped.</p>
2 của nút và nội dung văn bản của đoạn sau)

<form>
  <input type="button" value="Start machine" />
</form>
<p>The machine is stopped.</p>

<input type="button" />
8

Tập lệnh lấy tham chiếu đến đối tượng

<form>
  <input type="button" value="Start machine" />
</form>
<p>The machine is stopped.</p>
9 đại diện cho
<input type="button" />
4 trong DOM, lưu tham chiếu này vào biến
<input type="button" />
5. Sau đó,
<input type="button" />
82 được sử dụng để thiết lập chức năng sẽ chạy khi sự kiện
<input type="button" />
6 xảy ra trên nút

Thêm phím tắt cho các nút

Phím tắt, còn được gọi là phím truy cập và tương đương với bàn phím, cho phép người dùng kích hoạt một nút bằng một phím hoặc tổ hợp phím trên bàn phím. Để thêm lối tắt bàn phím vào một nút — giống như bạn làm với bất kỳ

<input type="button" />
4 nào mà nó hợp lý — bạn sử dụng thuộc tính toàn cục
<input type="button" />
85

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

<input type="button" />
6

<input type="button" />
8

Ghi chú. Tất nhiên, vấn đề với ví dụ trên là người dùng sẽ không biết khóa truy cập là gì. Trong một trang web thực, bạn phải cung cấp thông tin này theo cách không can thiệp vào thiết kế trang web (ví dụ: bằng cách cung cấp một liên kết dễ truy cập trỏ đến thông tin về khóa truy cập trang web là gì)

Vô hiệu hóa và kích hoạt một nút

Để tắt một nút, hãy chỉ định thuộc tính toàn cầu

<input type="button" />
86 trên nút đó, như vậy

<input type="button" />
9

Đặt thuộc tính bị vô hiệu hóa

Bạn có thể bật và tắt các nút trong thời gian chạy bằng cách đặt

<input type="button" />
86 thành
<input type="button" />
88 hoặc
<input type="button" />
89. Trong ví dụ này, nút của chúng tôi bắt đầu được bật, nhưng nếu bạn nhấn nó, nó sẽ bị tắt bằng cách sử dụng
<input type="button" />
60. Sau đó, chức năng
<input type="button" />
61 được sử dụng để đặt lại nút về trạng thái đã bật sau hai giây

<input type="button" />
5

<input type="button" />
6

Kế thừa trạng thái bị vô hiệu hóa

Nếu thuộc tính

<input type="button" />
86 không được chỉ định, nút sẽ kế thừa trạng thái
<input type="button" />
86 của nó từ phần tử cha của nó. Điều này giúp có thể bật và tắt tất cả các nhóm phần tử cùng một lúc bằng cách đặt chúng trong một vùng chứa, chẳng hạn như phần tử
<input type="button" />
64, sau đó đặt
<input type="button" />
86 trên vùng chứa

Ví dụ dưới đây cho thấy điều này trong hành động. Điều này rất giống với ví dụ trước, ngoại trừ thuộc tính

<input type="button" />
86 được đặt trên
<input type="button" />
64 khi nhấn nút đầu tiên — điều này khiến cả ba nút bị vô hiệu hóa cho đến khi hết thời gian chờ hai giây

<input type="button" />
3

<input type="button" />
0

Ghi chú. Theo mặc định, không giống như các trình duyệt khác, Firefox sẽ duy trì trạng thái tắt động của một

<input type="button" />
9 trong các lần tải trang. Sử dụng thuộc tính
<input type="button" />
69 để kiểm soát tính năng này

Thẩm định

Các nút không tham gia xác thực ràng buộc;

ví dụ

Ví dụ dưới đây cho thấy một ứng dụng vẽ rất đơn giản được tạo bằng phần tử

<input type="button" />
80 và một số CSS và JavaScript đơn giản (chúng tôi sẽ ẩn CSS cho ngắn gọn). Hai điều khiển trên cùng cho phép bạn chọn màu sắc và kích thước của bút vẽ. Nút, khi được nhấp, sẽ gọi một chức năng xóa canvas