HTML : 텍스트 + 이미지가있는 제출 버튼을 만드는 방법은 무엇입니까?

StackOverflow https://stackoverflow.com/questions/1621891

문제

텍스트가 포함 된 제출 버튼이 있습니다. 그리고 이미지. 이게 가능해?

나는 다음과 같은 코드로 원하는 정확한 모습을 얻을 수 있습니다.

<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에서 : 

<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="&#xf183; your username" class="stylish"/><br/>
    <input type="submit" value="&#xf090; sign in" class="stylish"/>
</form>

CSS에서 : 

.stylish {
    font-family: georgia, FontAwesome;
}

jsfiddle

주목하십시오 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를 사용하여 양식을 제출하려는 버튼을 가질 수 있습니다.

http://www.w3schools.com/jsref/met_form_submit.asp

매우 흥미로운. 내 양식을 작동시킬 수 있었지만 결과 이메일이 표시됩니다.

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">

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top