How can I use html controls as server side controls?

I am using runat server for input controls and it is not validating while I click the login button.

<form class="login-form" action="index.html" method="post" runat="server">

Login to your account

<div class="alert alert-danger display-hide">
<button class="close" data-close="alert"></button>
<span>Enter any username and password.</span>
</div>
<div class="form-group">
<!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
<asp:Label CSSclass="control-label visible-ie8 visible-ie9" runat="server">Username
<div class="input-icon">

<input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="Username" name="username" runat="server"/>
</div>
</div>
<div class="form-group">
<asp:Label CSSclass="control-label visible-ie8 visible-ie9" runat="server">Password
<div class="input-icon">

<input class="form-control placeholder-no-fix" type="password" autocomplete="off" placeholder="Password" name="password" runat="server"/>
</div>
</div>

<div class="form-actions">
<asp:Label CSSclass="checkbox" runat="server">
<input type="checkbox" name="remember" value="1" runat="server"/> Remember me

<asp:Button runat="server" type="submit" class="btn green pull-right" Text="Login">


</div>

<div class="forget-password">

Forgot your password ?

<p>
no worries, click here
to reset your password.
</p>

</div>
<script>
login.init();</script>

login.js code is:


var Login = function () {
alert("hi");

var handleLogin = function () {

// ajax login function to be called right after the form validation success
var ajaxLogin = function(form) {
form = $(form);
$.ajax({
type: "POST",
url: "index.html",
data: form.serialize(),
dataType: "json",
beforeSend:function(){
$('.alert-danger,.alert-success').hide();
},
error: function(jqXHR, textStatus, errorThrown){
alert(errorThrown);
$('.alert-danger').show();
$('.alert-danger span').html(errorThrown);
},
success: function(data){
alert('Success!!!');
$('.alert-success').show();
$('.alert-success span').html(data);
}
});
}

$('.login-form').validate({

errorElement: 'span', //default input error message container
errorClass: 'help-block', // default input error message class
focusInvalid: false, // do not focus the last invalid input
rules: {
userid: {
required: true
},
pwd: {
required: true
},
remember: {
required: false
}
},

messages: {
username: {
required: "Username is required1."
},
password: {
required: "Password is required2."
}
},

invalidHandler: function (event, validator) { //display error alert on form submit
$('.alert-danger', $('.login-form')).show();
},

highlight: function (element) { // hightlight error inputs
$(element)
.closest('.form-group').addClass('has-error'); // set error class to the control group
},

success: function (label) {
label.closest('.form-group').removeClass('has-error');
label.remove();
},

errorPlacement: function (error, element) {