Hướng dẫn button trong css

---

---

Nội dung chính

Nội dung chính Show

• Ví dụ thẻ button trong HTML
• Ví dụ thẻ button trong HTML: gọi hàm JavaScript
• Ví dụ thẻ button trong HTML: Submit Form
• Ví dụ thẻ button trong HTML: Reset Form
• Các thuộc tính của thẻ button trong HTML
• Trình duyệt hỗ trợ
• Ví dụ thẻ button trong HTML
• Ví dụ thẻ button trong HTML: gọi hàm JavaScript
• Ví dụ thẻ button trong HTML: Submit Form
• Ví dụ thẻ button trong HTML: Reset Form
• Các thuộc tính của thẻ button trong HTML
• Trình duyệt hỗ trợ
• 1. Cách sử dụng thẻ button trong HTML
• 2. Thuộc tính của thẻ button trong html
• 3. Thiết lập CSS cho thẻ button

• Thẻ Button trong HTML
• Ví dụ thẻ button trong HTML
• Ví dụ thẻ button trong HTML: gọi hàm JavaScript
• Ví dụ thẻ button trong HTML: Submit Form
• Ví dụ thẻ button trong HTML: Reset Form
• Các thuộc tính của thẻ button trong HTML
• Trình duyệt hỗ trợ

Thẻ trong HTML được sử dụng để tạo các nút có thể click bên trong form trên trang web của bạn. Bạn có thể đặt nội dung như văn bản hoặc hình ảnh vào bên trong thẻ .........

Bạn nên luôn chỉ định thuộc tính type cho một thẻ . Vì các trình duyệt sử dụng kiểu mặc định khác nhau cho phần tử button.

Thẻ HTML Button có thể được sử dụng bên trong hoặc bên ngoài form.

Bên trong form, nó có tác dụng như một nút gửi hoặc reset form.

Bên ngoài form, nó có thể gọi hàm JavaScript để thực hiện một nhiệm vụ nào đó.

Ví dụ thẻ button trong HTML

Click Here

Kết quả:

---

Ví dụ thẻ button trong HTML: gọi hàm JavaScript

Trong ví dụ này, khi bạn click nút click here trình duyệt sẽ hiển thị thông báo với nội dung "hello html button".

Click Here  

Kết quả:

---

Ví dụ thẻ button trong HTML: Submit Form

Trong ví dụ này, khi bạn click nút Submit, các thông tin trong form sẽ được gửi đến máy chủ.

  
Enter Name:
  
Submit  
  

Kết quả:

---

Ví dụ thẻ button trong HTML: Reset Form

Trong ví dụ này, khi bạn click vào nút resut thì những phần tử trong form được reset về giá trị ban đầu.

  
Enter Name:
  
reset  

Kết quả:

---

Các thuộc tính của thẻ button trong HTML

Thẻ hỗ trợ toàn bộ thuộc tính chung như các thẻ HTML khác và một số thuộc tính bổ xung trong bảng sau:

Thuộc tính	Mô tả
autofocus	Chỉ định rằng một nút sẽ tự động focus trong khi tải trang.
disabled	Chỉ định một button sẽ bị vô hiệu hóa.
form	Chỉ định button này thuộc về một hoặc nhiều form.
formaction	Được sử dụng cho kiểu submit. Nó chị định rằng dữ liệu của form sẽ được gửi đi đâu khi form được submit.
formmethod	Chỉ đinh dữ liệu của form được gửi như thế nào.
formenctype	Nó chỉ định cách dữ liệu của form nên được mã hóa trước khi gửi nó tới máy chủ.
formnovalidate	Chỉ định rằng dữ liệu của form nên được kiểm tra tính hợp lệ khi submit.
formtarget	Chỉ định dữ liệu trả về sẽ được hiển thị ở đâu sau khi submit form.
name	Chỉ định tên của button.
type	Chỉ định kiểu của button.
value	Chỉ định giá trị của button.

---

Trình duyệt hỗ trợ

Thẻ	Chrome	IE	Firefox	Opera	Safari
	Yes	Yes	Yes	Yes	Yes

Thẻ button trong HTML cũng hỗ trợ các thuộc tính chung và thuộc tính sự kiện trong HTML.

---

---

Thẻ trong HTML được sử dụng để tạo các nút có thể click bên trong form trên trang web của bạn. Bạn có thể đặt nội dung như văn bản hoặc hình ảnh vào bên trong thẻ ……...

Bạn nên luôn chỉ định thuộc tính type cho một thẻ . Vì các trình duyệt sử dụng kiểu mặc định khác nhau cho phần tử button.

Thẻ HTML Button có thể được sử dụng bên trong hoặc bên ngoài form.

Bên trong form,
nó có tác dụng như một nút gửi hoặc reset form.

Bên ngoài form, nó có thể gọi hàm JavaScript để thực hiện một nhiệm vụ nào đó.

• Ví dụ thẻ button trong HTML
• Ví dụ thẻ button trong HTML: gọi hàm JavaScript
• Ví dụ thẻ button trong HTML: Submit Form
• Ví dụ thẻ button trong HTML: Reset Form
• Các thuộc tính của thẻ button trong HTML
• Trình duyệt hỗ trợ
• 1. Cách sử dụng thẻ button trong HTML
• 2. Thuộc tính của thẻ button trong html
• 3. Thiết lập CSS cho thẻ button

Ví dụ thẻ button trong HTML

Click Here

Kết quả:

Ví dụ thẻ button trong HTML: gọi hàm JavaScript

Trong ví dụ này, khi bạn click nút click here trình duyệt sẽ hiển thị thông
báo với nội dung “hello html button”.

Click Here  

Kết quả:

Ví dụ thẻ button trong HTML: Submit Form

Trong ví dụ này, khi bạn click nút Submit, các thông tin trong form sẽ được gửi đến máy chủ.

  
Enter Name:
  
Submit  
  

Kết quả:

Ví dụ thẻ button trong HTML: Reset Form

Trong ví dụ này, khi bạn click vào nút resut thì những phần tử trong form được reset về giá trị ban đầu.

  
Enter Name:
  
reset  

Kết quả:

Các thuộc tính của thẻ button trong HTML

Thẻ hỗ trợ toàn bộ thuộc tính chung như các thẻ HTML khác và một số thuộc tính bổ xung trong bảng sau:

Thuộc tính	Mô tả
autofocus	Chỉ định rằng một nút sẽ tự động focus trong khi tải trang.
disabled	Chỉ định một button sẽ bị vô hiệu hóa.
form	Chỉ định button này thuộc về một hoặc nhiều form.
formaction	Được sử dụng cho kiểu submit. Nó chị định rằng dữ liệu của form sẽ được gửi đi đâu khi form được submit.
formmethod	Chỉ đinh dữ liệu của form được gửi như thế nào.
formenctype	Nó chỉ định cách dữ liệu của form nên được mã hóa trước khi gửi nó tới máy chủ.
formnovalidate	Chỉ định rằng dữ liệu của form nên được kiểm tra tính hợp lệ khi submit.
formtarget	Chỉ định dữ liệu trả về sẽ được hiển thị ở đâu sau khi submit form.
name	Chỉ định tên của button.
type	Chỉ định kiểu của button.
value	Chỉ định giá trị của button.

---

Trình duyệt hỗ trợ

Thẻ	Chrome	IE	Firefox	Opera	Safari
	Yes	Yes	Yes	Yes	Yes

Thẻ button trong HTML cũng hỗ trợ các thuộc tính chung và thuộc tính sự kiện trong HTML.

---

---

Trong bài này mình sẽ hướng dẫn cách sử dụng thẻ button trong HTML, đây là thẻ rất quan trọng trong cấu trúc form html.

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Thẻ button sẽ tạo ra một nút bấm, nó không tạo ra
một hành động submit form như thẻ input. Vì vậy, ta thường sử dụng kết hợp với Javascript để tạo ra các hành động theo yêu cầu của bài toán.

Trong cặp thẻ

, người dùng có thể đặt nội dung là một đoạn văn bản hoặc một hình ảnh. Đây là điểm khác nhau giữa thẻ button và thẻ input có type = button.

1. Cách sử dụng thẻ button trong HTML

Ví dụ: tạo nút bấm để show ra lời chào khi click.

Bài viết này
được đăng tại [free tuts .net]

    
        
        
    
    
        
Học lập trình miễn phí tại freetuts.net

        
            Click để in ra lời chào freetuts
        
    

Trong ví dụ trên mình tạo sự kiện onclick cho thẻ button để khi nút được click sẽ alert ra dòng text ‘Hello world!’.

2. Thuộc tính của thẻ button trong html

Dưới đây là một số thuộc tính thường sử dụng nhất.

• autofocus – tự động focus vào thẻ khi tải xong trang.
• type – sẽ quy điinh kiểu của nút, bao gồm: submit, reset, button.
• name – tên của
  nút.
• disabled – nút có bị vô hiệu hóa hay không.

Ví dụ: sử dụng thuộc tính type để tạo nút reset dữ liệu đã nhập.

    
    
    Reset

Trình duyệt hỗ trợ:

• Chrome
• Firefox
• IE
• Safari
• Opera

3. Thiết lập CSS cho thẻ button

Để thêm CSS cho button thì bạn có thể sử dụng hai cách:

• Cách 1 là thêm thuộc tính style và viết CSS ngay bên trong.
• Cách 2 là đặt cho thẻ input một class hoặc id, sau đó dựa vào thông tin này để tạo CSS.

Reset

Trong 3 cách trên thì bạn sử dụng cách nào cũng được.