nativebutton

Hi,

Is nativebutton is the best way to create tree state image button?
How to use it in logon form?

Is the following code right way to do?
html code:

<form id='loginf' target='logintarget' onkeypress='submitOnEnter(event)' method='post'>
			<p style="text-align: right;">
				<span class='v-caption'>{username_caption} </span><input class='v-textfield' type='text' name='username'> <span
					class='v-caption'>{password_caption} </span><input class='v-textfield' type='password' name='password'>
						<!-- 
						<div onclick='document.forms[0]
.submit();' tabindex='0' class='v-nativebutton' role='button'>
							<span class='v-nativebutton-login'></span>
						</div>
						 -->
						<nativebutton onclick='document.forms[0]
.submit();' class='v-nativebutton-login' role='button' />
			</p>
		</form>

css code:

.v-nativebutton-login,
.v-nativebutton-login:active,
.v-nativebutton-login:focus {
    outline: none;
    border: none;
    background: transparent url(images/login_32.png) no-repeat;
    width: 32px;
    height: 32px;
}    
.v-nativebutton-login:hover {
    background: transparent url(images/login_push_32.png) no-repeat;
}
.v-nativebutton-login .v-nativebutton-caption {
    font-size: 12px;
}

.v-nativebutton-login::-moz-focus-inner {
    border: none;
    padding: 0;
}

.v-nativebutton-login .v-nativebutton-speed-caption {
    white-space: normal;
}