Thuộc tính button trong CSS

Thẻ button sẽ tạo ra một nút bấm.

Trong cặp thẻ <button></button> 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.

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

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

Code RUN
<!DOCTYPE html>
<html>
    <head>
    	<title>Học lập trình miễn phí tại freetuts.net</title>
		<meta charset="utf-8">
	</head>
    <body>
    	<h1>Học lập trình miễn phí tại freetuts.net</h1>

		<button type="button" onclick="alert('Hello Freetuts.net!')" >
			Click để in ra lời chào freetuts
		</button>
	</body>
</html>

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

Thuộc tính của thẻ button

  • autofocus - tự động focus vào thẻ khi tải xonng 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.

Code RUN
<form>
	<input type="text" name="username">
	<input type="text" name="email">
	<button type="reset">Reset</button>
</form>

Trình duyệt hỗ trợ

  • Chrome
  • Firefox
  • IE
  • Safari
  • Opera

Tham khảo: w3schools.com

Nguồn: freetuts.net