Input forms + Dhtml


Okay there are lots of stuff you can use DHtml for. But ill show you it with input forms. Firstly we will begin with clearing forms with dhtml.

This is my simple input text form.
HTML Code
  1. <form action="" method=post>
  2. <input type=text name=username value="Username here">
  3. </form>


This is my form with dhtml onclick command.
HTML Code
  1. <form action="" method=post>
  2. <input type=text name=username value="Username here" onclick="this.value='';">
  3. </form>

This will basically set the text of the field to nothing.

This is my submit button.
HTML Code
  1. <form action="" method=post>
  2. <input type=submit name=login value="Login">
  3. </form>


This is my submit button with dhtml onclick feature again.
HTML Code
  1. <form action="" method=post>
  2. <input type=submit name=login value="Login" onclick="this.value='Submitting...';">
  3. </form>

The above code wll change the text of the submit button to Submitting...

There are lots of different dhtml commands such as:-
onkeydown
onkeypress
onmouseover
onclick
onfocus

Dhtml can also be used to run javascript and is extremely useful for ajax. Also here is a dhtml code that is not recommended in submit buttons...

HTML Code
  1. <form action="" method=post>
  2. <input type=submit name=login value="Login" onclick="this.disabled='1';">
  3. </form>

If this code is used, then the forms action will not be used. Its basically like pressing the stop button when you try logging in.

Thanks, thats all for now. If you have any questions then please ask
ilyas-shezad's Avatar
Views:
2,264
Rating:
There are currently no comments for this tutorial, login or register to leave one.