HTML : 텍스트 + 이미지가있는 제출 버튼을 만드는 방법은 무엇입니까?
문제
텍스트가 포함 된 제출 버튼이 있습니다. 그리고 이미지. 이게 가능해?
나는 다음과 같은 코드로 원하는 정확한 모습을 얻을 수 있습니다.
<button type="button">
<img src="save.gif" alt="Save icon"/>
<br/>
Save
</button>
...하지만 내 양식 중 하나를 가질 수있는 방법을 찾지 못했습니다. an과 함께 할 수있는 방법이 있습니까?
<input type="submit" ...>
요소? 아니면 내가 가야합니까? 이미지 또는 텍스트 방법? 당신의 도움을 주셔서 감사합니다!
해결책
input type="submit"
양식에 제출 버튼을 갖는 가장 좋은 방법입니다. 이것의 단점은 텍스트 이외의 것을 값으로 넣을 수 없다는 것입니다. 버튼 요소에는 다른 HTML 요소 및 컨텐츠가 포함될 수 있습니다.
넣어보십시오 type="submit"
대신에 type="button"
당신의 button
요소 (원천).
해당 페이지에서 다음에 특히주의를 기울이십시오.
버튼 요소를 HTML 양식으로 사용하면 다른 브라우저가 다른 값을 제출합니다. Internet Explorer는 다음 사이에 텍스트를 제출합니다
<button>
그리고</button>
태그, 다른 브라우저는 값 속성의 내용을 제출합니다. 입력 요소를 사용하여 HTML 양식으로 버튼을 만듭니다.
다른 팁
이미지가 16x16 .png 아이콘이라고 가정 해 봅시다.
CSS :
input#image-button{
background: #ccc url('icon.png') no-repeat top left;
padding-left: 16px;
height: 16px;
}
HTML :
<input type="submit" id="image-button" value="Text"></input>
이것은 이미지를 텍스트의 왼쪽에 놓습니다.
경우에 딩 바트/아이콘 글꼴 옵션입니다. 이미지 대신 사용할 수 있습니다.
다음은 조합을 사용합니다
- 아이콘 글꼴 (예 : 글꼴 굉장한),
- HTML의 문자 인코딩 (예 :

) - 사용하려는 아이콘의 유니 코드 코드 포인트 (예 :

용 로그인 심벌 마크), - CSS :
HTML에서 :
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<form name="signin" action="#" method="POST">
<input type="text" name="text-input" placeholder=" your username" class="stylish"/><br/>
<input type="submit" value=" sign in" class="stylish"/>
</form>
CSS에서 :
.stylish {
font-family: georgia, FontAwesome;
}
주목하십시오 font-family
사양 : 모든 문자/코드 포인트가 사용됩니다 georgia
, 다시 떨어집니다 FontAwesome
모든 코드 포인트 georgia
캐릭터를 제공하지 않습니다. georgia
다음 문자를 제공하지 않습니다 사용 범위, 정확히 어디에 FontAwesome
아이콘을 배치했습니다.
당신은 정말로 대답에 가깝습니다
<button type="submit">
<img src="save.gif" alt="Save icon"/>
<br/>
Save
</button>
또는 유형 양도를 제거 할 수 있습니다
<button>
<img src="save.gif" alt="Save icon"/>
<br/>
Save
</button>
나는 매우 쉬운 해결책을 찾았습니다! 양식이 있고 사용자 정의 제출 버튼이있는 경우 다음과 같은 코드를 사용할 수 있습니다.
<button type="submit">
<img src="login.png" onmouseover="this.src='login2.png';" onmouseout="this.src='login.png';" />
</button>
또는 페이지 링크로 지시하십시오.
<input type="button" id="btnTexWrapped" style="background:
url('http://i0006.photobucket.com/albums/0006/findstuff22/Backgrounds/bokeh2backgrounds.jpg');background-size:30px;width:50px;height:3em;" />
필요한 버튼을 얻으려면 입력 스타일 요소를 변경하십시오.
도움이 되었기를 바랍니다.
이 링크를 참조하십시오. JavaScript를 사용하여 양식을 제출하려는 버튼을 가질 수 있습니다.
매우 흥미로운. 내 양식을 작동시킬 수 있었지만 결과 이메일이 표시됩니다.
Imagefield_x : 80 Imagefield_y : 17
내가받는 이메일의 맨 아래에.
버튼에 대한 내 코드는 다음과 같습니다.
<tr>
<td><input type="image" src="images/sendmessage.gif" / ></td>
<td colspan="2"><input type="image" src="images/printmessage.gif"onclick="window.print()"></td>
</tr>
어쩌면 이것은 당신과 나도 도움이 될 것입니다.
:-)
당신은 이것을 할 수 있습니다 :
HTML 코드 :
<form action="submit.php" method="get" id="form">
<a href="javascript: submitForm()">
<img src="save.gif" alt="Save icon"/>
<br/>
save
</a>
</form>
참고 : 선택 및 조치 및 선택 및 ID의 방법 및 href = "javaScript : and ending to ()에서 시작하는 모든 텍스트를 사용할 수 있지만 ID 및 동일한 것을 입력 할 때 귀하가 입력 할 때 동일한 것을 입력 할 수 있는지 확인하십시오. 같은 장소에서 교체 (Java 스크립트 및 HTML 코드).
Java 스크립트 코드 :
var form=document.getElementById("form");
function submitForm()
{
form.submit();
}
다른 예는 다음과 같습니다.
<button type="submit" name="submit" style="border: none; background-color: white">