Ví dụ về mã liên kết nút HTML – Cách tạo siêu liên kết HTML bằng thuộc tính HREF trên thẻ – html cho một liên kết nút

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ẽ xem xét: 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

< strong> Bạn đang xem: html cho liên kết nút < br>

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ẽ xem xét:

  1. Tạo kiểu 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
  4. Nhưng trước tiên, hãy xem xét cách tiếp cận sai lầm.

    Why doesn ‘ Cách tiếp cận này với phần tử a có hoạt động không?

    Đoạn mã dưới đây dẫn đến webi freeCodeCamp te khi nó được nhấp.

      & lt; a href = "https://www.freecodecamp.org/" & gt;
        & lt; nút & gt; freeCodeCamp & lt; / button & gt;
      & lt; / a & gt;  

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

    Phần tử a có thể được bao 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ó tương tác nội dung bên trong (ví dụ: các nút hoặc các liên kết khác). – (Nguồn: Nhóm làm việc về công nghệ ứng dụng siêu văn bản trên web )

    Đây được coi là hành vi xấu vì nó khiến người dùng không rõ ý định của mình.

    Các liên kết phải điều hướng người dùng đến một phần khác của trang web hoặc một trang 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 một cái vào bên trong cái kia, sẽ khiến bạn khó hiểu về hành động mà bạn muốn thực hiện. Đó là lý do tại sao tốt nhất là không lồng một nút bên trong thẻ liên kết.

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

    Đây là kiểu HTML mặc định cho thẻ liên kết.

    blue-anchor-tag

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

      & lt; a class = "fcc-btn" href = "https://www.freecodecamp.org/" & gt; freeCodeCamp & lt; / a & gt;
     

    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 target = "_ blank" như sau:

      & lt; a target = "_ blank" class = "fcc-btn" href = "https://www.freecodecamp.org/" & gt; freeCodeCamp & lt; / a & gt;
     

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

     . fcc-btn {
      màu nền: # 199319;
      màu trắng;
    }  

    background-and-white-text

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

     . fcc-btn {
      màu nền: # 199319;
      màu trắng;
      đệm: 15px 25px;
    }  

    add-padding-1

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

     . fcc-btn {
      màu nền: # 199319;
      màu trắng;
      đệm: 15px 25px;
      văn bản-trang trí: không có;
    }  

    remove-underline

    Bây giờ chúng ta có một thẻ liên kết trông giống như một 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 {
      màu nền: # 223094;
    }  

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

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

      & lt; a class = "btn btn-primary" href = "https: // www .freecodecamp.org / "& gt; freeCodeCamp & lt; / a & gt;
     

    bootstrap-styles

    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.

    Vấn đề với cách tiếp cận này là gì?

    Có một số tranh luận về việc liệu nó có phải là phương pháp hay để tạo kiểu liên kết dưới dạng các nút. 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ư 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ó tiêu đề Thiết kế web có khả năng phục hồi , Jeremy Keith tuyên bố rằng

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

    Tại sao tôi lạ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 phải chọn một bên của cuộc tranh luận hơn 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 action formaction để tạo một nút trong một biểu mẫu

    Cách sử dụng action < / code> thuộc tính

    Một giải pháp thay thế khác là lồng nút bên trong biểu mẫu và sử dụng thuộc tính action.

    Ví dụ đầu vào:

      & lt; form action = "https://www.freecodecamp.org/" & gt;
        & lt; input type = "submit" value = "freeCodeCamp" & gt;
      & lt; / form & gt;  

    Ví dụ về nút:

      & lt; form action = "https: //www.freecodecamp. org / "& gt;
        & lt; button type = "submit" & gt; freeCodeCamp & lt; / button & gt;
      & lt; / form & gt;  

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

    default-button-style

    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ỏ con trỏ và đặt đường viền thành không, như sau:

     . fcc-btn {
      màu nền: # 199319;
      màu trắng;
      đệm: 15px 25px;
      văn bản-trang trí: không có;
      con trỏ: con trỏ;
      biên giới: không có;
    }
     

    remove-underline-1

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

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

    Ví dụ đầu vào:

      & lt; biểu mẫu & gt;
        & lt; input type = "submit" formaction = "https://www.freecodecamp.org/" value = "freeCodeCamp" & gt;
      & lt; / form & gt;  

    Ví dụ về nút:

      & lt; form & gt;
        & lt; button type = "submit" formaction = "https://www.freecodecamp.org/" & gt; freeCodeCamp & lt; / button & gt;
      & lt; / form & gt;  

    Bạn chỉ có thể sử dụng thuộc tính formaction với các đầu vào và nút có type = "image" hoặc type = "submit" .

    Đ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ả, nhưng vẫn có một câu hỏi đặt ra là liệu điều này có đúng về mặt ngữ nghĩa hay không.

    Chúng tôi đang sử dụng các thẻ biểu mẫu nhưng thẻ này không hoạt động giống như một 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à một cách hay để sử dụng các thẻ biểu mẫu.

    Tác dụng phụ khi sử dụng thuộc tính action và formaction

    Khi bạn nhấp vào nút , điều gì đó thú vị xảy ra với URL. URL bây giờ có một dấu chấm hỏi ở cuối nó.

    question-mark-at-end

    Lý do cho sự thay đổi này là do 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ó những trường hợp không phải là lý tưởng.

      & lt; form method = "POST" action = "https://www.freecodecamp.org/" & gt;
        & lt; button type = "submit" & gt; freeCodeCamp & lt; / button & gt;
      & lt; / form & gt;  

    Mặc dù phương pháp này là HTML hợp lệ, nhưng nó đi kèm với tác dụng phụ không mong 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:

      & lt; form & gt;
        & lt; input type = "button" onclick = "window.location.href = 'https: //www.freecodecamp.org/';" value = "freeCodeCamp" / & gt;
     & lt; / form & gt;  

    Ví dụ về nút:

      & lt; button onclick = "window.location.href = 'https : //www.freecodecamp.org/ '; "& gt; freeCodeCamp & lt; / button & gt; 

    location.href đại diện cho vị trí của một URL cụ thể. Trong trường hợp này, Window.location.href sẽ trả về https://www.freecodecamp.org/ .

    Hạn chế của cách tiếp cận này

    Mặc dù giải pháp này hoạt động hiệu quả, như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 hoạt động. Thật không may, điều đó có thể dẫn đến trải nghiệm người dùng kém.

    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 để bạn có thể làm cho các nút hoạt động giống như 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 rằng liệu có nên thay đổi giao diện của các liên kết để trông giống như một phần tử khác hay không.

    Cách tiếp cận thứ hai sử dụng thuộc tính biểu mẫu và biểu mẫu. Nhưng chúng tôi cũng biết rằng cách tiếp cận 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 JavaScript onclick và Window.location.href. Nhưng chúng tôi cũng biết rằng cách tiếp cận 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 những ư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 trong quá trình thực hiện.

    Chúc bạn viết mã vui vẻ!


Xem thêm những thông tin liên quan đến chủ đề html cho một liên kết nút

HTML - Siêu liên kết và hình ảnh

alt

  • Tác giả: Thanh Duong Huu
  • Ngày đăng: 2021-07-15
  • Đánh giá: 4 ⭐ ( 4649 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: HTML cơ bản

Các trạng thái cơ bản của Textbox, Nút và Liên kết – Init HTML

  • Tác giả: www.inithtml.com
  • Đánh giá: 4 ⭐ ( 6192 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bình thường, khi làm CSS cho Liên kết hoặc nút, bạn chỉ quan tâm đến trạng thái :hover. Nhưng để đầy đủ, bạn cũng cần...

Tổng hợp cách chèn link vào button trong html mới nhất 2020

  • Tác giả: xaydungweb.vn
  • Đánh giá: 4 ⭐ ( 9509 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chèn link vào button trong html là một trong những cách giúp tăng tỷ lệ chuyển đổi cho site cũng như là góp phần làm cho bài viết thêm đẹp hơn.

Liên kết trong CSS

  • Tác giả: comdy.vn
  • Đánh giá: 3 ⭐ ( 1065 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn này, bạn sẽ học cách tạo kiểu cho các trạng thái khác nhau của một liên kết bằng cách sử dụng CSS.

Làm cách nào để tạo nút HTML hoạt động như một liên kết?

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 2489 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] HTML Cách HTML đơn giản là đặt nó vào vị trí
    mà bạn chỉ định URL…

Liên Kết Trong HTML Dễ Hiểu

  • Tác giả: hocban.vn
  • Đánh giá: 4 ⭐ ( 3844 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài này mình sẽ hướng dẫn bạn cách chèn link (liên kết) trong HTML. Ứng dụng nhiều để chèn chèn, tạo liên kết trong tổng thể website.

Thẻ Tạo Link Liên Kết Trong HTML

  • Tác giả: nguyenhung.net
  • Đánh giá: 3 ⭐ ( 2149 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thẻ a trong HTML - Thẻ tạo link liên kết trong HTML. Bài viết sẽ hướng dẫn cho bạn chi tiết nhất về thẻ a trong HTML cũng như cách dùng nó khi làm web.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Cách làm tròn số thập phân trong Javascript - js làm tròn đến thập phân