Can a input type="submit" button have an HTML label?

Question

Can you put a tag, to be specific (ion icons) tag to an input type submit value?

I got these 2 tags and I need to combine them

<input type="submit" name="plus" value="" class="btn">
<ion-icon name="chevron-forward-outline"></ion-icon>

Like so, But to make it work.

<input type="submit" name="plus" value="<ion-icon name="chevron-forward-outline"></ion-icon>" class="btn">

Can you elaborate a bit more on what you're trying to accomplish here? — esqew, Sep 23 '20 at 14:51
Sure my bad. I am trying to make the Icon as a value of the button. — zeddosx, Sep 23 '20 at 14:51
You can create a fake input around the input element with a icon. — Bruno Wego, Sep 23 '20 at 14:58

esqew · Accepted Answer · 2020-09-23T15:01:57.890

1

Not with <input type='submit' ...>, as HTML labels aren't supported this way. From <input type="button"> MDN page:

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.

As such, with the functionally-same <button> you can have HTML labels:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/ionicons@5.1.2/dist/ionicons.js"></script>
<button type="submit" name="plus" value="" class="btn btn-primary">
    <ion-icon name="chevron-forward-outline"></ion-icon>
</button>

edited Sep 23 '20 at 15:01

answered Sep 23 '20 at 14:55

esqew

42,425
27
92
132

Yes. This is definitely a way to do it. I was really just wondering if it was possible to do with the Input type submit. Thanks. – zeddosx Sep 23 '20 at 14:57
@zeddosx I just added a bit more context and sourcing around this - buttons created using `` tags don't support HTML in the label. ` – esqew Sep 23 '20 at 14:58
Ok thanks. I didn't know that. Def. going to use this in my future projects. – zeddosx Sep 23 '20 at 14:59

score 0 · Answer 2 · answered Sep 23 '20 at 14:51

0

use button tag

<button name="plus"  class="btn">
  <ion-icon name="chevron-forward-outline\"></ion-icon>
</button>

answered Sep 23 '20 at 14:51

coding warriors

1

We could use a little more explanation about why and how the ion-icon tag can be used here when wrapped with the button tag. @coding-warriors can you add more description to help other users with the same problem? – akahunahi Sep 23 '20 at 15:30

score 0 · Answer 3 · answered Sep 23 '20 at 15:09

Create a fake field, take a look:

.field {
  align-items: center;
  border: 1px solid #ccc;
  border-radius: .25rem;
  display: flex;
}

.field__input {
  appearance: none;
  border: 0;
  flex-grow: 1;
  padding: .5rem;
}

.field__icon {
  padding-right: .5rem;
}

<script src="https://unpkg.com/ionicons@5.1.2/dist/ionicons.js"></script>

<div class="field">
    <input class="field__input" type="text">
    <span class="field__icon">
        <ion-icon name="chevron-forward-outline"></ion-icon>
    </span>
</div>

Can a input type="submit" button have an HTML label?

3 Answers3