SRL Archive - Web Development

Ok so I have a form, how can I make it so that when they click in the box the writing (for example: "First Name") disappears?

Let me know if you need the actual code.

EDIT: 2nd bit of help needed.

I have a background for a form.
How do I insert it?

My form code:

<img alt="" src="images/quick_form_text.png"
 border="0" /><br />
            <br />
            <div style="margin-left: 54px; padding-left: 30px;">
            <form method="post" action="fullform.php"><input
 onblur="if (this.value == '') {this.value = 'Firstname';}"
 size="15"
 onfocus="if (this.value == 'Firstname') {this.value = ''; }"
 id="text" name="firstname" value="Firstname"
 maxlength="27" /><br />
              <br />
              <input
 onblur="if (this.value == '') {this.value = 'Lastname';}"
 size="15"
 onfocus="if (this.value == 'Lastname') {this.value = ''; }"
 id="text" name="lastname" value="Lastname"
 maxlength="27" /><br />
              <br />
              <input
 onblur="if (this.value == '') {this.value = 'Telephone';}"
 size="15"
 onfocus="if (this.value == 'Telephone') {this.value = ''; }"
 id="text" name="telephone" value="Telephone"
 maxlength="27" type="text" /><br />
              <br />
              <input
 onblur="if (this.value == '') {this.value = 'Email Address';}"
 size="15"
 onfocus="if (this.value == 'Email Address') {this.value = ''; }"
 id="text" name="email" value="Email Address"
 maxlength="27" type="text" /><br />
              <br />
              <input
 onblur="if (this.value == '') {this.value = 'Approx. value of property (£)';}"
 size="15"
 onfocus="if (this.value == 'Approx. value of property (£)') {this.value = ''; }"
 id="text" name="value"
 value="Approx. value of property (£)" maxlength="29"
 type="text" /><br />
              <br />
              <input id="submit" name="submit"
 src="images/button_continue.png" style="margin-left: 28px;"
 type="image" /> </form>

Cheers

-Boom

onblur="if (this.value == '') {this.value = 'Username';}" onfocus="if (this.value == 'Username') {this.value = ''; }"

Example:

			<input class="search_box" 
			onblur="if (this.value == '') {this.value = 'Username';}" size="15"
			onfocus="if (this.value == 'Username') {this.value = ''; }" 
			type="text" name="user" maxlength="30" value="Username" />

put this in the input tags. Change 'username' to whatever you want it to show.

http://diveintohtml5.org/detect.html#input-placeholder

Personally, I would use jQuery to change the text, pretty much do the same thing as the poster above me said just alot less typing. Theres actually a plugin called jLabel or ILabelify or something that uses the Title text to insert it into your form value works fairly decent and is very easy to use.


Try googling it first, if you can't figure it out I'll post the code I use.

Need a bit more help, edited to first post <3

From: Dynamite
Need a bit more help, edited to first post <3

Use CSS to put a background on your form.

<style type="text/css">
#form_bg {
 background: transparent url('<The URL of the image>') 0 0 repeat-y;
}
</style>


<img alt="" src="images/quick_form_text.png"
 border="0" /><br />
            <br />
            <div style="margin-left: 54px; padding-left: 30px;">
            <form id="form_bg" method="post" action="fullform.php"><input
 onblur="if (this.value == '') {this.value = 'Firstname';}"
 size="15"
 onfocus="if (this.value == 'Firstname') {this.value = ''; }"
 id="text" name="firstname" value="Firstname"
 maxlength="27" /><br />
              <br />
              <input
 onblur="if (this.value == '') {this.value = 'Lastname';}"
 size="15"
 onfocus="if (this.value == 'Lastname') {this.value = ''; }"
 id="text" name="lastname" value="Lastname"
 maxlength="27" /><br />
              <br />
              <input
 onblur="if (this.value == '') {this.value = 'Telephone';}"
 size="15"
 onfocus="if (this.value == 'Telephone') {this.value = ''; }"
 id="text" name="telephone" value="Telephone"
 maxlength="27" type="text" /><br />
              <br />
              <input
 onblur="if (this.value == '') {this.value = 'Email Address';}"
 size="15"
 onfocus="if (this.value == 'Email Address') {this.value = ''; }"
 id="text" name="email" value="Email Address"
 maxlength="27" type="text" /><br />
              <br />
              <input
 onblur="if (this.value == '') {this.value = 'Approx. value of property (£)';}"
 size="15"
 onfocus="if (this.value == 'Approx. value of property (£)') {this.value = ''; }"
 id="text" name="value"
 value="Approx. value of property (£)" maxlength="29"
 type="text" /><br />
              <br />
              <input id="submit" name="submit"
 src="images/button_continue.png" style="margin-left: 28px;"
 type="image" /> </form>

From: Dankness
Personally, I would use jQuery to change the text, pretty much do the same thing as the poster above me said just alot less typing. Theres actually a plugin called jLabel or ILabelify or something that uses the Title text to insert it into your form value works fairly decent and is very easy to use.


Try googling it first, if you can't figure it out I'll post the code I use.

hi ! :surprised: