What are these image types?

HTML & CSS
21

Thanks, actually the question was how to put svg image in <input>

22

You mean ‘under the input’ as you stated in post #19

Your codepen from post #16 has your svg nested in the label, that’s valid code.

The <label> permitted phrasing content includes <svg>

Is that not what you are wanting to do?

23

I was thinking if this is posisble:

<input src="img/image.svg">

or some of its variation.

24

No, that’s not valid

<input> is an empty element

Permitted content: None, it is an empty element.

An empty element is an element from HTML, SVG, or MathML that cannot have any child nodes (i.e., nested elements or text nodes).

EDIT: You could set an svg background image on the input

25

Ray.H, wouldn’t that depend on its input type?

1 Like
26

Sure enough, looks like the way to go there.

I had also made an edit mentioning a bg image on the input (old school way)
But the <input type="image"> looks like the way to go :slight_smile:

1 Like
27

I would probably go with a <button> because I have had problems styling inputs. But maybe things have changed since then?

2 Likes
28

Yeah and I’m also reading now that the value attribute is not allowed

<input type="image"> elements do not accept value attributes. The path to the image to be displayed is specified in the src atribute.

In post #19 I see a value being used

Here is the image MDN was using


The text (what would have been the ‘value’) is made in the image

29

It looks like the <button> was the change, for the better!

I’m having to get caught up on the new changes myself.

From the old <input type="button"> specs…

Note: While <input> elements of type “button” are still perfectly valid HTML, the newer <button> element is now the favored way to create buttons. Given that a <button>’s label text is inserted between the opening and closing tags, you can include HTML in the label, even images.

1 Like
30

The type="image" seems strange to me. Maybe because I think of the type attribute describing the type of data the input expects to be given, as opposed to describing the appearance of the input. But maybe it goes back to a time before we had so many specific types of input.

2 Likes
31

It is my bad that I missed typing the question with full detail.

Please go to this link, and there you will find a Buy now input below “add on services”

<input type="submit" name="submit" value="Buy now" class="anchor_button4">

can we put and svg inside this so that it appears after the “Buy now” text. I was trying to put an animated SVG after “Buy now” text.

32

Yes if you use the button element with type=“submit” then it acts just like a submit button.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.anchor_button4 {
	-webkit-appearance:none;
	appearance:none;
	display: inline-block;
	padding: 0px 20px;
	color: #FFFFFF;
	text-decoration: none;
	font-size: 20px;
	margin: 25px auto;
	font-weight: bold;
	background: #F16334;
	border: 3px solid #F16334;
}
.anchor_button4 svg {
	display: inline-block;
	vertical-align:middle;
	width:30px;
	height:30px;
}
</style>
</head>

<body>
<div>
  <form>
    <button type="submit" name="submit" value="Buy now" class="anchor_button4"> Buy Now <svg version="1.1" id="L2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
    <circle fill="none" stroke="#fff" stroke-width="4" stroke-miterlimit="10" cx="50" cy="50" r="48"/>
    <line fill="none" stroke-linecap="round" stroke="#fff" stroke-width="4" stroke-miterlimit="10" x1="50" y1="50" x2="85" y2="50.5">
      <animateTransform 
       attributeName="transform" 
       dur="2s"
       type="rotate"
       from="0 50 50"
       to="360 50 50"
       repeatCount="indefinite" />
    </line>
    <line fill="none" stroke-linecap="round" stroke="#fff" stroke-width="4" stroke-miterlimit="10" x1="50" y1="50" x2="49.5" y2="74">
      <animateTransform 
       attributeName="transform" 
       dur="15s"
       type="rotate"
       from="0 50 50"
       to="360 50 50"
       repeatCount="indefinite" />
    </line>
    </svg> </button>
  </form>
</div>
</body>
</html>
2 Likes
33

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.