Bạn có thể đặt một liên kết trong một nút HTML không?

Trong bài viết này, chúng ta sẽ khám phá ba cách khác nhau để bạn có thể làm cho một nút HTML hoạt động giống như một liên kết.

Đây là những phương pháp chúng ta sẽ đi qua

1. Tạo kiểu cho một liên kết trông giống như một nút
2. Sử dụng các thuộc tính action và formaction trong một biểu mẫu
3. Sử dụng sự kiện onclick JavaScript

Nhưng trước tiên, hãy xem xét cách tiếp cận sai

Tại sao cách tiếp cận này với phần tử freeCodeCamp 6 không hoạt động?

Đoạn mã bên dưới dẫn đến trang web freeCodeCamp khi được nhấp vào

  
    freeCodeCamp
   

Tuy nhiên, đây không phải là HTML hợp lệ

Phần tử

  freeCodeCamp  

7 có thể được bọc quanh toàn bộ đoạn văn, danh sách, bảng, v.v., thậm chí toàn bộ phần, miễn là không có nội dung tương tác bên trong (e. g. , nút hoặc các liên kết khác). - (Nguồn. Nhóm Công tác Công nghệ Ứng dụng Siêu văn bản Web)

Đây được coi là phương pháp không tốt vì nó làm cho ý định của người dùng không rõ ràng

Các liên kết được cho là điều hướng người dùng đến một phần khác của trang web hoặc một trang web bên ngoài. Và các nút được cho là để thực hiện một hành động cụ thể như gửi biểu mẫu.  

Khi bạn lồng cái này vào cái kia, nó sẽ khiến bạn bối rối không biết bạn muốn thực hiện hành động nào. Đó là lý do tại sao tốt nhất là không lồng nút bên trong thẻ neo

Cách tạo kiểu cho một liên kết trông giống như một nút bằng CSS

Cách tiếp cận đầu tiên này hoàn toàn không sử dụng nút. Chúng ta có thể tạo kiểu cho thẻ neo trông giống như một nút bằng CSS

Đây là kiểu HTML mặc định cho thẻ neo

Chúng ta có thể thêm một lớp vào thẻ neo và sau đó sử dụng bộ chọn lớp đó để tạo kiểu cho phần tử.  

  freeCodeCamp  

Nếu bạn muốn liên kết mở ra một trang mới, bạn có thể thêm thuộc tính

  freeCodeCamp  

8 như thế này

  freeCodeCamp  

Sau đó, chúng ta có thể thêm màu nền và thay đổi màu chữ như thế này

.fcc-btn {
  background-color: #199319;
  color: white;
}

Bước tiếp theo là thêm một số khoảng đệm xung quanh văn bản.

.fcc-btn {
  background-color: #199319;
  color: white;
  padding: 15px 25px;
}

Cuối cùng, chúng ta có thể sử dụng thuộc tính text-decoration để xóa phần gạch chân khỏi văn bản.

.fcc-btn {
  background-color: #199319;
  color: white;
  padding: 15px 25px;
  text-decoration: none;
}

Bây giờ chúng ta có một thẻ neo giống như một cái nút.

Chúng tôi cũng có thể làm cho "nút" này tương tác hơn một chút bằng cách thay đổi màu nền tùy thuộc vào trạng thái của liên kết

.fcc-btn:hover {
  background-color: #223094;
}

Chúng tôi có thể thiết kế phức tạp hơn, nhưng đây chỉ là để cho bạn thấy những điều cơ bản về tạo kiểu cho một liên kết giống như một nút

Bạn cũng có thể chọn sử dụng thư viện CSS như Bootstrap

  
    freeCodeCamp
   

0

Nếu dự án của bạn đã bao gồm Bootstrap thì bạn có thể sử dụng các kiểu nút tích hợp sẵn. Nhưng tôi sẽ không nhập Bootstrap chỉ để tạo kiểu cho một liên kết.

Các vấn đề với phương pháp này là gì?

Có một số tranh luận liệu có nên tạo kiểu liên kết dưới dạng nút hay không. Một số người sẽ lập luận rằng các liên kết phải luôn trông giống như các liên kết và các nút phải giống như các nút

Trong cuốn sách web có tựa đề Resilient Web Design, Jeremy Keith nói rằng

một tài liệu không nên được sử dụng để thay thế cho một tài liệu khác, nếu không thì kết quả cuối cùng là lừa đảo

Tại sao tôi bận tâm đưa ra cuộc tranh luận này?

Mục tiêu của tôi không phải là khiến bạn chọn một bên trong cuộc tranh luận thay vì một bên khác. Tôi chỉ muốn bạn biết về cuộc thảo luận đang diễn ra này

Cách sử dụng thuộc tính freeCodeCamp 9 và freeCodeCamp 0 để tạo nút trong biểu mẫu

Cách sử dụng thuộc tính freeCodeCamp 9

Một cách khác là lồng nút bên trong một biểu mẫu và sử dụng thuộc tính hành động

Ví dụ đầu vào

  
    freeCodeCamp
   

4

Ví dụ về nút

  
    freeCodeCamp
   

5

Đây sẽ là kiểu nút mặc định

Chúng tôi có thể sử dụng các kiểu giống như trước đó, nhưng chúng tôi sẽ phải thêm con trỏ chuột và đặt đường viền thành không, như thế này

  freeCodeCamp  

0

Cách sử dụng thuộc tính freeCodeCamp 0

Tương tự như cách tiếp cận trước, chúng ta có thể tạo một biểu mẫu và sử dụng thuộc tính formaction

Ví dụ đầu vào

  freeCodeCamp  

1

Ví dụ về nút

  freeCodeCamp  

2

Bạn chỉ có thể sử dụng thuộc tính formaction với đầu vào và nút có

  freeCodeCamp  

3 hoặc

  freeCodeCamp  

4.  

Điều này có đúng về mặt ngữ nghĩa không?

Mặc dù đây có vẻ là một giải pháp hiệu quả, vẫn có một câu hỏi liệu điều này có đúng về mặt ngữ nghĩa không

Chúng tôi đang sử dụng thẻ biểu mẫu nhưng thẻ này không hoạt động như biểu mẫu thực. Mục đích của biểu mẫu là thu thập và gửi dữ liệu người dùng

Nhưng chúng tôi đang sử dụng nút gửi để điều hướng người dùng đến một trang khác

Khi nói đến ngữ nghĩa, đây không phải là cách tốt để sử dụng thẻ biểu mẫu

Tác dụng phụ khi sử dụng các thuộc tính hành động và hình thành

Khi bạn nhấp vào nút, điều thú vị sẽ xảy ra với URL. URL hiện có dấu chấm hỏi ở cuối URL

Lý do cho sự thay đổi này là vì biểu mẫu đang sử dụng phương thức GET. Bạn có thể chuyển sang phương thức POST, nhưng có thể có trường hợp điều đó cũng không lý tưởng

  freeCodeCamp  

3

Mặc dù cách tiếp cận này là HTML hợp lệ, nhưng nó đi kèm với tác dụng phụ ngoài ý muốn này

Cách sử dụng sự kiện onclick JavaScript để tạo nút

Trong các cách tiếp cận trước, chúng tôi đã xem xét các giải pháp HTML và CSS. Nhưng chúng ta cũng có thể sử dụng JavaScript để đạt được kết quả tương tự

Ví dụ đầu vào

  freeCodeCamp  

4

Ví dụ về nút

  freeCodeCamp  

5

  freeCodeCamp  

5 đại diện cho vị trí của một URL cụ thể. Trong trường hợp này,

  freeCodeCamp  

6 sẽ trả về https. //www. freecodecamp. tổ chức/

Hạn chế của phương pháp này

Trong khi giải pháp này hoạt động, có một số vấn đề tiềm ẩn cần xem xét

Nếu người dùng đã quyết định tắt JavaScript trong trình duyệt của họ thì rõ ràng giải pháp này sẽ không hiệu quả. Thật không may, điều đó có thể dẫn đến trải nghiệm người dùng kém

Phần kết luận

Mục tiêu của bài viết này là chỉ cho bạn ba cách khác nhau mà bạn có thể làm cho các nút hoạt động giống như các liên kết

Cách tiếp cận đầu tiên là thiết kế một liên kết trông giống như một nút. Chúng tôi cũng đã xem xét cuộc tranh luận liệu có nên thay đổi giao diện của các liên kết để trông giống một yếu tố khác hay không

Cách tiếp cận thứ hai sử dụng các thuộc tính form và formaction. Nhưng chúng tôi cũng biết được rằng phương pháp này có một số tác dụng phụ với URL và không đúng về mặt ngữ nghĩa

Cách tiếp cận thứ ba đã sử dụng sự kiện onclick JavaScript và Cửa sổ. địa điểm. href. Nhưng chúng tôi cũng biết được rằng phương pháp này có thể không hoạt động nếu người dùng quyết định tắt JavaScript trong trình duyệt của họ

Là một nhà phát triển, điều thực sự quan trọng là phải xem xét ưu và nhược điểm của một phương pháp cụ thể trước khi kết hợp nó vào dự án của bạn.  

Tôi hy vọng bạn thích bài viết này và học được một vài điều trên đường đi

Mã hóa vui vẻ

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

QUẢNG CÁO

---

Jessica Wilkins

Tôi là một nhạc sĩ và một lập trình viên

---

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

Tôi có thể đặt thẻ A bên trong một nút không?

Bạn có thể có một nút bên trong một liên kết?

Việc nhúng phần tử nút vào trong liên kết trong HTML5 là bất hợp pháp . Mà nó có thể quan tâm.