Member Avatar for besktrap

Hi y'all. I'm just starting to learn HTML and just had a few questions. I was using some tutorials from w3schools.com, and I came across Event Attributes. So I have this textbox, and I want it, when clicked, to clear the the text box of it's value, and change the text color to black (as in the actual text box, not the whole screen). Then when you click out of the text box, I want it to change the text color back to grey and have the value of the text box be 'Email' again. Also, how do I change the font? Here's the code:

<form>
<input type="text" value="Email" name="Email" 
style="color:grey;text-align:left;background:white">
</form>

Thanks!

  • 3 Contributors
  • 2 Replies
  • 144 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by Walkere
Member Avatar for essential

HTML itself can provide you all the elements you need. But with dynamic changes, you will be needing some script for this to generate the output you need. Perhaps you can start with DHTML.

Member Avatar for Walkere

Some of that (changing the colors of the text and whatnot) you can do with CSS styles. The rest (changing the actual text) requires that you use a scripting language like Javascript.

For the styling (changing text color, background color, etc) you can apply a style to input buttons. With pseudo classes, you can have that style change based on whether it's being targeted (in focus) or not.

For example, put this in the <head> section of your page, and test it out with an <input type="text"> element...

<style type="text/css">
  input { color: #ccc; background-color: #eee; }
  input:focus { color: #000; background-color: #fff; }
</style>

The style applied to input:focus will only be applied when the input class is selected. The rest of the time, it will display what is declared for all inputs, and so it looks like it's inactive.

To alter the text inside the input, you'll need to use javascript. Posting in the javascript forum might get you some more specific help, but here's a nudge in the right direction.

Get a javascript framework, like jquery, to make it easier to select elements from the DOM.

jQuery has two methods to help you. The focus() method will trigger when an item is selected, and at that point you could clear the input and alter its style. The blur() method will trigger when the focus leaves the input, and at that point you could replace the text with "E-mail" and alter the style again.

Good luck,
- Walkere

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.