Hướng dẫn button html & css - nút html & css

Nội dung chính

  • 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. 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 đó. 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  
  
  function hello[]{  
    alert["hello html button"];  
  }  

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".

  
Enter Name:
Submit

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".

  
Enter Name:
reset

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".

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ủ.
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.
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ínhMô 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 Chrome Chrome Chrome Chrome

IE

  • Số
  • tabindex="5"
  • Xác định thứ tự tab của một thành phần.
  • title

Text

  • title="Đây là title"
  • Xác định thêm thông tin cho thành phần.

xml:lang

HTML4.01XHTML1.0XHTML1.1
Xác định mã ngôn ngữ cho nội dung trong một thành phần, trong văn bản XHTML.

Thuộc tính sự kiện

title

Text

title="Đây là title"

Xác định thêm thông tin cho thành phần.

xml:lang

Xác định mã ngôn ngữ cho nội dung trong một thành phần, trong văn bản XHTML.
Tuy nhiên nếu chúng ta sử dụng trong form HTML để submit giá trị, khi đó các trình duyệt khác nhau sẽ submit theo các cách khác nhau.
VD: Internet Explorer sẽ submit giá trị giữa và , còn các trình duyệt khác sẽ submit giá trị theo tham số value khai báo bên trong

Thuộc tính

Thuộc tính sự kiện

Không được hỗ trợ trong DTD Strict

Thuộc tínhGiá trịVí dụMô tả
title title Code script title="code"
Script chạy khi click chuột. ondblclick ondblclick="code" Script chạy khi double click chuột.
onmousedown onmousedown="code"
reset
submit
Script chạy khi button chuột được nhấn. onmousemove
button: nút nhấn
reset: nút reset form
submit: nút submit form.
onmousemove="code" Script chạy khi di chuyển con trỏ chuột. onmouseout onmouseout="code"
Không hỗ trợ trong trình duyệt IE

Script chạy khi di chuyển con trỏ chuột ra khỏi thành phần.

Thuộc tínhGiá trịVí dụMô tả
accesskey Ký tự accesskey="g" Xác định một phím tắc để truy cập vào một thành phần.
class Tên class class="section" Tên class
class="section" dir
ltr
rtl ltr dir="rtl"
Xác định hướng văn bản cho các nội dung trong một thành phần. id Tên id id="layout"
Xác định tên id cho thành phần, mỗi thành phần chỉ có một id duy nhất [hoặc một id chỉ có trong một thành phần] trong một văn bản HTML lang Mã ngôn ngữ lang="vi"
Xác định mã ngôn ngữ cho nội dung trong một thành phần. style Kiểu định dạng style="color: red"
Xác định một định dạng cho một thành phần. tabindex Số tabindex="5"
Xác định thứ tự tab của một thành phần. title Text title="Đây là title"
Xác định thêm thông tin cho thành phần. lang Mã ngôn ngữ lang="vi"

Xác định mã ngôn ngữ cho nội dung trong một thành phần.

style

Thuộc tínhGiá trịVí dụMô tả
Kiểu định dạng style="color: red" Xác định một định dạng cho một thành phần. tabindex
Số style="color: red" Xác định một định dạng cho một thành phần. tabindex
Số style="color: red" Xác định một định dạng cho một thành phần. tabindex
Số style="color: red" Xác định một định dạng cho một thành phần. tabindex
Số style="color: red" Xác định một định dạng cho một thành phần. tabindex
Số style="color: red" Xác định một định dạng cho một thành phần. tabindex
Số style="color: red" Xác định một định dạng cho một thành phần. tabindex
Số style="color: red" Xác định một định dạng cho một thành phần. tabindex
Số style="color: red" Xác định một định dạng cho một thành phần. tabindex
Số style="color: red" Xác định một định dạng cho một thành phần. Script chạy khi nút trên bàn phím được thả ra.

Bài Viết Liên Quan

Chủ Đề