Nút HTML

Thẻ được sử dụng để tạo nút có thể nhấp trong biểu mẫu HTML 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 trong. nhãn

Bạn phải luôn chỉ định thuộc tính loại cho thẻ. Các trình duyệt khác nhau sử dụng loại mặc định khác nhau cho phần tử nút

Thẻ Nút HTML có thể được sử dụng bên trong và bên ngoài biểu mẫu

Nếu bạn sử dụng nó bên trong biểu mẫu, nó sẽ hoạt động như nút gửi. Bạn cũng có thể sử dụng nó làm nút đặt lại

Nếu bạn dùng ngoài form thì có thể gọi hàm JavaScript trên đó

---

Ví dụ về thẻ nút HTML

Hãy xem mã để hiển thị nút

Kiểm tra nó ngay bây giờ

đầu ra

Bấm vào đây

---

Ví dụ về nút HTML. Gọi hàm JavaScript

Hãy xem mã để gọi hàm JavaScript khi nhấp vào nút

Kiểm tra nó ngay bây giờ

đầu ra

Bấm vào đây

---

Ví dụ về nút HTML. gửi biểu mẫu

Hãy xem mã để gửi biểu mẫu khi nhấp vào nút

Kiểm tra nó ngay bây giờ

đầu ra

---

Ví dụ về nút HTML. Đặt lại biểu mẫu

Hãy xem mã để gửi biểu mẫu khi nhấp vào nút

Kiểm tra nó ngay bây giờ

đầu ra

---

Các thuộc tính của thẻ nút HTML

thẻ hỗ trợ tất cả các thuộc tính toàn cầu và một số thuộc tính bổ sung cụ thể

Có một danh sách các thuộc tính thẻ nút HTML

AttributeDescriptionautofocusChỉ định rằng một nút sẽ tự động lấy tiêu điểm trong khi tải trang. bị vô hiệu hóa Nó chỉ định rằng một nút sẽ bị vô hiệu hóa. formIt chỉ định một hoặc nhiều biểu mẫu mà nút thuộc về. formactionIt được sử dụng cho loại gửi. Nó chỉ định nơi gửi dữ liệu biểu mẫu khi biểu mẫu được gửi. formmethodIt chỉ định cách gửi dữ liệu biểu mẫu. formenctypeIt chỉ định cách mã hóa dữ liệu biểu mẫu trước khi gửi nó đến máy chủ. formnovalidateChỉ định rằng dữ liệu biểu mẫu không được xác thực khi gửi. formtargetIt chỉ định nơi hiển thị phản hồi sau khi gửi biểu mẫu. nameIt chỉ định tên của nút. typeIt chỉ định loại nút. valueIt chỉ định giá trị của nút

---

Trình duyệt hỗ trợ

Phần tử Chrome IE Firefox Opera SafariYesYesYesYesYes

Thẻ nút HTML cũng hỗ trợ các thuộc tính toàn cầu và sự kiện trong HTML

Các nút là một phần thiết yếu của các trang web. Bạn cần chúng cho các chức năng khác nhau, từ gửi thông tin và truy cập vào nhiều nội dung hơn đến liên kết đến các phần khác nhau của trang web và các trang web khác

HTML cung cấp cho bạn một số cách để thêm các nút vào trang web của bạn – với thẻ nút, liên kết neo và các loại đầu vào của

body {
        background-color: #8d8d8d;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }

0 và

body {
        background-color: #8d8d8d;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }

1

Trong bài viết này, tôi sẽ hướng dẫn bạn 4 trong số các phương pháp đó, để bạn có thể bắt đầu thêm các nút vào trang web của mình một cách thoải mái

Cách thêm nút vào trang web của bạn bằng thẻ nút

Thẻ nút là một trong những cách đơn giản nhất để thêm các nút vào trang web của bạn. Để sử dụng nó, tất cả những gì bạn phải làm là đặt văn bản mà bạn muốn nút có ngay giữa thẻ mở và thẻ đóng, như thế này

Sample Button

Tôi đã đặt nút ở giữa theo chiều ngang và chiều dọc bằng cách sử dụng các thuộc tính flexbox, lề và chiều cao

body {
        background-color: #8d8d8d;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }

Mọi thứ trên trang sẽ được căn giữa bằng CSS này khi chúng tôi tiếp tục

Để kích hoạt loại nút này, bạn phải thêm một số JavaScript. Trong đoạn mã bên dưới, với một số JavaScript nội tuyến, tôi làm cho nút hiển thị hộp cảnh báo trong trình duyệt bất cứ khi nào nó được nhấp vào

Sample Button

Cách thêm các nút vào trang web của bạn bằng thẻ neo

Bạn cũng có thể thêm các nút vào trang web của mình bằng thẻ neo. Thẻ neo chủ yếu được sử dụng để thêm liên kết vào trang web của bạn, nhưng bạn có thể tạo kiểu cho nó bằng CSS để trông giống như một nút thực

Ưu điểm của cách tiếp cận này là bạn có thể liên kết đến một trang mà không cần bất kỳ JavaScript nào

Trong ví dụ dưới đây, tôi tạo một nút có thẻ neo và liên kết nó với trang web chính thức của freeCodeCamp

Learn Coding for Free

Nó trông giống như một liên kết trong trình duyệt

Bạn có thể làm cho nó trông giống như một nút bằng một số CSS bằng cách xóa màu văn bản và gạch chân mặc định, đặt màu nền và màu nền trước bằng các thuộc tính màu, đồng thời thêm phần đệm và bán kính đường viền

 a {
        text-decoration: none;
        border: 0.2px solid #000;
        color: #000;
        background: #e6e4e4;
        padding: 5px;
        border-radius: 1px;
      }

Tất cả những gì tôi đã làm trong CSS là cố gắng bắt chước giao diện mặc định của các nút trong HTML

Thẻ neo bây giờ trông như thế này

Cách thêm các nút vào trang web của bạn với Loại đầu vào body { background-color: #8d8d8d; display: flex; align-items: center; justify-content: center; margin: 0 auto; height: 100vh; } 2

Bạn cũng có thể thêm các nút vào trang web của mình bằng loại nút đầu vào. Nó hoạt động chính xác như thẻ nút

Thẻ đầu vào là một phần tử trống, có nghĩa là nó không có thẻ đóng. Vậy làm thế nào để bạn hiển thị văn bản trong nút?

________số 8

Cách thêm các nút vào trang web của bạn với Loại đầu vào body { background-color: #8d8d8d; display: flex; align-items: center; justify-content: center; margin: 0 auto; height: 100vh; } 3

Bạn thường sử dụng kiểu gửi đầu vào bên trong thành phần biểu mẫu để dữ liệu do người dùng điền vào sẽ được gửi khi nhấp vào nút

Cũng giống như loại nút đầu vào, nó là một phần tử trống, vì vậy bạn cần một thuộc tính giá trị để thông báo cho người dùng về nội dung của nút

body {
        background-color: #8d8d8d;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }

0

Sự khác biệt giữa nút loại đầu vào và gửi loại đầu vào là khi bạn sử dụng loại nút gửi trong một biểu mẫu, dữ liệu sẽ được gửi mà không cần bất kỳ thao tác nào với JavaScript

Nhưng mặt khác, nút loại đầu vào cần một số thao tác với JavaScript để hoạt động. Vì vậy, khi bạn sử dụng một loại nút đầu vào bên trong thành phần biểu mẫu, dữ liệu sẽ không được gửi tự động khi được nhấp vào

Dự án nhỏ. Cách tạo nút đèn neon bằng HTML và CSS

Nút đèn neon là một xu hướng thiết kế đang làm dậy sóng vì nó đẹp. Với những gì bạn đã học được trong bài viết này, bạn có thể tạo một nút bằng thẻ nút và một số CSS

Đầu tiên, bạn phải thay đổi kiểu mặc định của nút

body {
        background-color: #8d8d8d;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }

1

body {
        background-color: #8d8d8d;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }

2

Cho đến nay, nút trông như thế này

Để triển khai hiệu ứng đèn neon, bạn có thể sử dụng thuộc tính

body {
        background-color: #8d8d8d;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }

4. Nó cho phép nhiều giá trị, sẽ là công cụ tạo hiệu ứng đèn neon

body {
        background-color: #8d8d8d;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }

4

Trong tài sản

body {
        background-color: #8d8d8d;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }

4

• giá trị đầu tiên đại diện cho phần bù trên trục x
• giá trị thứ hai đại diện cho phần bù trên trục y
• giá trị thứ ba đại diện cho bán kính mờ
• giá trị thứ tư đại diện cho bán kính trải rộng
• giá trị thứ năm là màu được áp dụng cho bóng

Tôi chỉ muốn bán kính trải rộng và màu sắc, vì vậy tôi đặt các giá trị khác bằng 0. Sau đó, tôi áp dụng giá trị bóng hộp cuối cùng vào bên trong nút bằng cách đính kèm

body {
        background-color: #8d8d8d;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }

6 vào nó

Hiện đã có hiệu ứng đèn neon trên nút

Phần kết luận

Bài viết này đã chỉ cho bạn một số cách để bạn có thể thêm nút vào trang web.
Trong HTML và CSS, luôn có nhiều cách để thực hiện cùng một việc – đó là một trong những lý do bạn có thể thêm nút vào trang web ngay cả khi có thẻ liên kết.

Bạn thậm chí có thể làm cho một nút hoạt động giống như một liên kết bằng cách bọc một thẻ liên kết xung quanh một nút

Bạn cũng có thể thêm các nút với hầu hết mọi thẻ khác, chẳng hạn như div, span và thậm chí cả thẻ p. Nhưng bạn nên tránh làm điều này vì khả năng truy cập và vì vậy bạn không làm ảnh hưởng đến SEO của trang web của mình. Rốt cuộc, bạn cũng phải làm cho trình thu thập dữ liệu web dễ dàng

Cảm ơn bạn đã đọc và tiếp tục mã hóa

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

---

Kolade Chris

Nhà phát triển web và nhà văn kỹ thuật tập trung vào các công nghệ giao diện người dùng

---

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Mã HTML cho một nút là gì?

Làm cách nào để kích hoạt nút trong HTML?

Các loại nút trong HTML là gì?

Làm cách nào để đặt hành động của nút trong HTML?