HTML: Cách tạo nút gửi với văn bản + hình ảnh trong đó?

Question

Tôi muốn có nút gửi chứa văn bản và một hình ảnh. Điều này có thể không?

tôi có thể có được cái nhìn chính xác tôi muốn với mã mà trông giống như:

<button type="button"> 
<img src="save.gif" alt="Save icon"/> 
<br/> 
Save 
</button> 

... nhưng tôi đã không tìm thấy một cách để có một trong những hình thức cho tôi. Có cách nào để làm điều đó với các thành phần

<input type="submit" ...> 

? Hoặc tôi có bị buộc phải đi theo hình ảnh hoặc văn bản theo cách không? Cảm ơn sự giúp đỡ của bạn!

Answer 1

input type="submit" là cách tốt nhất để có nút gửi trong biểu mẫu. Nhược điểm của điều này là bạn không thể đặt bất cứ điều gì khác hơn là văn bản như giá trị của nó. Phần tử nút có thể chứa các phần tử và nội dung HTML khác.

Thử đặt type="submit" thay vì type="button" trong phần tử button của bạn (source).

Đặc biệt chú ý tuy nhiên những điều sau đây từ trang đó:

Nếu bạn sử dụng các yếu tố nút ở dạng HTML, trình duyệt khác nhau sẽ nộp giá trị khác nhau. Internet Explorer sẽ gửi văn bản giữa các thẻ <button> và </button>, trong khi các trình duyệt khác sẽ gửi nội dung thuộc tính giá trị. Sử dụng yếu tố đầu vào để tạo các nút trong biểu mẫu HTML.

Answer 2

Giả sử hình ảnh của bạn là biểu tượng 16x16 .png có tên icon.png Sử dụng sức mạnh của CSS!

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> 

này sẽ đưa hình ảnh bên trái của văn bản.

Answer 3

Bạn đang thực sự gần gũi với câu trả lời cho mình

<button type="submit"> 
<img src="save.gif" alt="Save icon"/> 
<br/> 
Save 
</button> 

Hoặc, bạn chỉ có thể loại bỏ các loại thuộc tính

<button> 
<img src="save.gif" alt="Save icon"/> 
<br/> 
Save 
</button> 

Answer 4

Rất thú vị. tôi đã có thể để có được hình thức của tôi để làm việc nhưng kết quả hiển thị email:

imageField_x: 80 imageField_y: 17

ở dưới cùng của email mà tôi nhận được.

Đây là mã của tôi cho các nút.

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

Có lẽ điều này cũng sẽ giúp bạn và tôi.

:-)

Answer 5

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

yếu tố phong cách thay đổi đầu vào như bạn muốn để có được những nút mà bạn cần.

Tôi hy vọng nó hữu ích.

Answer 6

Tôi đã tìm thấy một giải pháp rất dễ dàng! Nếu bạn có biểu mẫu và bạn muốn có nút gửi tùy chỉnh, bạn có thể sử dụng một số mã như sau:

<button type="submit"> 
    <img src="login.png" onmouseover="this.src='login2.png';" onmouseout="this.src='login.png';" /> 
</button> 

Hoặc chỉ chuyển trực tiếp đến một liên kết của trang.

Answer 7

Trong trường hợp dingbats/icon fonts là một tùy chọn, bạn có thể sử dụng chúng thay vì hình ảnh.

Sau đây sử dụng một sự kết hợp của

• an icon font (e.g. Font Awesome),
• character encodings in HTML (e.g. &#xf090)
• the Unicode code point of the icon you want to use (e.g. &#xf090 for the sign in logo),
• CSS:

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

Trong CSS:

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

jsFiddle

Chú ý các đặc điểm kỹ thuật font-family: tất cả các ký tự/điểm mã sẽ sử dụng georgia, té ngửa ra FontAwesome cho bất kỳ điểm mã georgia không cung cấp cho nhân vật. georgia không cung cấp bất kỳ ký tự nào trong số private use range, exactly where FontAwesome has placed its icons.

Answer 8

Vui lòng tham khảo liên kết này. Bạn có thể có bất kỳ nút nào mà bạn muốn chỉ cần sử dụng javascript để gửi biểu mẫu

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

Answer 9

Bạn có thể làm điều này:

HTML code:

<form action="submit.php" method="get" id="form">   
    <a href="javascript: submitForm()">   
    <img src="save.gif" alt="Save icon"/>   
    <br/>   
    save   
    </a>   
    </form>   

lưu ý: bạn có thể sử dụng và hành động và phương thức bạn chọn và Id và bất kỳ văn bản nào bắt đầu từ href = "javascript: và kết thúc đến()" nhưng hãy đảm bảo rằng khi tôi nhập cùng những thứ như id và một số văn bản bạn nhập vào thay thế của mình ở cùng một nơi (tập lệnh java và mã HTML).

java mã kịch bản:

var form=document.getElementById("form");   
    function submitForm()   
    {   
    form.submit();  
    }   

Answer 10

Dưới đây là một ví dụ khác:

<button type="submit" name="submit" style="border: none; background-color: white">