Câu hỏi Làm cách nào để tạo một nút HTML hoạt động giống như một liên kết?


Tôi muốn tạo một nút HTML hoạt động như một liên kết. Vì vậy, khi bạn nhấp vào nút, nó sẽ chuyển hướng đến một trang. Tôi muốn nó càng dễ tiếp cận càng tốt.

Tôi cũng thích nó nên không có bất kỳ ký tự thừa nào, hoặc các tham số trong URL.

Làm thế nào tôi có thể đạt được điều này?


Dựa trên các câu trả lời được đăng cho đến nay, tôi hiện đang thực hiện việc này:

<form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

nhưng vấn đề với điều này là trong Safari và Trình duyệt web IE, nó thêm ký tự dấu chấm hỏi vào cuối URL. Tôi cần tìm một giải pháp không thêm bất kỳ ký tự nào vào cuối URL.

Có hai giải pháp khác để thực hiện việc này: Sử dụng JavaScript hoặc tạo kiểu liên kết để trông giống như một nút.

Sử dụng JavaScript:

<button onclick="window.location.href='/page2'">Continue</button>

Nhưng điều này rõ ràng đòi hỏi JavaScript, và vì lý do đó, người đọc màn hình ít truy cập hơn. Điểm của một liên kết là đi đến một trang khác. Vì vậy, cố gắng để làm cho một nút hành động như một liên kết là giải pháp sai. Đề xuất của tôi là bạn nên sử dụng liên kết và tạo kiểu cho nó trông giống như một nút.

<a href="/link/to/page2">Continue</a>

1374
2018-05-25 16:39


gốc


Thay đổi GET thành POST. Không ai có vẻ đã giải quyết vấn đề đầu tiên của OP, đó là ? trên URL. Điều này là do hình thức type="GET", thay đổi thành type="POST" và ? ở cuối URL biến mất. Điều này là do GET gửi tất cả các biến trong URL, do đó ?. - redfox05
@ redfox05 Điều này làm việc trong một bối cảnh mà bạn không nghiêm ngặt về phương pháp bạn chấp nhận cho các trang của bạn. Trong bối cảnh bạn từ chối bài đăng trên các trang đang mong đợi GET nó sẽ thất bại. Tôi vẫn nghĩ rằng bằng cách sử dụng một liên kết có ý nghĩa với báo trước rằng nó sẽ không phản ứng với "spacebar" khi nút hoạt động như thế nào. Ngoài ra một số phong cách và hành vi sẽ khác nhau (chẳng hạn như kéo được). Nếu bạn muốn trải nghiệm "liên kết nút" thực sự, có chuyển hướng phía máy chủ để hoàn thành URL bằng ? để loại bỏ nó cũng có thể là một lựa chọn. - Nicolas Bouvrette
cssbuttongenerator.com có thể có ích nếu bạn muốn tạo một nút với css. - snow
Tôi nghĩ tốt hơn là tạo một liên kết trông giống như một nút - yasar


Các câu trả lời:


HTML

Cách HTML đơn giản là đặt nó vào <form> trong đó bạn chỉ định URL mục tiêu mong muốn trong action thuộc tính.

<form action="http://google.com">
    <input type="submit" value="Go to Google" />
</form>

Nếu cần, hãy đặt CSS display: inline; trên biểu mẫu để giữ nó trong luồng với văn bản xung quanh. Thay vì <input type="submit"> trong ví dụ trên, bạn cũng có thể sử dụng <button type="submit">. Sự khác biệt duy nhất là <button> yếu tố cho phép trẻ em.

Bạn muốn có thể sử dụng trực giác <button href="http://google.com"> tương tự với <a> nhưng không may là thuộc tính này không tồn tại theo Đặc tả HTML.

CSS

Nếu CSS được cho phép, chỉ cần sử dụng <a> mà bạn tạo kiểu trông giống như một nút sử dụng trong số những người khác appearance bất động sản (chỉ hỗ trợ Internet Explorer hiện tại (tháng 7 năm 2015) vẫn nghèo).

<a href="http://google.com" class="button">Go to Google</a>
a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

Hoặc chọn một trong nhiều thư viện CSS như Bootstrap.

<a href="http://google.com" class="btn btn-default">Go to Google</a>

JavaScript

Nếu JavaScript được cho phép, hãy đặt window.location.href.

<input type="button" onclick="location.href='http://google.com';" value="Go to Google" />

1585
2018-05-25 16:40



Đơn giản và tốt đẹp. Một giải pháp tốt. Thêm vào display: inlinevào biểu mẫu để giữ nút trong luồng. - Pekka 웃
trong safari, điều này thêm một dấu chấm hỏi vào cuối url ... có cách nào để làm điều đó mà không thêm bất cứ điều gì vào url? - Andrew
@BalusC Giải pháp tốt đẹp, nhưng nếu nó là bên trong một số hình thức khác (hình thức cha mẹ), sau đó nhấn nút này chuyển hướng đến địa chỉ trong thuộc tính hành động hình thức của cha mẹ. - Vladimir
Là nó chỉ cho tôi hoặc là thẻ <button> thiếu một thuộc tính rõ ràng href?
Trông đơn giản và tốt đẹp, nhưng có thể có tác dụng phụ nếu không được coi là đúng. tức là tạo biểu mẫu thứ 2 trong trang, biểu mẫu lồng nhau, v.v. - Tejasvi Hegde


<button onclick="location.href='http://www.example.com'" type="button">
     www.example.com</button>

409
2018-05-25 16:44



@pinouchon Nên hoạt động. cửa sổ được ngụ ý. Có thể là lỗi IE9, stackoverflow.com/questions/7690645/… - Adam
Có vẻ như nếu bạn không chỉ định type = "button" thì điều này sẽ không hoạt động. Có vẻ như nút sẽ mặc định là "gửi" - kenitech
Nếu bạn muốn mở liên kết trong cửa sổ / tab mới sử dụng: onclick = "window.open ('example.com ',' _ blank '); "; - bennos
@kenitech chính xác, theo thông số kỹ thuật: "Các thiếu giá trị mặc định là Nút gửi tiểu bang." - Niels Keurentjes
nhưng người dùng không thể nhấp chuột phải mở trong tab mới, để làm việc, bạn cần thẻ neo - Irshu


Nếu đó là giao diện trực quan của nút bạn đang tìm kiếm trong thẻ liên kết HTML cơ bản thì bạn có thể sử dụng Twitter Bootstrap để định dạng bất kỳ liên kết / nút loại HTML phổ biến nào sau đây xuất hiện dưới dạng nút. Xin lưu ý sự khác biệt trực quan giữa phiên bản 2, 3 hoặc 4 của khung:

<a class="btn" href="">Link</a>
<button class="btn" type="submit">Button</button>
<input class="btn" type="button" value="Input">
<input class="btn" type="submit" value="Submit">

Bootstrap (v4) mẫu xuất hiện:

Sample output of Boostrap v4 buttons

Bootstrap (v3) mẫu xuất hiện:

Sample output of Boostrap v3 buttons

Bootstrap (v2) mẫu xuất hiện:

Sample output of Boostrap v2 buttons


396
2017-12-05 08:59



Có vẻ hơi quá mức cần thiết để tạo kiểu cho một nút duy nhất, phải không? Với các hiệu ứng đường viền, đệm, nền và các hiệu ứng CSS khác, bạn có thể tạo kiểu cho các nút và liên kết trông giống nhau mà không mang lại toàn bộ khung công tác. Các phương pháp Bootstrap sử dụng là tốt, tuy nhiên bằng cách sử dụng Bootstrap có vẻ quá nhiều. - scottkellum
Đã sử dụng Twitter Bootstrap trong dự án của tôi, vì vậy câu trả lời này hoàn hảo cho tôi - Craig Howard
Đây là câu trả lời hay nhất. - arame3333


Sử dụng:

<a href="http://www.stackoverflow.com/">
    <button>Click me</button>
</a>

Rất tiếc, đánh dấu này không còn hợp lệ trong HTML5 nữa và sẽ không xác thực hoặc cũng không hoạt động như dự kiến. Sử dụng cách tiếp cận khác.


130
2018-05-25 16:42



Không (X) HTML xác thực. - BalusC
@BalusC: Cũng như thế điều này trang - Robert Harvey♦
@ Rob: đó không phải là vấn đề của tôi :) Ném nó ở Meta và xem. Tuy nhiên target thuộc tính là imo trên cạnh. - BalusC
Không hoạt động trong IE8 (Chế độ tiêu chuẩn) - Pieter Kuijpers


Tính đến HTML5, các nút hỗ trợ formaction thuộc tính. Hay nhất của tất cả, không có Javascript hoặc trickery là cần thiết.

<form>
  <button formaction="http://stackoverflow.com">Go to Stack Overflow!</button>
</form>

Cẩn thận

  • Phải được bao quanh bởi <form> thẻ.
  • <button> loại phải là "gửi" (hoặc không xác định), tôi không thể làm cho nó hoạt động với loại "nút". Mà đưa lên điểm dưới đây.
  • Ghi đè tác vụ mặc định trong biểu mẫu. Nói cách khác, nếu bạn làm điều này bên trong một hình thức khác, nó sẽ gây ra xung đột.

Tài liệu tham khảo: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction Hỗ trợ trình duyệt: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Browser_compatibility


90
2017-07-02 19:03



Chỉ cần hoàn thành thông tin: formaction tương thích kể từ "Thế giới IE"kể từ phiên bản 10 và ở trên - Luca Detomi
@LucaDetomi - Đó là chính xác, tuy nhiên nó là HTML5 cụ thể. Tôi đã thêm một liên kết khác với dữ liệu hỗ trợ. - EternalHour
@EternalHour Thực sự tò mò. Trong các ví dụ bạn và tôi đã cung cấp là có phải là một sự khác biệt đáng kể giữa hành vi của hai hình thức? Trong trường hợp cụ thể này, <button formaction> === <form action>? - pseudosavant
@pseudosavant - Sự khác biệt là câu trả lời của bạn dựa trên Javascript để hoạt động. Trong giải pháp này, không cần Javascript, nó là HTML thẳng. - EternalHour
Nó hữu ích để lưu ý rằng điều này chỉ hoạt động khi được bao bọc bởi các thẻ biểu mẫu. Tìm thấy rằng ra một cách khó khăn ... - Adsy2010


Nó thực sự rất đơn giản và không sử dụng bất kỳ phần tử biểu mẫu nào. Bạn chỉ có thể sử dụng thẻ <a> với một nút bên trong :).

Như thế này:

<a href="http://www.google.com" target="_parent"><button>Click me !</button></a>

Và nó sẽ tải href vào cùng một trang. Muốn có một trang mới? Chỉ dùng target="_blank".


41
2018-02-11 15:29



Trong khi công trình này, nó không nên được coi là một giải pháp nhưng một workaround vì nếu bạn vượt qua mã này thông qua W3C validator, bạn sẽ nhận được lỗi. - Hyder B.
Có, Hyder B. bạn nói đúng, nhưng bạn cũng nên nhớ rằng các tiêu chuẩn chỉ là hướng dẫn thô. Là một lập trình viên, bạn nên luôn luôn suy nghĩ bên ngoài hộp và thử những thứ không có trong cuốn sách;). - Lucian Minea


Nếu bạn đang sử dụng biểu mẫu bên trong, hãy thêm thuộc tính type = "đặt lại" cùng với phần tử nút. Nó sẽ ngăn chặn hành động biểu mẫu.

<button type="reset" onclick="location.href='http://www.example.com'">
    www.example.com
</button>

35
2018-01-24 06:59





<form>
    <input TYPE="button" VALUE="Home Page"
        onclick="window.location.href='http://www.wherever.com'"> 
</form>

24
2018-05-25 16:41



@Robusto đó là một nhận xét rất lén lút về không gian trống đã từng ở đó :) Đây là không phải một giải pháp tốt IMO, vì nó sẽ không hoạt động nếu không có JavaScript. - Pekka 웃
@ Pekka: yup, và cũng không phải là xhtml được tạo tốt - Sean Patrick Floyd
nếu sử dụng biểu mẫu chỉ cần sử dụng gửi, nếu sử dụng onclick lý do tại sao bận tâm với biểu mẫu. -1 - NimChimpsky
Nó không phải là HTML được định dạng tốt. Tag input không có thẻ kết thúc. - Peter Mortensen
@PeterMortensen Theo Thông số HTML, các input phần tử là phần tử void. Nó phải có thẻ bắt đầu nhưng không được có thẻ kết thúc. - ghoppe


Bạn có thể chỉ cần đặt một thẻ xung quanh phần tử:

<a href="http://google.com" target="_blank">
<button>My Button</button>
</a>

https://jsfiddle.net/hj6gob8b/


22
2018-01-16 04:24



Tôi không chắc tại sao điều này không có nhiều upvotes, phải trung thực. Nó hoạt động chính xác như tôi cần, và tôi đã làm theo cách này bởi vì tôi muốn nhện công cụ tìm kiếm có thể phát hiện và theo liên kết. Với JS có lẽ sẽ không xảy ra, và tôi không quá chắc chắn về hành vi của công cụ tìm kiếm khi nói đến các biểu mẫu. Nó cũng không dẫn đến bất kỳ bố cục hoặc hành vi phụ nào về hành vi (mặc dù tôi đã gán một lớp cho neo và đặt text-decoration cho lớp học đó none). - Bart Read
Không, bạn không thể. HTML cấm làm tổ <button> phía trong <a>. - Quentin
Đây là cơ bản giống như câu trả lời này từ những năm trước. - Quentin
Nếu nó cấm thì tại sao nó hoạt động? :) Không có nhà phát triển nghiêm túc nào chú ý đến mọi thứ trình xác nhận của W3C nói ... hãy thử chuyển qua Facebook hoặc Google hoặc bất kỳ trang web khổng lồ nào qua đó ... Web không chờ ai - Uriahs Victor
@UriahsVictor Nó có thể làm việc ngày hôm nay, nhưng một ngày các nhà cung cấp trình duyệt có thể quyết định thay đổi hành vi vì nó không hợp lệ. - Jacob Alvarez


Có bất kỳ nhược điểm để làm một cái gì đó như sau?

<a class='nostyle' href='http://www.google.com/'>
    <span class='button'>Schedule</span>
</a>

Ở đâu a.nostyle là một lớp có kiểu dáng liên kết của bạn (nơi bạn có thể loại bỏ kiểu dáng liên kết chuẩn) và span.button là một lớp có kiểu dáng cho "nút" của bạn (nền, đường viền, độ dốc, v.v.).


17
2018-03-30 22:46



Không có nhược điểm mà tôi có thể nhìn thấy, và hoạt động mà không có javascript, bên trong một hình thức và có lẽ trong tất cả các tình huống khác. Một khoảng có thể được tạo kiểu để có một nút (và cho người dùng cuối, giống hệt nhau) xuất hiện theo CSS của riêng bạn hoặc theo khuôn khổ với các tùy chọn có sẵn cho các nút - chẳng hạn như Bootstrap. Đây là câu trả lời hay nhất tôi đã thấy và được sử dụng tốt trong html5. - Geoff Kendall
Điều này dẫn đến câu hỏi "làm cách nào để tạo kiểu cho liên kết giống như nút" mà tôi thấy đã được trả lời ở đây: stackoverflow.com/questions/710089/… - Allan Bowe


Có vẻ như có ba giải pháp cho vấn đề này (tất cả đều có ưu và nhược điểm).

Giải pháp 1: Nút trong một biểu mẫu.

<form method="get" action="/page2">
    <button type="submit">Continue</button>
</form>

Nhưng vấn đề với điều này là trong một số phiên bản của các trình duyệt phổ biến như Chrome, Safari và Internet Explorer, nó thêm một ký tự dấu chấm hỏi vào cuối URL. Vì vậy, nói cách khác cho mã trên URL của bạn sẽ kết thúc như thế này:

http://someserver/pages2?

Có một cách để sửa lỗi này, nhưng nó sẽ yêu cầu cấu hình phía máy chủ. Một ví dụ sử dụng Apache Mod_rewrite sẽ chuyển hướng tất cả các yêu cầu bằng dấu ? đến URL tương ứng của họ mà không cần ?. Đây là một ví dụ sử dụng .htaccess, nhưng có một chuỗi đầy đủ đây:

RewriteCond %{THE_REQUEST} \?\ HTTP [NC]
RewriteRule ^/?(index\.cfm)? /? [R=301,L]

Cấu hình tương tự có thể khác nhau tùy thuộc vào máy chủ web và ngăn xếp được sử dụng. Vì vậy, một bản tóm tắt của phương pháp này:

Ưu điểm:

  1. Đây là một nút thực, và ngữ nghĩa nó có ý nghĩa.
  2. Vì đây là nút thực, nó cũng sẽ hoạt động như một nút thực (ví dụ: hành vi có thể kéo và / hoặc bắt chước một lần nhấp khi nhấn thanh dấu cách khi hoạt động).
  3. Không có JavaScript, không yêu cầu kiểu phức tạp.

Nhược điểm:

  1. Trailing ? trông xấu xí trong một số trình duyệt. Điều này có thể được sửa bởi một hack (trong một số trường hợp) bằng cách sử dụng POST thay vì GET, nhưng cách sạch sẽ là có chuyển hướng phía máy chủ. Nhược điểm với chuyển hướng phía máy chủ là nó sẽ gây ra một cuộc gọi HTTP thêm cho các liên kết này do chuyển hướng 304.
  2. Thêm thêm <form> thành phần
  3. Định vị phần tử khi sử dụng nhiều biểu mẫu có thể phức tạp và trở nên tồi tệ hơn khi xử lý các thiết kế đáp ứng. Một số bố trí có thể trở thành không thể đạt được với giải pháp này tùy thuộc vào thứ tự của các phần tử. Điều này có thể sẽ ảnh hưởng đến khả năng sử dụng nếu thiết kế bị ảnh hưởng bởi thử thách này.

Giải pháp 2: Sử dụng JavaScript.

Bạn có thể sử dụng JavaScript để kích hoạt onclick và các sự kiện khác để bắt chước hành vi của một liên kết bằng cách sử dụng nút. Ví dụ dưới đây có thể được cải thiện và loại bỏ khỏi HTML, nhưng nó chỉ đơn giản là để minh họa cho ý tưởng:

<button onclick="window.location.href='/page2'">Continue</button>

Ưu điểm:

  1. Đơn giản (cho yêu cầu cơ bản) và giữ ngữ nghĩa trong khi không yêu cầu một biểu mẫu bổ sung.
  2. Vì đây là nút thực, nó cũng sẽ hoạt động như một nút thực (ví dụ: hành vi có thể kéo và / hoặc bắt chước một lần nhấp khi nhấn thanh dấu cách khi hoạt động).

Nhược điểm:

  1. Yêu cầu JavaScript có nghĩa là ít truy cập hơn. Đây không phải là lý tưởng cho một phần tử cơ bản (cốt lõi) như một liên kết.

Giải pháp 3: Anchor (link) được tạo kiểu như một nút.

Tạo kiểu liên kết như nút tương đối dễ dàng và có thể cung cấp trải nghiệm tương tự trên các trình duyệt khác nhau. Bootstrap làm điều này, nhưng nó cũng dễ dàng đạt được trên của riêng bạn bằng cách sử dụng phong cách đơn giản.

Ưu điểm:

  1. Đơn giản (cho yêu cầu cơ bản) và hỗ trợ trình duyệt chéo tốt.
  2. Không cần <form> làm việc.
  3. Không cần JavaScript để làm việc.

Nhược điểm:

  1. Ngữ nghĩa là loại bị hỏng, bởi vì bạn muốn một nút hoạt động giống như một liên kết chứ không phải một liên kết hoạt động như một nút.
  2. Nó sẽ không tái tạo tất cả các hành vi của giải pháp # 1. Nó sẽ không hỗ trợ các hành vi tương tự như nút. Ví dụ: các liên kết phản ứng khác nhau khi được kéo. Ngoài ra, trình kích hoạt liên kết "thanh không gian" sẽ không hoạt động mà không có thêm một số mã JavaScript. Nó sẽ thêm rất nhiều phức tạp vì các trình duyệt không nhất quán về cách chúng hỗ trợ keypress sự kiện trên các nút.

Phần kết luận

Giải pháp # 1 (Nút trong biểu mẫu) có vẻ như minh bạch nhất đối với người dùng có yêu cầu công việc tối thiểu. Nếu bố cục của bạn không bị ảnh hưởng bởi lựa chọn này và tinh chỉnh phía máy chủ khả thi, đây là tùy chọn tốt cho các trường hợp khả năng truy cập là ưu tiên hàng đầu (ví dụ: liên kết trên trang lỗi hoặc thông báo lỗi).

Nếu JavaScript không phải là một trở ngại đối với các yêu cầu trợ năng của bạn, thì giải pháp # 2 (JavaScript) sẽ được ưu tiên hơn # 1 và # 3.

Nếu vì lý do nào đó, khả năng truy cập là rất quan trọng (JavaScript không phải là một tùy chọn) nhưng bạn đang ở trong tình huống mà thiết kế và / hoặc cấu hình máy chủ của bạn ngăn bạn sử dụng tùy chọn # 1, sau đó là giải pháp # 3 (Neo kiểu như nút) là giải pháp thay thế tốt giải quyết vấn đề này với tác động tối thiểu khả năng sử dụng.


17
2018-05-19 23:29