>  기사  >  웹 프론트엔드  >  HTML 정적 페이지의 버튼에 제출 링크를 추가하는 방법 소개

HTML 정적 페이지의 버튼에 제출 링크를 추가하는 방법 소개

黄舟
黄舟원래의
2017-07-27 14:15:222201검색

1. 버튼은 링크(그림)처럼 만들어졌습니다
제출버튼

<input type="submit" value="提交">

제출링크

<a href="#" onclick="表单名字.submit()">提交</a>

리셋버튼

<input type="reset" value="重置">

링크리셋

<a href="#" onclick="表单名字.reset()">重置</a>

일반링크

<input type="button" value="按钮" onclick="函数()">

일반링크

<a href="#" onclick="函数()">链接</a>

사진도 마찬가지입니다. img
2에 a 태그를 추가하세요. 링크를 버튼처럼 보이게 만드세요

<a href="reg.asp">注册</a>
=><input type="button" value="注册" onclick="location.href=&#39;reg.asp&#39;">

------------------------------- - ---
가끔 수동으로 가져오기 양식을 만들 수도 있고 원하는 대로 버튼이나 링크를 사용할 수도 있습니다.

<form action="xx.asp" method="get" name="form1">
  <input name="aa" type="text" id="aa">
  <input name="bb" type="text" id="bb">
  <input type="submit" name="Submit" value="提交">
</form>
=>
<input name="aa" type="text" id="aa">
<input name="bb" type="text" id="bb">
<input type="button" value="按钮" onclick="location.href=&#39;xx.asp?aa=&#39;+document.all[&#39;aa&#39;].value+&#39;&bb=&#39;+document.all[&#39;bb&#39;].value">

------------
게다가 버튼도 만들 수 있어요(링크) js 변수, 양식 입력 값, asp 변수 및 Recordset 값을 동시에 전달하려면

<script language="javascript">
var id1=1;
</script>
<%
id3=3
....
rs.open exec,conn,1,1
假设有rs("id4")=4
...
%>
<input name="id2" type="text" id="id2" value="2">
<input type="button" value="按钮"
onclick="location.href=&#39;xx.asp?id1=&#39;+id1+&#39;&id2=&#39;+document.all[&#39;id2&#39;].value+&#39;&id3=<%=id3%>&id4=<%=rs("id4")%>&#39;">

버튼을 누르면 브라우저의 URL이 xx.asp?id1=1&id2=2&id3=3&id4=4
in xx임을 알 수 있습니다. ASP에서는 request.querystring을 사용하여 모든 변수를 가져올 수 있습니다. 이는 클라이언트 js와 서버 세그먼트 간의 위장된 변수 전송입니까?
-------------------------------------- ------------------------------------- --------------------------
버튼에 링크 기능을 추가하는 방법

해결책:
버튼은 컨트롤 수준 개체에 속하며 우선 순위가 높습니다. 상대적으로 높기 때문에 그림이나 텍스트와 같은 링크를 직접 추가할 수는 없으며 버튼의 클릭 이벤트를 통해서만 스크립트를 호출할 수 있습니다.
구체적인 단계:
1. 원래 창에서 링크 열기

    <input type="button" 
value="闪吧" onClick="location=’http://www.xxx.net’">
    <button onClick="location.href=’http://www.xxxx.net’">闪吧</button>
    <form action="http://www.xxxx.net%22%3e%3cinput/ type="submit" value="打开链接"></form>

2. 새 창에서 링크 열기

<input type="button" 
value="闪吧" onClick="window.open(’http://www.xxxx.net’)">
    <button onClick="window.open(’http://www.xxxx.net’)">ggg</button>
    <form action="http://www.xxxx.net/" 
target="_blank"><input type="submit" value="打开链接"></form>


참고: onClick이라는 코드의 따옴표는 단일 또는 이중으로 중첩될 수 있습니다. 1개이고 2개 이상이어야 합니다. 이스케이프된 따옴표는 내부 따옴표와 일치해야 합니다(예:

<button onClick="this.innerHTML=’<font color=\’red\’>http://www.xxxx.net</font>’">闪吧</button>

또는

<button onClick=’this.innerHTML="<font color=\"red\">http://www.xxxx.net</font>"’>闪吧</button>

). :

<button onClick="this.innerHTML=’<font color=’red’>http://www.xxxx.net</font>’">闪吧</button>
<button onClick="this.innerHTML=’<font color="red">http://www.xxxx.net</font>’">闪吧</button>
<button onClick="this.innerHTML=’<font color=\"red\">http://www.xxxx.net</font>’">闪吧</button>

팁: 대부분은 window에 속합니다. 또는 문서 개체의 메서드 및 속성에서는 접두사 window 또는 document를 생략할 수 있습니다. 예를 들어 이 예에서는 location.href(location.href는 location으로 축약될 수도 있습니다. 위치의 기본 개체는 href이기 때문에)는 window.location.href 또는 문서입니다. .location.href를 작성하는 타원형 방식입니다.

Tips: 이 예에서는 다음 방법을 사용하여 location.href

location.replace(url)
location.assign(url)
navigate(url)

Special Tips

첫 번째 단계의 코드가 실행된 후 버튼을 클릭하면 링크 대상으로 이동합니다. 두 번째 단계에서는 버튼을 클릭하면 링크가 새 창에서 열립니다.

특별 참고 사항

이 예제에서는 주로 onClick을 사용하여 사용자의 버튼 클릭 이벤트를 캡처한 다음 위치 개체의 href 메서드나 창 개체의 open 메서드를 호출하여 링크를 엽니다. 또 다른 트릭은 양식을 제출하여 링크 기능을 구현하는 것입니다. 버튼은 type=submit 버튼이어야 합니다. 양식의 작업 값은 링크 대상이고 대상 값은 링크를 여는 대상 방법입니다.

위 내용은 HTML 정적 페이지의 버튼에 제출 링크를 추가하는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.