HTML5: <button>

Tổng quan

Thẻ <button> dùng để tạo nút lệnh (nút bấm).

Nhóm nội dung

Flow, Phrasing, Interactive, Listed, Labelable, Submittable, Form-associated, Palpable.

Nội dung được phép

Phrasing.

Thẻ đóng

Bắt buộc phải có thẻ mở <button> và thẻ đóng </button>.

Phần tử cha được phép

Bất kỳ phần tử nào chấp nhận nhóm nội dung Phrasing.

DOM interface

HTMLButtonElement.

Kiểu phần tử

Inline.

Thuộc tính

<p> bao gồm Các thuộc tính Global.

disabled

Đây là thuộc tính Boolean, dùng để không cho phép người dùng tương tác được với thẻ <button> hiện thời. Nếu thuộc tính này không được định nghĩa thì <button> sẽ thừa kế những cài đặt của thẻ chứa nó (<fieldset> chẳng hạn), mặc định giá trị của thuộc tính là false (tức là enabled - cho phép tương tác với thẻ <button> hiện thời).

Firefox mặc định giá trị của thuộc tính disabled là true (tức là trạng thái disabled - không cho phép tương tác, ta có thể sử dụng thuộc tính autocomplete để điều khiển đặc điểm này).

name

Thuộc tính này dùng để đặt tên cho nút lệnh, cần thiết khi submit dữ liệu.

type

Thuộc tính này dùng để xác định kiểu của nút lệnh. Các giá trị của thuộc tính này gồm:

· submit: Dùng để tạo nút lệnh submit nhằm submit dữ liệu của form tới server. Đây là giá trị mặc định của nút lệnh nếu thuộc tính type không được dùng đến hoặc thuộc tính có sự thay đổi (động) về một giá trị trống (empty) hoặc không có giá trị.

· reset: Dùng để reset tất cả các thành phần con của form về giá trị khởi tạo tương ứng của mỗi thành phần.

· button: Dùng để tạo nút lệnh thông thường (không có hành vi). Ta có thể sử dụng code JS để thiết lập các sự kiện cho nút lệnh.

value

Thuộc tính này dùng để khởi tạo giá trị cho nút lệnh.

Ngoài ra, <button> còn có các thuộc tính quan trọng khác: autofocus , autocomplete , form , formaction , formenctype , formmethod , formnovalidate , formtarget.

Ví dụ

Khả năng tương thích trình duyệt

Máy tính

Điện thoại

Nhấp chuột và focus

Khi ta nhấp chuột vào nút lệnh sẽ kích hoạt sự kiện focus, điều này không phụ thuộc vào thuộc tính type của <button>, nhưng ở các trình duyệt hay hệ điều hành khác nhau thì có thể tạo nên những hiệu ứng focus khác nhau.

· Đối với Máy tính

· Đối với Mobile

Lưu ý

Thẻ <button> dễ định kiểu (sử dụng CSS) hơn nhiều so với thẻ <input>. Ví dụ như ta có thể thêm vào bên trong thẻ mở <button> và thẻ đóng </button> các thẻ khác như <em>, <strong>, <img>, ... và có thể sử dụng các phần tử giả của CSS là :after và :before để tạo nên một thẻ <button> phức hợp, nhưng ta lại không làm được điều đó đối với thẻ <input>.

IE7 có một lỗi nhỏ ta cần lưu ý là khi submit Form sử dụng nút lệnh <button> chẳng hạn như <button type="submit" name="button" value="Submit">Gửi</button>, thì sau khi POST dữ liệu đáng nhẽ ta sẽ nhận được kết quả là button=Submit, thì lại nhận được kết quả button=Gửi.

IE6 và IE7 có một lỗi khá tệ là khi submit form với nút lệnh <button> thì tất cả các <button> khác của form cũng submit. Từ IE8 trở nên lỗi này đã được sửa.

Firefox sẽ thêm (với mục đích dễ tiếp cận) một đường bao có dạng nét chấm nhỏ quanh nút lệnh <button> khi nó được focus. Ta có thể chỉnh sửa dạng đường bao này bằng CSS như sau:

Các phiên bản Firefox <35 dành cho Android thiết lập thuộc tính CSS background-image gradient trên nút lệnh <button>. Ta có thể bỏ qua điều này bằng cách như sau:

Xem thêm

· Các phần tử dùng để tạo form khác: <form>, <datalist>, <fieldset>, <input>, <keygen>, <label>, <legend>, <meter>, <optgroup>, <option>, <output>, <progress>, <select>, <textarea>.