จะสร้างปุ่ม HTML ที่ทำหน้าที่เหมือนลิงค์ได้อย่างไร?

ฉันต้องการสร้างปุ่ม HTML ที่ทำหน้าที่เหมือนลิงก์ ดังนั้นเมื่อคุณคลิกปุ่มมันจะเปลี่ยนเส้นทางไปยังหน้า ฉันต้องการให้เข้าถึงได้มากที่สุด

ฉันต้องการเช่นกันดังนั้นจึงไม่มีอักขระพิเศษหรือพารามิเตอร์ใน URL

ฉันจะบรรลุสิ่งนี้ได้อย่างไร

จากคำตอบที่โพสต์จนถึงขณะนี้ฉันกำลังทำสิ่งนี้:

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

แต่ปัญหานี้คือในSafariและInternet Explorerจะเพิ่มอักขระเครื่องหมายคำถามไว้ที่ส่วนท้ายของ URL ฉันต้องการค้นหาวิธีแก้ไขที่ไม่เพิ่มอักขระใด ๆ ลงในส่วนท้ายของ URL

มีอีกสองวิธีในการทำเช่นนี้: การใช้ JavaScript หรือจัดแต่งทรงผมลิงก์ให้ดูเหมือนปุ่ม

ใช้ JavaScript:

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

แต่สิ่งนี้ต้องมี JavaScript และด้วยเหตุนี้จึงทำให้ผู้อ่านหน้าจอเข้าถึงได้น้อยลง จุดเชื่อมโยงคือการไปที่หน้าอื่น ดังนั้นการพยายามทำปุ่มให้เหมือนลิงค์เป็นทางออกที่ผิด คำแนะนำของฉันคือการที่คุณควรใช้การเชื่อมโยงและรูปแบบให้มีลักษณะเหมือนปุ่ม

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

HTML

วิธี HTML ธรรมดาคือการใส่ไว้ใน<form>นั้นคุณระบุ URL เป้าหมายที่ต้องการในactionแอตทริบิวต์

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

หากจำเป็นให้ตั้ง CSS display: inline;บนแบบฟอร์มเพื่อให้มันอยู่ในโฟลว์ด้วยข้อความโดยรอบ แทน<input type="submit"><button type="submit">ในตัวอย่างข้างต้นคุณยังสามารถใช้ ข้อแตกต่างเพียงอย่างเดียวคือ<button>องค์ประกอบที่ช่วยให้เด็ก

คุณคาดหวังอย่างสังหรณ์ใจว่าจะสามารถใช้แอนะ<button href="https://google.com">ล็อกกับ<a>องค์ประกอบ แต่น่าเสียดายที่ไม่มีแอตทริบิวต์นี้ไม่มีอยู่ตามข้อกำหนดของ HTMLเปค

CSS

หากได้รับอนุญาตให้ใช้ CSS เพียงใช้<a>สไตล์ที่คุณมีลักษณะเหมือนปุ่มที่ใช้กับappearanceคุณสมบัติอื่น ๆ( ไม่รองรับใน Internet Explorerเท่านั้น)

<a href="https://google.com" class="button">Go to Google</a>

a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

หรือเลือกหนึ่งของผู้ที่ห้องสมุด CSS มากมายเช่นเงินทุน

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

JavaScript

ถ้า JavaScript window.location.hrefที่ได้รับอนุญาตให้ตั้ง

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

แทนที่จะในตัวอย่างข้างต้นคุณยังสามารถใช้<input type="button"> <button>ความแตกต่างเพียงอย่างเดียวคือ<button>องค์ประกอบที่ช่วยให้เด็ก

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

โปรดทราบว่าtype="button"แอตทริบิวต์เป็นสิ่งสำคัญเนื่องจากหายไปเริ่มต้นความคุ้มค่าเป็นรัฐที่ส่งปุ่ม

หากเป็นลักษณะที่มองเห็นได้ของปุ่มที่คุณกำลังมองหาในแท็กสมอ HTML พื้นฐานคุณสามารถใช้เฟรมเวิร์กTwitter Bootstrapเพื่อจัดรูปแบบลิงก์ / ปุ่มประเภท HTML ทั่วไปต่อไปนี้เพื่อให้ปรากฏเป็นปุ่ม โปรดทราบความแตกต่างที่มองเห็นได้ระหว่างเวอร์ชั่น 2, 3 หรือ 4 ของกรอบงาน:

<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) :

ตัวอย่าง Bootstrap (v3) :

ตัวอย่าง Bootstrap (v2) :

ใช้:

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

น่าเสียดายที่มาร์คอัปนี้ไม่สามารถใช้งานได้ใน HTML5 อีกต่อไปและจะไม่ตรวจสอบหรือทำงานได้ตามที่คาดหวัง ใช้วิธีการอื่น

ในฐานะของ HTML5 ปุ่มสนับสนุนformactionแอตทริบิวต์ เหนือสิ่งอื่นใดไม่จำเป็นต้องมี Javascript หรือ trickery

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

คำเตือน

• จะต้องล้อมรอบไปด้วย <form>แท็ก
• <button>ประเภทจะต้องเป็น "ส่ง" (หรือไม่ระบุ) ฉันไม่สามารถใช้งานได้กับปุ่ม " ซึ่งแสดงจุดด้านล่าง
• แทนที่การกระทำเริ่มต้นในแบบฟอร์ม กล่าวอีกนัยหนึ่งถ้าคุณทำในรูปแบบอื่นมันจะทำให้เกิดความขัดแย้ง

การอ้างอิง: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction การสนับสนุนเบราว์เซอร์: https://developer.mozilla.org/en-US/docs/Web/ HTML / ธาตุ / ปุ่ม # Browser_compatibility

มันเป็นจริงที่ง่ายมากและไม่ต้องใช้องค์ประกอบแบบฟอร์มใด ๆ คุณสามารถใช้ <a> แท็กด้วยปุ่มภายใน :)

แบบนี้:

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

และมันจะโหลด href ลงในหน้าเดียวกัน ต้องการหน้าใหม่หรือไม่? target="_blank"ใช้เพียงแค่

แก้ไข

สองสามปีต่อมาในขณะที่โซลูชันของฉันยังคงใช้งานได้โปรดจำไว้ว่าคุณสามารถใช้ CSS จำนวนมากเพื่อทำให้มันดูตามที่คุณต้องการ นี่เป็นวิธีที่รวดเร็ว

หากคุณกำลังใช้รูปแบบภายในให้เพิ่มแอตทริบิวต์type = "reset"พร้อมกับองค์ประกอบปุ่ม มันจะป้องกันการกระทำของแบบฟอร์ม

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

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

ดูเหมือนจะมีสามวิธีในการแก้ไขปัญหานี้ (ทั้งหมดมีข้อดีข้อเสีย)

โซลูชันที่ 1: ปุ่มในแบบฟอร์ม

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

แต่ปัญหาของเรื่องนี้ก็คือในเบราว์เซอร์ยอดนิยมบางรุ่นเช่น Chrome, Safari และ Internet Explorer จะเพิ่มอักขระเครื่องหมายคำถามไว้ที่ส่วนท้ายของ URL ดังนั้นในคำอื่น ๆ สำหรับรหัสด้านบน URL ของคุณจะสิ้นสุดเช่นนี้:

http://someserver/pages2?

มีวิธีหนึ่งในการแก้ไขปัญหานี้ แต่จะต้องมีการกำหนดค่าฝั่งเซิร์ฟเวอร์ ตัวอย่างหนึ่งที่ใช้Apache Mod_rewriteจะเปลี่ยนเส้นทางการร้องขอทั้งหมดที่มีต่อท้าย?ไปยัง URL ?ที่สอดคล้องกันของพวกเขาโดยไม่ต้อง นี่คือตัวอย่างการใช้. htaccess แต่มีเธรดแบบเต็มที่นี่ :

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

การกำหนดค่าที่คล้ายกันอาจแตกต่างกันไปขึ้นอยู่กับเว็บเซิร์ฟเวอร์และสแต็กที่ใช้ ดังนั้นบทสรุปของวิธีการนี้:

ข้อดี:

1. นี่คือปุ่มจริงและความหมายมันสมเหตุสมผล
2. เนื่องจากมันเป็นปุ่มจริงมันจะทำหน้าที่เหมือนปุ่มจริง (เช่นพฤติกรรมที่ลากได้และ / หรือเลียนแบบการคลิกเมื่อกดแป้นเว้นวรรคเมื่อใช้งาน)
3. ไม่มี JavaScript ไม่จำเป็นต้องใช้สไตล์ที่ซับซ้อน

จุดด้อย:

1. การลาก ?ดูน่าเกลียดในบางเบราว์เซอร์ วิธีนี้สามารถแก้ไขได้โดยการแฮ็ก (ในบางกรณี) โดยใช้ POST แทน GET แต่วิธีใหม่คือการเปลี่ยนเส้นทางฝั่งเซิร์ฟเวอร์ ข้อเสียของการเปลี่ยนเส้นทางฝั่งเซิร์ฟเวอร์คือจะทำให้มีการเรียก HTTP พิเศษสำหรับลิงก์เหล่านี้เนื่องจากการเปลี่ยนเส้นทาง 304
2. เพิ่ม<form>องค์ประกอบพิเศษ
3. การจัดวางองค์ประกอบเมื่อใช้หลายรูปแบบอาจยุ่งยากและยิ่งแย่ลงเมื่อต้องรับมือกับการออกแบบที่ตอบสนองได้ เลย์เอาต์บางอย่างอาจเป็นไปไม่ได้ที่จะบรรลุผลด้วยวิธีนี้ขึ้นอยู่กับลำดับขององค์ประกอบ สิ่งนี้สามารถส่งผลกระทบต่อการใช้งานได้หากการออกแบบได้รับผลกระทบจากความท้าทายนี้

โซลูชันที่ 2: การใช้ JavaScript

คุณสามารถใช้ JavaScript เพื่อเรียกใช้ onclick และเหตุการณ์อื่น ๆ เพื่อเลียนแบบพฤติกรรมของลิงค์โดยใช้ปุ่ม ตัวอย่างด้านล่างสามารถปรับปรุงและลบออกจาก HTML ได้ แต่มีเพียงเพื่อแสดงแนวคิด:

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

ข้อดี:

1. ง่าย (สำหรับความต้องการขั้นพื้นฐาน) และเก็บความหมายในขณะที่ไม่ต้องการรูปแบบเพิ่มเติม
2. เนื่องจากมันเป็นปุ่มจริงมันจะทำหน้าที่เหมือนปุ่มจริง (เช่นพฤติกรรมที่ลากได้และ / หรือเลียนแบบการคลิกเมื่อกดแป้นเว้นวรรคเมื่อใช้งาน)

จุดด้อย:

1. ต้องใช้ JavaScript ซึ่งหมายถึงการเข้าถึงได้น้อย สิ่งนี้ไม่เหมาะสำหรับองค์ประกอบฐาน (คอร์) เช่นลิงก์

โซลูชันที่ 3: Anchor (ลิงก์) มีสไตล์เหมือนปุ่ม

การออกแบบลิงก์เช่นปุ่มค่อนข้างง่ายและสามารถมอบประสบการณ์ที่คล้ายคลึงกันในเบราว์เซอร์ต่างๆ Bootstrapทำสิ่งนี้ แต่ก็ง่ายที่จะทำให้สำเร็จด้วยตัวคุณเองโดยใช้สไตล์ที่เรียบง่าย

ข้อดี:

1. ง่าย (สำหรับความต้องการขั้นพื้นฐาน) และการสนับสนุนข้ามเบราว์เซอร์ที่ดี
2. ไม่ต้อง<form>ไปทำงาน
3. ไม่ต้องการ JavaScript เพื่อให้ทำงานได้

จุดด้อย:

1. ความหมายแตกหักเพราะคุณต้องการปุ่มที่ทำหน้าที่เหมือนลิงค์และไม่ใช่ลิงค์ที่ทำหน้าที่เหมือนปุ่ม
2. มันจะไม่ทำซ้ำพฤติกรรมทั้งหมดของการแก้ปัญหา # 1 มันจะไม่สนับสนุนพฤติกรรมเช่นเดียวกับปุ่ม ตัวอย่างเช่นลิงก์ตอบสนองต่างกันเมื่อลาก ทริกเกอร์ลิงก์ "space bar" จะไม่ทำงานหากไม่มีรหัส JavaScript พิเศษ มันจะเพิ่มความซับซ้อนมากเนื่องจากเบราว์เซอร์ไม่สอดคล้องกับวิธีที่พวกเขาสนับสนุนkeypressกิจกรรมบนปุ่ม

ข้อสรุป

โซลูชัน # 1 ( ปุ่มในแบบฟอร์ม ) ดูเหมือนโปร่งใสที่สุดสำหรับผู้ใช้ที่ต้องการงานน้อยที่สุด หากเลย์เอาต์ของคุณไม่ได้รับผลกระทบจากตัวเลือกนี้และปรับแต่งฝั่งเซิร์ฟเวอร์เป็นไปได้นี่เป็นตัวเลือกที่ดีสำหรับกรณีที่ความสามารถในการเข้าถึงมีความสำคัญสูงสุด (เช่นลิงก์ในหน้าข้อผิดพลาดหรือข้อความแสดงข้อผิดพลาด)

หาก JavaScript ไม่ใช่อุปสรรคต่อข้อกำหนดการช่วยสำหรับการเข้าถึงของคุณดังนั้นโซลูชัน # 2 ( JavaScript ) จะเป็นที่ต้องการมากกว่า # 1 และ # 3

ถ้าด้วยเหตุผลบางอย่างการช่วยสำหรับการเข้าถึงมีความสำคัญ (JavaScript ไม่ใช่ตัวเลือก) แต่คุณอยู่ในสถานการณ์ที่การออกแบบและ / หรือการกำหนดค่าเซิร์ฟเวอร์ของคุณป้องกันคุณจากการใช้ตัวเลือก # 1 จากนั้นโซลูชัน # 3 ( ยึดสไตล์เหมือนปุ่ม ) เป็นทางเลือกที่ดีในการแก้ปัญหานี้โดยมีผลกระทบต่อการใช้งานน้อยที่สุด

ทำไมไม่วางปุ่มของคุณไว้ในแท็กอ้างอิงเช่น

<a href="https://www.google.com/"><button>Next</button></a>

ดูเหมือนว่าจะทำงานได้อย่างสมบูรณ์แบบสำหรับฉันและไม่ได้เพิ่มแท็ก% 20 ใด ๆ ลงในลิงก์เพียงอย่างเดียวตามที่คุณต้องการ ฉันใช้ลิงก์ไปยัง google เพื่อสาธิต

แน่นอนคุณสามารถห่อสิ่งนี้ในแท็กฟอร์ม แต่ไม่จำเป็น

เมื่อเชื่อมโยงโลคัลไฟล์อื่นให้วางไว้ในโฟลเดอร์เดียวกันและเพิ่มชื่อไฟล์เป็นการอ้างอิง หรือระบุตำแหน่งของไฟล์หากในไม่ได้อยู่ในโฟลเดอร์เดียวกัน

<a href="myOtherFile"><button>Next</button></a>

สิ่งนี้ไม่ได้เพิ่มตัวละครใด ๆ ลงที่ส่วนท้ายของ URL อย่างไรก็ตามมันจะมีเส้นทางโครงการไฟล์เป็น URL ก่อนที่จะลงท้ายด้วยชื่อของไฟล์ เช่น

หากโครงสร้างโครงการของฉันคือ ...

.. หมายถึงโฟลเดอร์ - หมายถึงไฟล์ในขณะที่สี่ | แสดงถึงไดเรกทอรีย่อยหรือไฟล์ในโฟลเดอร์หลัก

..public
|||| ..html
|||| |||| -main.html
|||| |||| -secondary.html

หากฉันเปิด main.html URL จะเป็นเช่นนั้น

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

อย่างไรก็ตามเมื่อฉันคลิกปุ่มภายใน main.html เพื่อเปลี่ยนเป็น secondary.html URL จะเป็น

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

ไม่มีอักขระพิเศษรวมอยู่ท้าย URL ฉันหวังว่านี่จะช่วยได้. โดยวิธี - (% 20 หมายถึงช่องว่างใน URL ที่มีการเข้ารหัสและแทรกในตำแหน่งของพวกเขา)

หมายเหตุ: โลคัลโฮสต์: 0000 จะไม่เป็น 0000 อย่างแน่นอนคุณจะมีหมายเลขพอร์ตของคุณเอง

นอกจากนี้? _ijt = xxxxxxxxxxxxxx ที่ส่วนท้ายของ URL main.html x จะถูกกำหนดโดยการเชื่อมต่อของคุณเองดังนั้นแน่นอนจะไม่เท่ากับของฉัน

อาจดูเหมือนว่าฉันได้ระบุประเด็นพื้นฐานไว้บ้าง แต่ฉันแค่ต้องการอธิบายให้ดีที่สุดเท่าที่จะทำได้ ขอบคุณสำหรับการอ่านและฉันหวังว่าสิ่งนี้จะช่วยให้ใครบางคนอย่างน้อยที่สุด การเขียนโปรแกรมมีความสุข

คุณสามารถใส่แท็กรอบองค์ประกอบ:

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

https://jsfiddle.net/hj6gob8b/

วิธีเดียวที่จะทำเช่นนี้ (ยกเว้นแนวคิดที่แยบยลของ BalusC!) คือการเพิ่มonclickกิจกรรมJavaScript ไว้ในปุ่มซึ่งไม่ดีสำหรับการเข้าถึง

คุณคิดว่าสไตล์การเชื่อมโยงปกติเช่นปุ่ม? คุณไม่สามารถใช้ปุ่มเฉพาะสำหรับ OS ได้ แต่ก็ยังคงเป็นวิธีที่ดีที่สุด IMO

ไปพร้อมกับสิ่งที่คนอื่นเพิ่มเข้ามาคุณสามารถใช้งาน CSS คลาสง่ายๆโดยไม่ต้องใช้ PHP ไม่มีโค้ดjQueryเพียง HTML และ CSS อย่างง่าย

สร้างคลาส CSS และเพิ่มลงในสมอของคุณ รหัสด้านล่าง

.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;
}

<HTML>
    <a class="button-link" href="http://www.go-some-where.com"
       target="_blank">Press Here to Go</a>

อย่างนั้นแหละ. มันง่ายมากที่จะทำและช่วยให้คุณสร้างสรรค์เท่าที่คุณต้องการ คุณสามารถควบคุมสีขนาดรูปร่าง (รัศมี) ฯลฯ สำหรับ detailsm เพิ่มเติมโปรดดูที่เว็บไซต์ที่ฉันพบนี้

หากคุณต้องการหลีกเลี่ยงการใช้แบบฟอร์มหรืออินพุตและคุณกำลังมองหาลิงค์ที่มีปุ่มคุณสามารถสร้างลิงค์ปุ่มที่ดูดีด้วย div wrapper, anchor และ h1แท็ก คุณอาจต้องการสิ่งนี้เพื่อให้คุณสามารถวางลิงค์ปุ่มบนหน้าของคุณได้อย่างอิสระ สิ่งนี้มีประโยชน์อย่างยิ่งสำหรับปุ่มที่อยู่ตรงกลางในแนวนอนและมีข้อความที่อยู่ตรงกลางในแนวตั้ง นี่คือวิธี:

ปุ่มของคุณจะประกอบด้วยสามชิ้นซ้อนกัน: เสื้อคลุม div, สมอและ h1 เช่น:

.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 > h1 {
    margin: 0 auto;
    display: table-cell;
    vertical-align: middle;
    color: #f7f8f8;
    font-size: 18px;
    font-family: cabinregular;
    text-align: center;
}

<div class="link-button-wrapper">
    <a href="your/link/here">
        <h1>Button!</h1>
    </a>
</div>

นี่คือjsFiddleเพื่อตรวจสอบออกและเล่นรอบกับมัน

ประโยชน์ของการตั้งค่านี้: 1. การแสดง div wrapper: block ทำให้ง่ายต่อการจัดกึ่งกลาง (โดยใช้ระยะห่าง: 0 อัตโนมัติ) และตำแหน่ง (ในขณะที่ <a> อยู่ในตำแหน่งและยากต่อการจัดตำแหน่ง

2. คุณสามารถทำให้ <a> จอแสดงผล: บล็อกเลื่อนไปมาแล้วกำหนดเป็นปุ่มได้ แต่จากนั้นการจัดแนวข้อความภายในแนวตั้งจะกลายเป็นเรื่องยาก

3. สิ่งนี้ช่วยให้คุณสามารถสร้าง <a> จอแสดงผล: อินไลน์ตารางและหน้าจอ <h1>: ตารางเซลล์ซึ่งช่วยให้คุณใช้การจัดแนวตั้ง: ตรงกลางบน <h1> และจัดกึ่งกลางแนวตั้งไว้ ปุ่ม) ใช่คุณสามารถใช้ช่องว่างภายใน แต่ถ้าคุณต้องการให้ปุ่มของคุณปรับขนาดแบบไดนามิกนั่นจะไม่สะอาด

4. บางครั้งเมื่อคุณฝัง <a> ภายใน div มีเพียงคลิกข้อความได้การตั้งค่านี้ทำให้คลิกได้ทั้งปุ่ม

5. คุณไม่ต้องจัดการกับแบบฟอร์มหากคุณเพียงแค่พยายามย้ายไปที่หน้าอื่น แบบฟอร์มมีความหมายสำหรับการป้อนข้อมูลและควรสงวนไว้สำหรับสิ่งนั้น

6. ช่วยให้คุณสามารถแยกการจัดแต่งทรงผมของปุ่มและการใส่สไตล์ข้อความออกจากกันได้อย่างชัดเจน (มีความได้เปรียบหรือไม่แน่นอน แต่ CSS สามารถดูน่ารังเกียจได้

มันทำให้ชีวิตของฉันง่ายขึ้นในการออกแบบเว็บไซต์มือถือสำหรับหน้าจอที่มีขนาดต่างกัน

@ Nicolas การติดตามการทำงานสำหรับฉันเนื่องจากคุณไม่ได้type="button"เกิดจากการที่มันเริ่มทำงานเป็นประเภทส่ง .. เนื่องจากฉันมีหนึ่งประเภทการส่งแล้วมันไม่ได้ผลสำหรับฉัน .... และตอนนี้คุณสามารถเพิ่มคลาสได้ เพื่อปุ่มหรือ<a>เพื่อรับเค้าโครงที่ต้องการ:

<a href="http://www.google.com/">
    <button type="button">Click here</button>
</a>

ตัวเลือกอื่นคือการสร้างลิงค์ในปุ่ม:

<button type="button"><a href="yourlink.com">Link link</a></button>

จากนั้นใช้ CSS เพื่อจัดรูปแบบลิงก์และปุ่มเพื่อให้ลิงก์ใช้พื้นที่ทั้งหมดภายในปุ่ม (เพื่อให้ผู้ใช้ไม่พลาดการคลิก):

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

ฉันได้สร้างการสาธิตที่นี่

หากคุณต้องการสร้างปุ่มที่ใช้สำหรับ URL ใดก็ได้ให้สร้างคลาสปุ่มสำหรับจุดยึด

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;
}

ฉันรู้ว่ามีคำตอบมากมายที่ส่งมา แต่ดูเหมือนว่าไม่มีใครตอบปัญหาได้ นี่คือวิธีการแก้ปัญหาของฉัน:

1. ใช้<form method="get">วิธีการที่ OP เริ่มต้นด้วย วิธีนี้ใช้งานได้ดี แต่บางครั้งก็ผนวก a ?ไปยัง URL ?เป็นปัญหาหลัก
2. ใช้ jQuery / JavaScript เพื่อทำลิงค์ต่อไปนี้เมื่อเปิดใช้งาน JavaScript เพื่อ?ไม่ให้ต่อท้าย URL มันจะย้อนกลับไปยัง<form>วิธีการอย่างราบรื่นสำหรับผู้ใช้จำนวนน้อยมากที่ไม่ได้เปิดใช้งาน JavaScript
3. รหัส JavaScript ใช้การมอบหมายเหตุการณ์เพื่อให้คุณสามารถแนบผู้ฟังเหตุการณ์ก่อน<form>หรือ<button>แม้กระทั่งมีอยู่ ฉันใช้ jQuery ในตัวอย่างนี้เพราะมันรวดเร็วและง่าย แต่ก็สามารถทำได้ใน 'วานิลลา' JavaScript เช่นกัน
4. รหัส JavaScript ป้องกันไม่ให้การกระทำเริ่มต้นเกิดขึ้นจากนั้นตามลิงก์ที่ให้ไว้ใน<form> actionแอตทริบิวต์

ตัวอย่าง JSBin (ตัวอย่างโค้ดไม่สามารถติดตามลิงก์)

// 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;
});

<!DOCTYPE html>
<html>

    <head>
        <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
        <meta charset="utf-8">
        <title>Form buttons as links</title>
    </head>

    <body>
        <!-- Set `action` to the URL you want the button to go to -->
        <form method="get" action="http://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link">
            <!-- Add the class `link` to the button for the event listener -->
            <button type="submit" class="link">Link</button>
        </form>
    </body>

</html>

7 วิธีในการทำเช่นนั้น:

1. การใช้ window.location.href = 'URL'
2. การใช้ window.location.replace('URL')
3. การใช้ window.location = 'URL'
4. การใช้ window.open('URL')
5. การใช้ window.location.assign('URL')
6. ใช้แบบฟอร์ม HTML
7. ใช้แท็กสมอ HTML

<!-- Using window.location.href = 'URL' -->
<button onclick='window.location.href = "https://stackoverflow.com"'>
  Click Me
</button>

<!-- Using window.location.replace('URL') -->
<button onclick='window.location.replace("https://stackoverflow.com")'>
  Click Me
</button>

<!-- Using window.location = 'URL' -->
<button onclick='window.location = "https://stackoverflow.com"'>
  Click Me
</button>

<!-- Using window.open('URL') -->
<button onclick='window.open("https://stackoverflow.com","_self","","")'>
  Click Me
</button>

<!-- Using window.location.assign('URL') -->
<button onclick='window.location.assign("http://www.stackoverflow.com")'>
  Click Me
</button>

<!-- Using HTML form -->
<form action='https://stackoverflow.com' method='get'>
  <input type='submit' value='Click Me'/>
</form>

<!-- Using HTML anchor tag -->
<a href='https://stackoverflow.com'>
  <button>Click Me</button>
</a>

สำหรับ HTML 5 และปุ่มสไตล์พร้อมกับพื้นหลังภาพ

<a id="Navigate" href="http://www.google.com">
  <input 
    type="button"
    id="NavigateButton"
    style="
      background-image: url(http://cdn3.blogsdna.com/wp-content/uploads/2010/03/Windows-Phone-7-Series-Icons-Pack.png);
      background-repeat: no-repeat;
      background-position: -272px -112px;
      cursor:pointer;
      height: 40px;
      width: 40px;
      border-radius: 26px;
      border-style: solid;
      border-color:#000;
      border-width: 3px;" title="Navigate"
    />
</a>

นอกจากนี้คุณสามารถใช้ปุ่ม:

ตัวอย่างเช่นในไวยากรณ์ ASP.NET Core :

// Some other tags
 <form method="post">
      <input asp-for="YourModelPropertyOrYourMethodInputName"
      value="@TheValue" type="hidden" />
      <button type="submit" class="link-button" formaction="/TheDestinationController/TheDestinationActionMethod">
      @(TextValue)
      </button>
  </form>
// Other tags...


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

หากคุณกำลังใช้ใบรับรอง SSL

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

ผู้ที่ตอบกลับโดยใช้<a></a>แอตทริบิวต์ใน a <button></button>นั้นเป็นประโยชน์

แต่แล้วเมื่อเร็ว ๆ <form></form>นี้ผมพบปัญหาเมื่อฉันใช้การเชื่อมโยงภายในที่

ตอนนี้ปุ่มถูกมองว่าเป็น / เป็นปุ่มส่ง (HTML5) ฉันได้ลองใช้วิธีนี้แล้วและพบวิธีนี้แล้ว

สร้างปุ่ม CSS สไตล์เหมือนปุ่มด้านล่าง:

.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 );

}

หรือสร้างใหม่ที่นี่: CSS Button Generator

จากนั้นสร้างลิงก์ของคุณด้วยแท็กคลาสที่ตั้งชื่อตามสไตล์ CSS ที่คุณสร้างขึ้น:

<a href='link.php' class='btn-style'>Link</a>

นี่คือซอ:

JS Fiddle

ฉันใช้สิ่งนี้กับเว็บไซต์ที่ฉันใช้งานอยู่และใช้งานได้ดี! ถ้าคุณต้องการสไตล์ที่เท่ ๆ ฉันจะใส่ CSS ลงไปที่นี่

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;
}

<input type="submit" name="submit" onClick="window.location= 'http://example.com'">

ทำงาน JSFiddle ที่นี่

คุณสามารถตั้งค่าปุ่มtype-propertyเป็น "ปุ่ม" (ทำให้ไม่ได้ส่งแบบฟอร์ม) จากนั้นซ้อนภายในลิงก์ (ทำให้เปลี่ยนเส้นทางผู้ใช้)

วิธีนี้คุณสามารถมีปุ่มอื่นในแบบฟอร์มเดียวกับที่ส่งแบบฟอร์มในกรณีที่จำเป็น ฉันคิดว่านี่เป็นสิ่งที่ดีกว่าในกรณีส่วนใหญ่ในการตั้งค่าวิธีการและการกระทำที่จะเชื่อมโยง (เว้นแต่จะเป็นแบบฟอร์มการค้นหาฉันเดา ... )

ตัวอย่าง:

<form method="POST" action="/SomePath">
  <input type="text" name="somefield" />
  <a href="www.target.com"><button type="button">Go to Target!</button></a>
  <button type="submit">submit form</button>
</form>

วิธีนี้ปุ่มแรกจะเปลี่ยนเส้นทางผู้ใช้ในขณะที่ปุ่มที่สองส่งแบบฟอร์ม

ระมัดระวังเพื่อให้แน่ใจว่าปุ่มจะไม่เปิดการทำงานใด ๆ เนื่องจากจะทำให้เกิดความขัดแย้ง เช่นเดียวกับ Arius ที่ชี้ให้เห็นคุณควรทราบว่าด้วยเหตุผลข้างต้นนี่ไม่ใช่การพูดอย่างเคร่งครัดว่าเป็น HTML ที่ถูกต้องตามมาตรฐาน อย่างไรก็ตามมันทำงานได้ตามที่คาดไว้ใน Firefox และ Chrome แต่ฉันยังไม่ได้ทดสอบสำหรับ Internet Explorer

คุณสามารถใช้จาวาสคริปต์:

<html>
<button onclick='window.location = "http://www.google.com"'>
            Google
        </button>

</html>

แทนที่http://www.google.comด้วยเว็บไซต์ของคุณตรวจสอบให้แน่ใจhttp://ก่อนรวมURL

ในจาวาสคริปต์

setLocation(base: string) {
  window.location.href = base;
}

ในรูปแบบ HTML

<button onclick="setLocation('/<whatever>')>GO</button>"

พิมพ์window.locationและกดenterในคอนโซลเบราว์เซอร์ของคุณ จากนั้นคุณจะได้รับแนวคิดที่ชัดเจนว่าlocationมีอะไรบ้าง

   hash: ""
   host: "stackoverflow.com"
   hostname: "stackoverflow.com"
   href: "/programming/2906582/how-to-create-an-html-button- 
   that-acts-like-a-link"
   origin: "https://stackoverflow.com"
   pathname: "/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link"
   port: ""
   protocol: "https:"

คุณสามารถกำหนดค่าใด ๆ ได้จากที่นี่

ดังนั้นสำหรับการเปลี่ยนเส้นทางหน้าอื่นคุณสามารถกำหนดhrefค่าด้วยลิงค์ของคุณ

   window.location.href = your link

ในกรณีของคุณ -

   <button onclick="window.location.href='www.google.com'">Google</button>

หากสิ่งที่คุณต้องการคือมันจะมีลักษณะเป็นปุ่มโดยเน้นไปที่ภาพไล่ระดับสีคุณสามารถทำสิ่งนี้:

<a href="www.yourlink.com" class="btn btn-gradient"><i class="fa fa-home"> Button Text</i></a>

หากคุณต้องการเปลี่ยนเส้นทางสำหรับหน้าเว็บที่อยู่ในเว็บไซต์ของคุณแล้วนี่คือวิธีการของฉัน - ฉันได้เพิ่มแอตทริบิวต์hrefไปยังปุ่มและ onclick กำหนดthis.getAttribute ('href')ไปที่ document.location.href

** จะไม่ทำงานหากคุณอ้างอิง URL ภายนอกโดเมนของคุณเนื่องจาก 'ตัวเลือก X-Frame' เป็น 'sameorigin'

รหัสตัวอย่าง:

<button onclick="document.location.href=this.getAttribute('href');" href="/">Home</button>