Tekst in form verdwijnt onMouseClick
Ik ben bezig met een website en ik wil graag mooie forms hebben. Het maken van een background image voor mijn forms met CSS lukt wel, maar nu wil ik tekst in de form hebben waar de naam van de form in staat. Dus als je de form username hebt, moet er in de form in het zilver, met lettertype Arial 13 'username' staan. Als je op de form klikt om het in te vullen, moet de tekst meteen verdwijnen en kun je de form invullen.
Een voorbeeld is: spele.nl. Bij het zoekveld verdwijnt de tekst in de form waarna je als gebruiker je zoekopdracht kan geven.
Zover ik weet wordt dit gedaan met JavaScript, vandaar dat ik het hier heb geplaatst. Als het fout is, mijn excuses hiervoor.
Mvg,
Piet
Code (php)
1
2
3
4
5
2
3
4
5
<form method="post" action="login.php">
<label for="username">Username:</label>
<input type="text" id="username" name="username" value="username" onClick="this.value='';" />
<input type="submit />
</form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" value="username" onClick="this.value='';" />
<input type="submit />
</form>
Code (php)
1
<input type="text" value="Zoeken" onblur="if (this.value == '') {this.value = 'Zoeken';}" onfocus="if (this.value == 'Zoeken') {this.value = '';}" />
Code (php)
1
<input type="text" value="Wachtwoord" onblur="if (this.value == '') {this.value = 'Zoeken'; this.type = 'password';}" onfocus="if (this.value == 'Zoeken') {this.value = ''; this.type = 'text';}" />