링크와 같은 기능을 하는HTML 버튼을 작성하려면 어떻게 해야 하나요?
링크와 같은 기능을 하는HTML 버튼을 작성하려면 어떻게 해야 하나요?따라서 버튼을 클릭하면 사용자가 페이지로 리디렉션됩니다.
URL에 최소한의 추가 문자 또는 매개 변수를 추가하여 액세스할 수 있도록 하고 싶습니다.
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">와 the the <a>이 속성은 HTML 사양에 따라 존재하지 않습니다.
CSS
가되어 있는 경우는, CSS 를 .<a>이 속성은 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>
자바스크립트
가되어 있는 는, 를 합니다.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"Atribute의 결측값 기본값은 Submit Button 상태이기 때문에 Atribute는 중요합니다.
기본 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">
부트스트랩(v4)의 외관 예:
부트스트랩(v3)의 외관 예:
부트스트랩(v2)의 외관 예:
용도:
<a href="http://www.stackoverflow.com/">
<button>Click me</button>
</a>
유감스럽게도 이 마크업은 HTML5에서는 더 이상 유효하지 않으며 검증되지도 않고 항상 예상대로 동작하지도 않습니다.다른 방법을 사용하세요.
를 지원하고 .formaction필요 .무엇보다도 자바스크립트나 속임수가 필요하지 않습니다.
<form>
<button formaction="http://stackoverflow.com">Go to Stack Overflow!</button>
</form>주의사항
- .
<form> <button>타이프 '버튼'은 타이프 '버튼'이라고 합니다그래서 요점은 다음과 같습니다.- 폼의 기본 작업을 재정의합니다.즉, 다른 양식 내에서 이 작업을 수행하면 충돌이 발생합니다.
레퍼런스: 폼액션
폼 요소를 사용하지 않고 매우 단순합니다.<a> 태그는 버튼과 함께 사용할 수 있습니다. : )
다음과 같이 합니다.
<a href="http://www.google.com" target="_parent"><button>Click me !</button></a>
가가 href 같같ref refrefref refref refref refref refrefref새페페 를하? ??? 하?? 쓰세요.target="_blank".
편집
몇 년이 지난 후에도 제 솔루션은 여전히 작동하지만, 많은 CSS를 사용하여 원하는 것처럼 보이게 할 수 있습니다.이것은 단지 빠른 방법이었다.
inside 폼을 사용하고 있는 경우는, 버튼 요소와 함께 속성 type="contribute"를 추가합니다.폼 액션을 방지합니다.
<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>
요소 주위에 태그를 붙이기만 하면 됩니다.
<a href="http://google.com" target="_blank">
<button>My Button</button>
</a>
https://jsfiddle.net/hj6gob8b/
이 문제에는 세 가지 해결책이 있는 것 같습니다(장점과 단점이 모두 있습니다).
해결책 1: 폼의 버튼.
<form method="get" action="/page2">
<button type="submit">Continue</button>
</form>
그러나 Chrome, Safari, Internet Explorer와 같은 인기 브라우저의 일부 버전에서는 URL 끝에 물음표 문자가 추가되어 있기 때문에 URL 위의 코드는 다음과 같이 표시됩니다.
http://someserver/pages2?
이 문제를 해결하려면 한 가지 방법이 있지만 서버 측 구성이 필요합니다.Apache Mod_rewrite를 사용하는 예로는 후행으로 모든 요청을 리다이렉트하는 것을 들 수 있습니다.? 에 할 수 있습니다.?.htaccess 를 사용하는 예를 다음에 나타냅니다만, 여기에 풀 스레드가 있습니다.
RewriteCond %{THE_REQUEST} \?\ HTTP [NC]
RewriteRule ^/?(index\.cfm)? /? [R=301,L]
유사한 설정은 사용하는 웹 서버 및 스택에 따라 다를 수 있습니다.이 접근방식의 개요는 다음과 같습니다.
장점:
- 이것은 실제 버튼이며 의미론적으로 의미가 있습니다.
- 이 버튼은 실제 버튼이기 때문에 실제 버튼처럼 작동합니다(예: 끌 수 있는 동작 및/또는 활성 상태일 때 스페이스 바를 누를 때 클릭하는 흉내).
- JavaScript도 없고 복잡한 스타일도 필요 없습니다.
단점:
- ★★
?일부 브라우저에서는 보기 흉합니다.이 문제는 GET 대신 POST를 사용하여 해킹(경우에 따라)으로 해결할 수 있지만 서버 측 리다이렉트를 하는 것이 좋습니다.서버측 리다이렉트의 단점은 304 리다이렉트 때문에 이러한 링크에 대해 추가 HTTP 콜이 발생한다는 것입니다. - ★★
<form>에 의존하다 - 여러 형식을 사용할 때 요소의 위치가 까다로울 수 있으며 반응성이 높은 설계를 다룰 때 더욱 악화됩니다.요소의 순서에 따라서는, 이 솔루션에서는 실현 불가능한 레이아웃도 있습니다.이 과제에 의해 설계가 영향을 받는 경우, 결과적으로 사용성에 영향을 줄 수 있습니다.
해결책 2: JavaScript 사용.
JavaScript를 사용하여 클릭 시 및 기타 이벤트를 트리거하여 버튼을 사용하여 링크 동작을 모방할 수 있습니다.다음 예시는 HTML에서 개선 및 삭제될 수 있지만 단순히 아이디어를 설명하기 위한 것입니다.
<button onclick="window.location.href='/page2'">Continue</button>
장점:
- (기본 요건을 위해) 심플하고 의미성을 유지하면서 추가 형식을 필요로 하지 않습니다.
- 이 버튼은 실제 버튼이기 때문에 실제 버튼처럼 작동합니다(예: 끌 수 있는 동작 및/또는 활성 상태일 때 스페이스 바를 누를 때 클릭하는 흉내).
단점:
- 접근성이 떨어지는 JavaScript가 필요합니다.이것은 링크와 같은 기본(코어) 요소에는 적합하지 않습니다.
해결책 3: 버튼과 같은 스타일의 앵커(링크)
링크를 버튼처럼 스타일링하는 것은 비교적 쉽고 다른 브라우저에서도 비슷한 경험을 제공할 수 있습니다.부트스트랩은 이 기능을 하지만, 심플한 스타일로 스스로도 쉽게 할 수 있습니다.
장점:
- 심플하고(기본 요건에 적합) 뛰어난 크로스 브라우저 지원.
- 「」는 .
<form>일하기 위해. - JavaScript를 사용할 필요가 없습니다.
단점:
- 시멘틱이 깨진 것은 버튼처럼 작동하는 링크가 아니라 링크처럼 작동하는 버튼을 원하기 때문입니다.
- 솔루션 #1의 모든 동작을 재현하는 것은 아닙니다.이치노예를 들어 링크는 끌면 다르게 반응합니다.또한 "스페이스 바" 링크 트리거는 추가 JavaScript 코드가 없으면 작동하지 않습니다. 때문에 .
keypress버튼을 클릭합니다.
결론
솔루션 #1(폼의 버튼)은 최소한의 작업만으로 사용자에게 가장 투과적인 것으로 보입니다.레이아웃이 이 선택에 영향을 받지 않고 서버 측 조정이 가능한 경우 접근성이 최우선인 경우(오류 페이지 링크나 오류 메시지 링크 등)에 적합합니다.
JavaScript가 접근성 요건에 장애가 되지 않는 경우 #1 및 #3보다 솔루션 #2(JavaScript)가 우선됩니다.
어떤 이유로든 접근성이 필수적이지만(JavaScript는 옵션이 아닙니다), 설계나 서버 구성 때문에 옵션 #1을 사용할 수 없는 상황이라면 솔루션 #3(버튼과 같은 앵커 스타일)을 사용하여 조작성에 미치는 영향을 최소화하면서 이 문제를 해결하는 것이 좋습니다.
참조 태그 안에 버튼을 놓기만 하면 됩니다.
<a href="https://www.google.com/"><button>Next</button></a>
이것은 나에게 완벽하게 작동하는 것처럼 보이며 링크에 %20 태그를 추가하지 않습니다.나는 구글 링크를 사용하여 시연했다.
물론 폼 태그로 포장할 수는 있지만 꼭 그럴 필요는 없습니다.
다른 로컬 파일을 링크할 때는 동일한 폴더에 넣고 파일 이름을 참조로 추가합니다.또는 이 같은 폴더에 없는 경우 파일 위치를 지정합니다.
<a href="myOtherFile"><button>Next</button></a>
이것은 URL 끝에 문자를 추가하지 않지만 파일 이름으로 끝내기 전에 파일프로젝트 경로를 URL로 지정합니다.
만약 내 프로젝트 구조가...
..폴더를 나타냅니다.\
- 입니다.
four |는 부모 또는 파일을 .four | four | filer | four | filer | filer | filer | filer | four | filer | four | filer | filer | filer | filer | filer |
..일반의
| | ..| || || ..실행
|| disc| || - main.disc| | || - main.파일명
| | || - | || - secondary.secondary
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의 공백으로 인코딩되어 그 위치에 삽입되었습니다.)
주의: localhost: 0000은 0000이 아닙니다.거기에 당신만의 포트 번호가 있을 겁니다.
또한 main.disc URL 끝에 있는 ?_ijt=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
내가 정말 기본적인 요점을 말하는 것처럼 보일 수도 있지만, 나는 내가 할 수 있는 한 최선을 다해 설명하고 싶을 뿐이다.
하지 않고 링크를 찾고 및 anchor를 하여 보기 를 만들 수 .h1페이지 주위에 링크 버튼을 자유롭게 배치할 수 있도록 태그가 필요할 수 있습니다.이것은 특히 버튼의 가로 방향 가운데에 세로 방향의 텍스트가 있는 경우에 유용합니다.을 사용하다
버튼은 다음과 같은 세 개의 중첩된 조각(div wrapper, anchor, 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 display: block을 설정하면 중앙 집중화(여백: 0 auto 사용) 및 위치 지정이 용이해집니다(<a>는 인라인이고 위치 지정이 어려우며 중앙 집중화가 불가능함).
<a> 표시를 블록화, 이동, 버튼으로서 스타일링 하는 것만으로, 그 안에서 텍스트를 수직으로 정렬하는 것은 어려워집니다.
이것에 의해,<a>디스플레이:인라인 테이블과<h1>디스플레이:테이블 셀을 설정할 수 있습니다.테이블 셀에서는,<h1>로 수직 정렬:중간을 사용해,<h1>의 중앙에 배치할 수 있습니다(버튼으로 항상 적합합니다).네, 패딩을 사용할 수 있지만, 버튼의 크기를 동적으로 조정하려면 그리 깨끗하지 않습니다.
div에 <a>를 삽입하면 텍스트만 클릭할 수 있는 경우가 있습니다.이 셋업에서는 버튼 전체를 클릭할 수 있습니다.
다른 페이지로 이동하려는 경우 양식을 처리할 필요가 없습니다.양식은 정보를 입력하기 위한 것으로, 이를 위해 예약해야 합니다.
버튼 스타일링과 텍스트 스타일링을 깔끔하게 분리할 수 있습니다(스트레치 장점).네, 하지만 CSS는 보기 흉할 수 있기 때문에 분해하는 것이 좋습니다.)
다양한 크기의 화면을 위한 모바일 웹 사이트를 스타일링하는 것이 확실히 제 삶을 편하게 해주었습니다.
이를 위한 7가지 방법:
- 「」를 사용합니다.
window.location.href = 'URL' - 「」를 사용합니다.
window.location.replace('URL') - 「」를 사용합니다.
window.location = 'URL' - 「」를 사용합니다.
window.open('URL') - 「」를 사용합니다.
window.location.assign('URL') - HTML 양식 사용
- 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>다른 몇 개의 추가 내용에 따라 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>
바로 그거야.그것은 매우 하기 쉽고 당신이 원하는 만큼 창의적이게 해준다.색상, 크기, 모양(반경) 등을 조정합니다.상세한 것에 대하여는, 이것을 발견한 사이트를 참조해 주세요.
는 ( 폼 JavaScript를 .onclick이벤트 버튼에 대한 접근성이 좋지 않습니다.
단추와 같은 일반적인 링크 스타일을 고려해 본 적이 있습니까?이 방법으로는 OS 고유의 버튼을 얻을 수 없지만 IMO가 가장 좋은 방법입니다.
Nicolas의 답변에 대해, 그 답변이 가지고 있지 않았기 때문에, 다음과 같이 나에게 효과가 있었다.type="button"타입이 때문에, 송신 타입이 1개 있습니다.이치가 없었습니다.할 수 .이제 버튼을 클릭하거나<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;
}
많은 답변이 제출된 것은 알고 있었지만, 어느 답변도 실제로 문제를 해결하지 못하는 것 같았습니다.솔루션에 대한 저의 견해는 다음과 같습니다.
- 하다를 사용하세요.
<form method="get">OP op op op op op op op op op op 。은 매우가 있습니다만, 「이것에는」, 「이것에는 「이것」에는 「이것」이 도 합니다.?URL 입니다.?가장 큰 문제입니다. - 자바스크립트에 의해 「」가 됩니다.
?URL 입니다. - 로 되어 하여 링크할 수 JavaScript는 jQuery/JavaScript가 됩니다.그러면
?에 심리스로 폴백됩니다.<form>JavaScript가 활성화되지 않은 극히 일부 사용자를 위한 메서드입니다. - 는 이벤트 를 JavaScript 앞에 할 수 .
<form>★★★★★★★★★★★★★★★★★」<button>존재하기도 합니다.jQuery의 jQuery의 jQuery는 jQuery를 사용합니다.vanilla 자바스크립트 - 한후 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" role="link">Link</button>
</form>
</body>
</html>을 만들 때는 '버튼을 하세요.<a>CSS:
.abutton {
background: #bada55; padding: 5px; border-radius: 5px;
transition: 1s; text-decoration: none; color: black;
}
.abutton:hover { background: #2a2; }<a href="https://example.com" class="abutton">Continue</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>
한 <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 버튼 생성기(CSS Button Generator)를 새로 만듭니다.
그런 다음 작성한 CSS 스타일의 이름을 딴 클래스 태그를 사용하여 링크를 만듭니다.
<a href='link.php' class='btn-style'>Link</a>
여기 바이올린이 있습니다.
할 수 .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 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>JavaScript를 사용할 수 있습니다.
<html>
<button onclick='window.location = "http://www.google.com"'>
Google
</button>
</html>http://www.google.com해 주세요.http:// URL앞에 됩니다.
현재 작업 중인 웹사이트에서 사용했는데 잘 작동했어요!쿨한 스타일링도 원하시면 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이 동작하고 있습니다.
자바스크립트
setLocation(base: string) {
window.location.href = base;
}
HTML에서
<button onclick="setLocation('/<whatever>')>GO</button>"
「」라고 입력합니다.window.location를 눌러 브라우저 콘솔을 누릅니다.그럼 넌 확실히 알 수 있을 거야location★★★★
hash: ""
host: "stackoverflow.com"
hostname: "stackoverflow.com"
href: "https://stackoverflow.com/questions/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>
HTML 답변:링크와 같은 기능을 하는HTML 버튼을 작성하는 경우는, 다음의 2개의 일반적인 어트리뷰트를 사용합니다.<a> "/"/"action="":
<form action="stackoverflow.com"/>
<button type="submit" value="Submit Form"
아니면...
는 "href"의입니다.<a>연결하는데 이 됩니다.직접 링크에 도움이 됩니다.
<a href="stackoverflow.com">Href</a>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
<a href="https://www.stackoverflow.com" class="button is-primary">Stack Overflow</a>언급URL : https://stackoverflow.com/questions/2906582/how-do-i-create-an-html-button-that-acts-like-a-link
'programing' 카테고리의 다른 글
| 현재 PowerShell 스크립트의 위치를 확인하는 가장 좋은 방법은 무엇입니까? (0) | 2023.04.08 |
|---|---|
| Join-Path를 사용하여 3개 이상의 문자열을 하나의 파일 경로에 결합하려면 어떻게 해야 합니까? (0) | 2023.04.08 |
| PowerShell에서 문자열이 null인지 빈지 확인하는 방법은 무엇입니까? (0) | 2023.04.08 |
| 중복 행을 삭제하려면 어떻게 해야 합니까? (0) | 2023.04.08 |
| 어떻게 하면 내용물보다 큰 div를 만들 수 있나요? (0) | 2023.04.08 |