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 mà 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: nút html có liên kế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 mà 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.

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

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

      & lt; a href = "https://www.freecodecamp.org/" & gt;
        & lt; nút & gt; freeCodeCamp & lt; / nút & 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 công tác về công nghệ ứng dụng siêu văn bả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 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 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ề cách 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 cài 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 liệu 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ư 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ó 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à 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 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 điều đó cũng không 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 ta đã 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 được 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 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 trong suốt quá trình.

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


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

Tạo nút trở lại đầu trang(Backtop) bằng Html, Css, Jquery | Unitop.vn

alt

  • Tác giả: Phan Văn Cương [Học Web Online]
  • Ngày đăng: 2021-03-06
  • Đánh giá: 4 ⭐ ( 5864 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nút bấm quay lại đầu trang hay còn gọi là backtop là một chức năng rất quan trọng trong website.
    Nó giúp tăng trải nghiệm người dùng khi đọc nội dụng trên web, vào thời điểm họ muốn quay lại đầu trang họ chỉ cần click vào thì trang web tự động cuộn lên đầu trang mà không cần phải kéo ngược lên mất thời gian.
    Chức năng này tôi sử dụng html, css và jquery nó rất phù hợp với những ai trên hành trình học lập trình web và trên hành trình học xây dựng giao diện website.
    ------
    » » Bấm đăng ký kênh để tránh bỏ sót video mới://bit.ly/2RMvXez
    » » Nhận tài liệu học web miễn phí qua mail: https://www.hocwebdilam.com
    ------------
    Liên Kết Quan Trọng
    » Nhận tài liệu miễn phí: https://hocwebdilam.com?utm_source=youtube
    » Blog lập trình: http://unitop.com.vn
    » Đăng ký khoá học web đi làm: https://unitop.vn
    » Fanpage: https://facebook.com/unitop.vn
    » Fb: https://facebook.com/cuongtienlen

    --------------------------
    Xem Lộ Trình Học Lập Trình Web Đi Làm
    » http://unitop.vn

    unitop hocwebdilam

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á: 4 ⭐ ( 9867 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…

Thẻ chèn liên kết trong HTML

  • Tác giả: giuseart.com
  • Đánh giá: 3 ⭐ ( 3608 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài học này hướng dẫn các bạn dùng thẻ chèn liên kết trong html để chèn liên kết đến một trang web, liên kết trong trang hoặc liên kết đến một địa chỉ email

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

  • Tác giả: nguyenhung.net
  • Đánh giá: 3 ⭐ ( 2702 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.

Hướng dẫn tạo các nút liên kết mạng xã hội bằng HTML và CSS

  • Tác giả: freetuts.net
  • Đánh giá: 4 ⭐ ( 1282 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các mạng xã hội hiện này là không thể thiếu với giới trẻ, nó phổ biến đến mức đã có nhiều người gọi nó là vấn nạn nghiện mạng xã hội. Chính vì vậy mà việc.

Các liên kết trong HTML

  • Tác giả: timoday.edu.vn
  • Đánh giá: 5 ⭐ ( 5637 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Siêu liên kết cho phép người sử dụng điều hướng tới những nội dung khác.

[Tự học HTML] Liên kết(Link) trong HTML

  • Tác giả: cafedev.vn
  • Đánh giá: 5 ⭐ ( 1366 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cafedev chia sẻ về Liên kết được tìm thấy trong gần như tất cả các trang web. Liên kết cho phép người dùng nhấp theo cách của họ từ trang này sang trang khác.

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ắt ngắn trong SQL: Hướng dẫn từng bước để thực hiện cắt ngắn trong SQL - hàm cắt ngắn trong sql

By ads_php