Member Avatar for chrisschristou

hello dear friends
i'm trying to insert picture in form subtmit bouton but it don't show anything on navigator this is the way i do it

<input name="adcart" type="submit" src="product/images/shopping-cart-icons.png"  class="boutonaddto" id="adcart" value="ADD TO BASKET">
  • 8 Contributors
  • 12 Replies
  • 187 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by João_5

Dani AI

Generated

Short summary and a practical pattern.

Your original markup failed because an <input> is a void element and cannot contain child tags; that’s why the browser ignored your attempt. Several replies steered you in the right direction — and toward using a <button>, and toward using CSS backgrounds, and toward the image input — but you’ll usually get the cleanest, most accessible result with a semantic <button> plus a scalable icon.

Modern, robust pattern (keeps icon + text together, scales nicely, and keeps the form value when submitted):

<button type="submit" name="adcart" value="add" class="btn-add">
  <svg class="icon" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false">
    <!-- icon path here -->
    <path d="M7 4h14l-1.5 9h-11z"></path>
  </svg>
  <span class="label">Add to cart</span>
</button>
.btn-add { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid #ccc; background:#fff; cursor:pointer; }
.btn-add .icon { width:20px; height:20px; fill:currentColor; flex:0 0 20px; }

Quick troubleshooting and tips:

  • If you use an external image file, open its URL directly or check the browser Network tab for 404s; remember server file names are case-sensitive.
  • If you choose CSS backgrounds, set background-size and enough padding so the image is visible.
  • Avoid relying on <input type="image"> if you need a simple value on submit — it sends coordinates (name.x/name.y) instead of a single value.
  • If the icon is decorative, set aria-hidden="true" on the SVG/image and keep visible text (or provide an accessible label).

Accessibility: if you ever make an icon-only control, provide an accessible name (aria-label or a visually hidden text span). This pattern gives predictable server values and clean control over alignment and styling.

Recommended Answers

All 12 Replies

Member Avatar for JorgeM

Try using a button element in the form.

 <button type="submit" name="btn1" value="clicked"><img src="#" /></button>
Member Avatar for chrisschristou

like this one it don't work

<input name="adcart" type="submit" <img src="product/images/shopping-cart-icons.png"class="boutonaddto" id="adcart" value="ADD TO CART">
Member Avatar for JorgeM

Did you try using a button element instead like the example I posted above?

Member Avatar for dany12

Your example doesn't work because you have a <input>element open and add a nother element in that this is identically to this <div <span> <form>>,this is not a valid syntax.
Web consortium have created this method and this method alone to add images to buttons
<button><img src="path/to/image"/></button>
I hope you understand now why your method doesn't work

Edited by dany12
Member Avatar for chrisschristou

my syntax is diferent with this you give in up exemple, how i can mix it ???

<input name="adcart" type="submit" class="boutonaddto" id="adcart" value="ADD TO CART">
Member Avatar for dany12

You have a

<input> <!--tag open and then you use -->

<input <img> ><!--syntax error-->

<!--You can't mix input with the type button with img -->

<!--That is why you always use-->
<button><img/></button>

<!--You can't use an  open element and then open another than close them both-->

<!--This is the way HTML and XHTML WORK-->

Hope you understand now

Member Avatar for chrisschristou

hello friends , it work but i would like to have text near to the picture but i don't know how

<button type="submit" class="boutonaddto" name="adcart" value="ADD TO CART"><img src="images/shopping-cart-icons.png" width="38" height="31" /></button>
Member Avatar for Nimerion

Try w3schools..
I would use an css class to set the background:

.btnClass{
    background: url(the image) no-repeat;
    width: Xpx;
    height: Ypx;
}

Then in my html:

<input type="button" name="adcart" value="add to cart" class="btnClass" />

Haven't touched web development soon..
I program in C++, I hope I've helped enough..

Edited by Nimerion
Member Avatar for cmps

Hello, just use a normal
<input name="submit" value="Submit" style="border:none; background-image:url(...); width:...px; height:...px; text-align:right; padding-right:2px;">
remove 2px from the width since we added them as padding-right.
I think you got the idea, try it and tell me

Member Avatar for mugheesahmed

Use This It Will Help You
<button type="submit" name="btn1" value="clicked"><img src="#" /></button>

Edited by JorgeM because: Link remove. Please, use the signature tool in your profile.
Member Avatar for João_5

This works for me:

<INPUT alt="Submit" src="images/image.png" width="48" height="48" type="image">

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.