Span Tag

Gadgetman496

I'm trying to use the "Span Tag" in a line of HTML code but I can't get it to do what I want.

I want the Asterix in the line of code to appear RED while leaving the rest of the text default.

The line of code:

<input name="name" placeholder="Enter your name *" required / type="name">


This line below works fine as a standalone line of code so how can I incorporate it into the line above in order to get the asterix to show red?

<p><span style="color: red;">THE WORD YOU WANT RED</span></p>


-

Talisman

The simple answer is you can't. You can style the entire text across most browsers using vendor-prefixed selectors.

HTML:

<input class="red-placeholder" name="name" placeholder="Enter your name *"
 required type="text">

CSS:

input[type="text"].red-placeholder::-webkit-input-placeholder,
input[type="text"].red-placeholder::-moz-placeholder,
input[type="text"].red-placeholder:-ms-input-placeholder {
  color: red;
  opacity: 1;
}

S.M.B.

You would normally find the red asterisk with or without text saying that's it's required outside the input box anyway.

Wheety

S.M.B. wrote: »

You would normally find the red asterisk with or without text saying that's it's required outside the input box anyway.

This. I think the placeholder text is grayed out (as standard)? It's not meant to stand out too much.

Usually you'd have the asterisk outside the box.

Dubba

Have you seen this solution on stackoverflow? Basically creating your own placeholder element within an input, with span tags for the asterix.

Gadgetman496

Dubba wrote: »

Have you seen this solution on stackoverflow? Basically creating your own placeholder element within an input, with span tags for the asterix.

That's exactly what I wanted to achieve but that solution is CSS and I have no idea how to use that in conjunction with the HTML form I'm using.

The form I'm using is is a contact form from https://formspree.io/

This is the HTML code:

<form method="POST" action="https://formspree.io/YOUREMAILHERE"&gt;
<input name="email" placeholder="Your email" type="email">
<textarea name="message" placeholder="Your message"></textarea>
<button type="submit">Send</button>
</form>

Talisman

Normally you would use a label tag for each input and use CSS to style the markup.

<form method="POST" action="https://formspree.io/YOUREMAILHERE">
    <div class="field">
        <label class="placeholder" for="email">
            Email Address <span class="red">*</span>
        </label>
        <input name="email" placeholder="Your email" required type="email">
    </div>
    <div class="field">
        <label class="placeholder" for="message">
            Message <span class="red">*</span>
        </label>
        <textarea name="message" placeholder="Your message"></textarea>
    </div>
    <div class="field">
        <button type="submit">Send</button>
    </div>
</form>

Gadgetman496

Talisman wrote: »

Normally you would use a label tag for each input and use CSS to style the markup.

<form method="POST" action="https://formspree.io/YOUREMAILHERE">
    <div class="field">
        <label class="placeholder" for="email">
            Email Address <span class="red">*</span>
        </label>
        <input name="email" placeholder="Your email" required type="email">
    </div>
    <div class="field">
        <label class="placeholder" for="message">
            Message <span class="red">*</span>
        </label>
        <textarea name="message" placeholder="Your message"></textarea>
    </div>
    <div class="field">
        <button type="submit">Send</button>
    </div>
</form>

Right now if I punch that form code into a web-page it returns this, so I'm guessing you mean that CSS code would clean that look up and format it differently on the page?





I have no idea how to get this all together so I'm obviously living up to my post prefix of COLOR="DarkGreen"]n00b[/COLOR Ha Ha Ha!

I think this is just outside my league and it would probably drive anyone willing to help crazy.

I really do appreciate you guy's trying to get me to understand it a little better trough, so thanks to all who replied

Dubba

I think this is just outside my league

I think it'd be worth taking a free online course in web dev because your not at the stage yet that googling for a solution to your issues would be any use. Realistically, you would need to know the basics off html and css for what your trying to do, it's not too complicated and you should be able to pick it up pretty fast.

If that doesn't interest you. Have a look at w3schools.com CSS Forms, for an idea of how to style forms.

Talisman

Gadgetman496 wrote: »

Right now if I punch that form code into a web-page it returns this, so I'm guessing you mean that CSS code would clean that look up and format it differently on the page?



I have no idea how to get this all together so I'm obviously living up to my post prefix of COLOR="DarkGreen"]n00b[/COLOR Ha Ha Ha!

I think this is just outside my league and it would probably drive anyone willing to help crazy.

I really do appreciate you guy's trying to get me to understand it a little better trough, so thanks to all who replied

The best approach to learning HTML & CSS would be to followed a structured course. It's far too easy to search online and pick up bad practices. I would recommend signing up to Codecademy and working through their Web Development track.

Talisman

Another great resource for any aspiring web developer is the Frontend Masters sponsored Front-End Developer Handbook. It's updated annually so the resources listed are always up to date.