Tạo nút chuyển trang trong html

answer

1804

HTML

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

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ì trong ví dụ trên, bạn cũng có thể sử dụng . Sự khác biệt duy nhất là yếu tố cho phép trẻ em.

Theo trực giác, bạn mong muốn có thể sử dụng tương tự với phần tử, nhưng tiếc là không, 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 một kiểu mà bạn tạo kiểu giống như một nút sử dụng trong số các thuộc appearancetính khác [hiện tại chỉ hỗ trợ Internet Explorer [tháng 7 năm 2015] vẫn còn kém ].

Go to Google

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 .

Go to Google

JavaScript

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

1804 hữu ích 5 bình luận chia sẻ

answer

486


         www.example.com

486 hữu ích 5 bình luận chia sẻ

answer

421

Nếu đó là sự xuất hiện trực quan của một nút mà bạn đang tìm kiếm trong thẻ neo HTML cơ bản thì bạn có thể sử dụng khung Bootstrap Twitter để đị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:

Link
Button

Xuất hiện mẫu Bootstrap [v4] :

Xuất hiện mẫu Bootstrap [v3] :

Xuất hiện mẫu Bootstrap [v2] :

421 hữu ích 1 bình luận chia sẻ

answer

139

Sử dụng:


    Click me

Thật không may, đánh dấu này không còn hợp lệ trong HTML5 và sẽ không xác thực cũng như không luôn hoạt động như mong đợi. Sử dụng một cách tiếp cận khác.

139 hữu ích 4 bình luận chia sẻ

answer

113

Kể từ HTML5, các nút hỗ trợ formactionthuộc tính. Trên hết, không cần Javascript hay mánh khóe nào.


  Go to Stack Overflow!

Hãy cẩn thận

Phải được bao quanh bởi các thẻ.
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 đè hành động mặc định trong một biểu mẫu. Nói cách khác, nếu bạn làm điều này trong một hình thức khác, nó sẽ gây ra một cuộc xung đột.

Tham khảo: //developer.mozilla.org/en-US/docs/Web/HTML/Euity/button#attr-formaction Hỗ trợ trình duyệt: //developer.mozilla.org/en-US/docs/Web/ HTML / Element / button # Browser_compabilities

113 hữu ích 5 bình luận chia sẻ

answer

Nó là thực tế rất đơn giản và không sử dụng bất kỳ yếu tố hình thức. Bạn chỉ có thể sử dụng thẻ với một nút bên trong :].

Như thế này:

Click me !

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

50 hữu ích 2 bình luận chia sẻ

answer

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


    www.example.com

36 hữu ích 0 bình luận chia sẻ

answer

25 hữu ích 5 bình luận chia sẻ

answer

Dường 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 ở dạng.


    Continue

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 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ẽ trông giống như thế này:

http://someserver/pages2?

Có một cách để khắc phục điều 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ẽ là chuyển hướng tất cả các yêu cầu có dấu ?đến URL tương ứng của chúng mà không có ?. Dưới đây là một ví dụ sử dụng .htaccess, nhưng có một chủ đề đầy đủ ở đây :

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

Các 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:

Đây là một nút thực sự, và về mặt ngữ nghĩa nó có ý nghĩa.
Vì là nút thực, nên 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 nhấp chuột khi nhấn phím cách khi kích hoạt].
Không có JavaScript, không cần kiểu phức tạp.

Nhược điểm:

Trailing ?trông xấu xí trong một số trình duyệt. Điều này có thể được khắc phục bằng cách hack [trong một số trường hợp] bằng POST thay vì GET, nhưng cách rõ ràng là 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 vì chuyển hướng 304.
Thêm yếu tố phụ
Định vị phần tử khi sử dụng nhiều hình thức có thể khó khăn và thậm chí còn tồi tệ hơn khi xử lý các thiết kế đáp ứng. Một số bố cục có thể trở nên 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 yếu tố. Điều này có thể ảnh hưởng đến khả năng sử dụng nếu thiết kế bị ảnh hưởng bởi thách thức này.

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

Bạn có thể sử dụng JavaScript để kích hoạt title 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 một nút. Ví dụ dưới đây có thể được cải thiện và xóa khỏi HTML, nhưng nó chỉ đơn giản là để minh họa ý tưởng:

Continue

Ưu điểm:

Đơn giản [đối với yêu cầu cơ bản] và giữ ngữ nghĩa trong khi không yêu cầu thêm biểu mẫu.
Vì là nút thực, nên 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 nhấp chuột khi nhấn phím cách khi kích hoạt].

Nhược điểm:

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

Giải pháp 3: Neo [liên kết] đượ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 bằng cách sử dụng các kiểu đơn giản.

Ưu điểm:

Đơn giản [cho yêu cầu cơ bản] và hỗ trợ nhiều trình duyệt tốt.
Không cần phải làm việc.
Không cần JavaScript để làm việc.

Nhược điểm:

Semantic là loại bị hỏng, bởi vì bạn muốn một nút hoạt động như một liên kết và không phải là một liên kết hoạt động như một nút.
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ợ hành vi tương tự như nút. Ví dụ, các liên kết phản ứng khác nhau khi 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 nếu không có thêm 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ợ keypresscác sự kiện trên các nút.

Phần kết luận

Giải pháp số 1 [ Nút trong một biểu mẫu ] có vẻ như minh bạch nhất cho người dùng với công việc tối thiểu cần thiết. Nếu bố cục của bạn không bị ảnh hưởng bởi lựa chọn này và điều chỉnh phía máy chủ là khả thi, thì đây là một lựa 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à trở ngại đối với các yêu cầu về khả năng truy cập của bạn, thì giải pháp số 2 [ JavaScript ] sẽ được ưu tiên hơn # 1 và # 3.

Nếu vì một lý do nào đó, khả năng truy cập là 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 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 số 3 [ Neo theo kiểu nút ] là một giải pháp thay thế tốt giải quyết vấn đề này với tác động khả năng sử dụng tối thiểu.

22 hữu ích 0 bình luận chia sẻ

answer

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


My Button

//jsfiddle.net/hj6gob8b/

21 hữu ích 5 bình luận chia sẻ

answer

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


    Schedule

Trường hợp a.nostylemột lớp có kiểu dáng liên kết của bạn [nơi bạn có thể thoát khỏi kiểu tạo liên kết chuẩn] và span.buttonlà lớp có kiểu dáng cho "nút" của bạn [nền, đường viền, độ dốc, v.v.].

18 hữu ích 2 bình luận chia sẻ

answer

Cách duy nhất để làm điều này [ngoại trừ ý tưởng hình thức khéo léo của BalusC!] Là thêm một titlesự kiện JavaScript vào nút, điều này không tốt cho khả năng truy cập.

Bạn đã xem xét phong cách một liên kết bình thường như một nút? Bạn không thể đạt được các nút cụ thể của hệ điều hành theo cách đó, nhưng đó vẫn là cách tốt nhất IMO.

16 hữu ích 5 bình luận chia sẻ

answer

Tại sao không đặt nút của bạn bên trong thẻ tham chiếu, vd

Next

Điều này dường như hoạt động hoàn hảo đối với tôi và không thêm bất kỳ thẻ% 20 nào vào liên kết, chỉ là cách bạn muốn. Tôi đã sử dụng một liên kết đến google để chứng minh.

Tất nhiên bạn có thể bọc cái này trong một thẻ mẫu nhưng nó không cần thiết.

Khi liên kết một tệp cục bộ khác, chỉ cần đặt nó vào cùng thư mục và thêm tên tệp làm tham chiếu. Hoặc chỉ định vị trí của tệp nếu trong không nằm trong cùng thư mục.

Next

Điều này cũng không thêm bất kỳ ký tự nào vào cuối URL, tuy nhiên, nó có đường dẫn dự án tệp dưới dạng url trước khi kết thúc bằng tên của tệp. ví dụ

Nếu cấu trúc dự án của tôi là ...

.. biểu thị một thư mục - biểu thị một tập tin trong khi bốn | biểu thị một thư mục con hoặc tập tin trong thư mục cha

.. công cộng
| | ..html
| | | | -main.html
|||| | | -secondary.html

Nếu tôi mở main.html thì URL sẽ là,

http://localhost:0000/public/html/main.html?_ijt=i7ms4v9oa7blahblahblah

Tuy nhiên, khi tôi nhấp vào nút bên trong main.html để thay đổi thành junior.html, URL sẽ là,

http://localhost:0000/public/html/secondary.html

Không có ký tự đặc biệt bao gồm ở cuối URL. Tôi hi vọng cái này giúp được. Nhân tiện - [% 20 biểu thị một khoảng trắng trong URL được mã hóa và chèn vào vị trí của chúng.]

Lưu ý: Localhost: 0000 rõ ràng sẽ không phải là 0000 bạn sẽ có số cổng của riêng mình ở đó.

Hơn nữa, cuối cùng? _Ijt = xxxxxxxxxxxxxx ở cuối main.html URL, x được xác định bởi kết nối của chính bạn nên rõ ràng sẽ không bằng của tôi.

Có vẻ như tôi đang nêu một số điểm thực sự cơ bản nhưng tôi chỉ muốn giải thích tốt nhất có thể. Cảm ơn bạn đã đọc và tôi hy vọng điều này sẽ giúp ít nhất một ai đó. Chúc bạn lập trình vui vẻ.

16 hữu ích 0 bình luận chia sẻ

answer

Đi cùng với những gì một vài người khác đã thêm vào, bạn có thể phát cuồng chỉ bằng cách sử dụng một lớp CSS đơn giản không có PHP, không có mã jQuery , chỉ có HTML và CSS đơn giản.

Tạo một lớp CSS và thêm nó vào neo của bạn. Mã dưới đây.

.button-link {
    height:60px;
    padding: 10px 15px;
    background: #4479BA;
    color: #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #20538D;
    text-shadow: 0 -1px 0 rgba[0, 0, 0, 0.4];
    -webkit-box-shadow: inset 0 1px 0 rgba[255, 255, 255, 0.4], 0 1px 1px rgba[0, 0, 0, 0.2];
    -moz-box-shadow: inset 0 1px 0 rgba[255, 255, 255, 0.4], 0 1px 1px rgba[0, 0, 0, 0.2];
    box-shadow: inset 0 1px 0 rgba[255, 255, 255, 0.4], 0 1px 1px rgba[0, 0, 0, 0.2];
}
.button-link:hover {
    background: #356094;
    border: solid 1px #2A4E77;
    text-decoration: none;
}


    Press Here to Go

Thế là xong. Nó rất dễ làm và cho phép bạn sáng tạo như bạn muốn. Bạn kiểm soát màu sắc, kích thước, hình dạng [bán kính], v.v ... Để biết thêm chi tiết, hãy xem trang web tôi tìm thấy trên này .

15 hữu ích 0 bình luận chia sẻ

answer

@ Nicolas, sau đây làm việc cho tôi vì bạn không có type="button"do nó bắt đầu hoạt động như kiểu gửi .. vì vậy tôi đã có một kiểu gửi. Tôi không làm việc cho tôi .... và bây giờ bạn có thể thêm lớp để nút hoặc để có được bố trí cần thiết:


    Click here

14 hữu ích 0 bình luận chia sẻ

answer

Nếu bạn muốn tránh phải sử dụng một biểu mẫu hoặc đầu vào và bạn đang tìm kiếm một liên kết trông giống nút, bạn có thể tạo các liên kết nút đẹp mắt với trình bao bọc div, neo và h2thẻ. Bạn có khả năng muốn điều này để bạn có thể tự do đặt nút liên kết xung quanh trang của mình. Điều này đặc biệt hữu ích cho các nút định tâm theo chiều ngang và có văn bản được căn giữa theo chiều dọc bên trong chúng. Đây là cách thực hiện:

Nút của bạn sẽ bao gồm ba phần lồng nhau: trình bao bọc div, neo và h2, như vậy:


    
        Button!

Sau đó, trong CSS, kiểu dáng của bạn sẽ trông như vậy:

.link-button-wrapper {
    width: 200px;
    height: 40px;
    box-shadow: inset 0px 1px 0px 0px #ffffff;
    border-radius: 4px;
    background-color: #097BC0;
    box-shadow: 0px 2px 4px gray;
    display: block;
    border:1px solid #094BC0;
}
.link-button-wrapper > a {
    display: inline-table;
    cursor: pointer;
    text-decoration: none;
    height: 100%;
    width:100%;
}
.link-button-wrapper > a > h2 {
    margin: 0 auto;
    display: table-cell;
    vertical-align: middle;
    color: #f7f8f8;
    font-size: 18px;
    font-family: cabinregular;
    text-align: center;
}

Đây là một jsFiddle để kiểm tra và chơi xung quanh nó.

Lợi ích của thiết lập này: 1. Tạo hiển thị trình bao bọc div: khối giúp dễ dàng căn giữa [sử dụng lề: 0 tự động] và vị trí [trong khi là nội tuyến và khó định vị hơn và không thể định tâm].

Bạn chỉ có thể làm cho display: block, di chuyển xung quanh và tạo kiểu cho nó như một nút, nhưng sau đó việc căn chỉnh văn bản bên trong nó trở nên khó khăn.
Điều này cho phép bạn tạo màn hình : bảng nội tuyến và màn hình
: ô bảng, cho phép bạn sử dụng dọc-căn: giữa trên
và căn giữa theo chiều dọc [luôn luôn đẹp một nut bâm]. Có, bạn có thể sử dụng phần đệm, nhưng nếu bạn muốn nút của mình tự động thay đổi kích thước, điều đó sẽ không được rõ ràng.
Đôi khi, khi bạn nhúng trong div, chỉ có văn bản có thể nhấp được, thiết lập này làm cho toàn bộ nút có thể nhấp.
Bạn không phải đối phó với các biểu mẫu nếu bạn chỉ đang cố gắng chuyển sang một trang khác. Các hình thức có nghĩa là để nhập thông tin, và chúng nên được dành riêng cho điều đó.
Cho phép bạn hoàn toàn tách biệt kiểu dáng nút và kiểu văn bản với nhau [lợi thế kéo dài? Chắc chắn, nhưng CSS có thể trông khó chịu vì vậy thật tuyệt khi phân tách nó].

Nó chắc chắn làm cho cuộc sống của tôi dễ dàng tạo kiểu một trang web di động cho màn hình có kích thước thay đổi.

13 hữu ích 1 bình luận chia sẻ

answer

Một tùy chọn khác là tạo một liên kết trong nút:

Link link

Sau đó, sử dụng CSS để tạo kiểu cho liên kết và nút, để liên kết chiếm toàn bộ không gian trong nút [để người dùng không bấm nhầm]:

button, button a{position:relative;}
button a{top:0;left:0;bottom:0;right:0;}

Tôi đã tạo một bản demo ở đây .

12 hữu ích 2 bình luận chia sẻ

answer

Nếu bạn muốn tạo một nút được sử dụng cho một URL ở bất cứ đâu, hãy tạo một lớp nút cho một neo.

a.button {
    background-color: #999999;
    color: #FFFFFF !important;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    padding: 5px 8px;
    text-align: center;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.button:hover {
    text-decoration: none;
}

8 hữu ích 0 bình luận chia sẻ

answer

Tôi biết đã có rất nhiều câu trả lời được gửi, nhưng không ai trong số họ dường như thực sự giải quyết vấn đề. Đây là giải pháp của tôi:

Sử dụng phương thức mà OP đang bắt đầu. Điều này hoạt động thực sự tốt, nhưng đôi khi nó gắn thêm một ?URL. Đây ?là vấn đề chính.
Sử dụng jQuery / JavaScript để thực hiện liên kết theo sau khi JavaScript được bật để ?cuối cùng không được thêm vào URL. Nó sẽ liên tục dự phòng phương thức cho một phần rất nhỏ người dùng không kích hoạt JavaScript.
Mã JavaScript sử dụng phân quyền sự kiện để bạn có thể đính kèm một trình lắng nghe sự kiện trước khi hoặc thậm chí tồn tại. Tôi đang sử dụng jQuery trong ví dụ này, vì nó nhanh và dễ dàng, nhưng nó cũng có thể được thực hiện bằng JavaScript 'vanilla'.
Mã JavaScript ngăn hành động mặc định xảy ra và sau đó theo liên kết được cung cấp trong actionthuộc tính.

Ví dụ về JSBin [đoạn mã không thể theo liên kết]

// Listen for any clicks on an element in the document with the `link` class
$[document].on['click', '.link', function[e] {
    // Prevent the default action [e.g. submit the form]
    e.preventDefault[];

    // Get the URL specified in the form
    var url = e.target.parentElement.action;
    window.location = url;
}];




    
        
        
        Form buttons as links
    

    
        
        
            
            Link

7 hữu ích 0 bình luận chia sẻ

answer

Đối với HTML 5 và nút được tạo kiểu cùng với nền hình ảnh

5 hữu ích 1 bình luận chia sẻ

answer

Ngoài ra, bạn có thể sử dụng một nút:

Ví dụ: trong cú pháp ASP.NET Core :

// Some other tags
 
      
      
      @[TextValue]
      
  
// Other tags...



       .link-button {
        background: none !important;
        border: none;
        padding: 0 !important;
        color: #20a8d8;
        cursor: pointer;
    }

3 hữu ích 0 bình luận chia sẻ

answer

Tôi đã sử dụng điều này cho một trang web tôi hiện đang làm việc và nó hoạt động rất tốt!. Nếu bạn muốn một số kiểu dáng thú vị, tôi sẽ đặt CSS xuống đây.

input[type="submit"] {
  background-color: white;
  width: 200px;
  border: 3px solid #c9c9c9;
  font-size: 24pt;
  margin: 5px;
  color: #969696;
}

input[type="submit"]:hover {
  color: white;
  background-color: #969696;
  transition: color 0.2s 0.05s ease;
  transition: background-color 0.2s 0.05s ease;
  cursor: pointer;
}

Làm việc với JSFiddle tại đây .

2 hữu ích 0 bình luận chia sẻ

answer

Những người đã trả lời bằng cách sử dụng các thuộc tính trên là hữu ích.

NHƯNG gần đây, tôi đã gặp một vấn đề khi tôi sử dụng một liên kết bên trong a .

Nút hiện được coi là / như một nút gửi [HTML5]. Tôi đã thử làm việc một cách và đã tìm thấy phương pháp này.

Tạo nút kiểu CSS như bên dưới:

.btn-style{
    border : solid 1px #0088cc;
    border-radius : 6px;
    moz-border-radius : 6px;
    -webkit-box-shadow : 0px 0px 2px rgba[0,0,0,1.0];
    -moz-box-shadow : 0px 0px 2px rgba[0,0,0,1.0];
    box-shadow : 0px 0px 2px rgba[0,0,0,1.0];
    font-size : 18px;
    color : #696869;
    padding : 1px 17px;
    background : #eeeeee;
    background : -webkit-gradient[linear, left top, left bottom, color-stop[0%,#eeeeee], color-stop[49%,#eeeeee], color-stop[72%,#cccccc], color-stop[100%,#eeeeee]];
    background : -moz-linear-gradient[top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%];
    background : -webkit-linear-gradient[top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%];
    background : -o-linear-gradient[top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%];
    background : -ms-linear-gradient[top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%];
    background : linear-gradient[top, #eeeeee 0%, #eeeeee 49%, #cccccc 72%, #eeeeee 100%];
    filter : progid:DXImageTransform.Microsoft.gradient[ startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 ];

}

Hoặc tạo một cái mới ở đây: Trình tạo nút CSS

Và sau đó tạo liên kết của bạn với thẻ lớp được đặt tên theo kiểu CSS bạn đã tạo:

Link

Đây là một câu đố:

Fiddle

1 hữu ích 1 bình luận chia sẻ

answer

Bạn cũng có thể đặt các nút type-propertythành "nút" [nó làm cho nó không gửi biểu mẫu], sau đó lồng nó vào trong một liên kết [làm cho nó chuyển hướng người dùng].

Bằng cách này, bạn có thể có một nút khác trong cùng một biểu mẫu gửi biểu mẫu, trong trường hợp cần thiết. Tôi cũng nghĩ rằng điều này tốt hơn trong hầu hết các trường hợp so với việc đặt phương thức biểu mẫu và hành động thành một liên kết [trừ khi đó là dạng tìm kiếm tôi đoán ...]

Thí dụ:


  
  Go to Target!
  submit form

Bằng cách này, nút đầu tiên chuyển hướng người dùng, trong khi nút thứ hai gửi biểu mẫu.

Hãy cẩn thận để đảm bảo nút không kích hoạt bất kỳ hành động nào, vì điều đó sẽ dẫn đến xung đột. Cũng như Arius đã chỉ ra, bạn nên lưu ý rằng, vì lý do trên, điều này không hoàn toàn được coi là HTML hợp lệ, theo tiêu chuẩn. Tuy nhiên, nó hoạt động như mong đợi trong Firefox và Chrome, nhưng tôi chưa thử nghiệm nó cho Internet Explorer.

1 hữu ích 4 bình luận chia sẻ

answer

Bạn có thể sử dụng javascript:



            Google

Thay thế //www.google.combằng trang web của bạn, đảm bảo bao gồm //trước URL.

1 hữu ích 0 bình luận chia sẻ

answer

7 cách để làm điều đó:

Sử dụng window.location.href = 'URL'
Sử dụng window.location.replace['URL']
Sử dụng window.location = 'URL'
Sử dụng window.open['URL']
Sử dụng window.location.assign['URL']
Sử dụng mẫu HTML
Sử dụng thẻ neo HTML



  Click Me




  Click Me




  Click Me




  Click Me




  Click Me




  




  Click Me

1 hữu ích 0 bình luận chia sẻ

answer

Nếu những gì bạn cần là nó sẽ trông giống như một nút, với sự nhấn mạnh vào hình ảnh gradient , bạn có thể làm điều này:

 Button Text

0 hữu ích 0 bình luận chia sẻ

HTML

JavaScript

Giải pháp 1: Nút ở dạng.

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

Giải pháp 3: Neo [liên kết] được tạo kiểu như một nút.

Phần kết luận

Button!

và căn giữa theo chiều dọc [luôn luôn đẹp một nut bâm]. Có, bạn có thể sử dụng phần đệm, nhưng nếu bạn muốn nút của mình tự động thay đổi kích thước, điều đó sẽ không được rõ ràng.

Ví dụ về JSBin [đoạn mã không thể theo liên kết]

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề