CODEWITHSUNDEEP
htmlcssattributes
certainlyNotHeisenberg
certainlyNotHeisenberg

Reputation: 103

How to add HTML to <input> value attribute

I have an <input> element whose value attribute I want to be italicized text. I'd like to write

<input type="submit" value="<em>Text</em>" name="text" class="button">

but that doesn't work since the HTML inside the attribute doesn't render. I know I can solve this with CSS using font-style: italic; but I've heard that isn't good form. So, mostly out of curiosity, what would be the "proper" way to do this?

Upvotes: 2

Views: 2620

Answers (4)

Oluwaseun Musa
Oluwaseun Musa

Reputation: 1

There are many ways to make the value in your button bold. Firstly let your HTML attributes be:

<input type="submit" value="Submit">

Put the below attribute inside your CSS file or your CSS style:

input[type="submit"]{
    font-weight: bold;
}

Upvotes: 0

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

You could define a new rule for your case using class for example .btn-italic :

.btn-italic{
    font-style: italic;
}

HTML will be :

<input type="submit" value="Text" name="text" class="button btn-italic">

Hope this helps.

.btn-italic{
    font-style: italic;
}
<input type="submit" value="Text" name="text" class="button btn-italic">

Upvotes: 3

Lennholm
Lennholm

Reputation: 7480

From your use of the <em>, I suspect you might've heard that the tag is better than styling because it really marks the enclosed text as emphasized.

However, that doesn't apply here. While the enclosed text may be rendered as italic, that's not the point of the tag. The tag is there to point out the function of the text rather than to say something about how it should be visualized. The <em> tag points out that emphasis should be placed on this particular piece of text. This is an important concept when it comes to accessibility browsers such as screen readers. If the text was only made italic with styling, the screen reader wouldn't know for what purpose it's made italic.

With buttons however, the function of the text is simply to be a label for the button and thus any desired style of the text is purely presentational and should be done with CSS.

Upvotes: 1

Kyle
Kyle

Reputation: 30

I think the only way you can do it is with CSS that you mentioned. Seems like this other thread was asking the same thing.

Upvotes: 0

Related Questions