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ử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?