Have to double click the Submit button twice to execute POST. Bootstrap, Jquery Validate - css

This registration form actually works as designed when all the fields are populated. The issue that I am having is when the "Create Account" button is clicked, it fires a Submit/Post and the reCaptcha buttons are moved to below the reCaptcha input text and does nothing after the first click. I have to click the "Create Account" button again to actually achieve the post action.
Can someone analyze my code below and help me fix this behavior?
!DOCTYPE html>
<!--[if IE 8]>
<html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->
<head>
<link rel="stylesheet" href="/static/css/bootstrap.min.css" />
<script type="text/javascript" src="/static/js/jquery-min.js"></script>
<script type="text/javascript" src="/static/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="/static/js/additional-methods.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<!-- This block code is the place holder for the content files -->
<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
<div class='container'>
<form id='reguser' class="form-horizontal" action='' method='POST'>
<fieldset>
<legend> Create User Account </legend>
<div class="control-group">
<div class="control-group">
<label class="control-label" for="email">Email</label>
<div class="controls">
<input type="text" class="input-large" name="email" id="email" >
</div>
</div>
<label class="control-label" for="fname">First Name</label>
<div class="controls">
<input type="text" class="input-large" name="fname" id="fname" >
</div>
</div>
<div class="control-group">
<label class="control-label" for="lname">Last Name</label>
<div class="controls">
<input type="text" class="input-large" name="lname" id="lname" >
</div>
</div>
<div class="control-group">
<label class="control-label" for="pwd">Password</label>
<div class="controls">
<input type="password" class="input-large" name="pwd" id="pwd" >
</div>
</div>
<div class="control-group">
<label class="control-label" for="cpwd">Confirm Password</label>
<div class="controls">
<input type="password" class="input-large" name="cpwd" id="cpwd" >
</div>
</div>
<!-- reCaptcha is engaged here -->
<script type="text/javascript">
var RecaptchaOptions = {
theme : 'custom',
custom_theme_widget: 'recaptcha_widget'
};
</script>
<div id="recaptcha_widget" style="display:none">
<div class="control-group">
<label class="control-label">reCAPTCHA:</label>
<div class="controls">
<a id="recaptcha_image" class="thumbnail"></a>
</div>
</div>
<div class="control-group">
</div>
<div class="control-group">
<label class="recaptcha_only_if_image control-label" for="recaptcha_response_field" >Enter the words above:</label>
<label class="recaptcha_only_if_audio control-label">Enter the numbers you hear:</label>
<div class="controls">
<div class="input-append">
<input type="text" id="recaptcha_response_field" name="recaptcha_response_field"class="input-recaptcha" placeholder="Enter the capctha here" name="recaptcha_response_field" />
<a class="btn" href="javascript:Recaptcha.reload()"><i class="icon-refresh"></i></a>
<a class="btn recaptcha_only_if_image" href="javascript:Recaptcha.switch_type('audio')"><i title="Get an audio CAPTCHA" class="icon-headphones"></i></a>
<a class="btn recaptcha_only_if_audio" href="javascript:Recaptcha.switch_type('image')"><i title="Get an image CAPTCHA" class="icon-picture"></i></a>
<a class="btn" href="javascript:Recaptcha.showhelp()"><i class="icon-question-sign"></i></a>
</div>
</div>
</div>
</div>
<script type="text/javascript"
src="https://www.google.com/recaptcha/api/challenge?k=6LclG-QSAAAAAMS-Ywg49zrMdm209o9CKxgyOqvr">
</script>
<noscript>
<iframe src="https://www.google.com/recaptcha/api/noscript?k=6LclG-QSAAAAAMS-Ywg49zrMdm209o9CKxgyOqvr"
height="300" width="500" frameborder="0"></iframe><br>
<textarea name="recaptcha_challenge_field" rows="3" cols="40">
</textarea>
<input type="hidden" name="recaptcha_response_field" value="manual_challenge">
</noscript>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Create Account</button>
<button type="reset" class="btn">Cancel</button>
</div>
</fieldset>
</form>
</div>
<!--
<form id='frmRegister' action='/account/new' method='POST'>
<label for >Create Account</label><br>
<label>First Name</label><input id='fname' name='fname' type="text" required><br>
<label>Last Name</label><input id='lname' name='lname' type="text" required><br>
<label>email</label><input id='email' name='email' type="text" required><br>
<label>password</label><input id='pwd' name="pwd" type="password" required><br>
<label>confirm password</label><input id='confpwd'name="confpwd" type="password" required><br><br>
<div name ="recap" id="recap"></div>
<input type="button" value="Show reCAPTCHA" onclick="showRecaptcha('recap');"></input>
<input type="submit" value="Create Account">
</form>
-->
<script>
$(document).ready(function(){
$('#reguser').validate({
rules: {
fname: {
minlength: 2,
required: true
},
lname: {
minlength: 2,
required: true
},
email: {
required: true,
email: true
},
pwd: {
minlength: 6,
required: true
},
cpwd: {
minlength: 6,
required: true,
equalTo: "#pwd"
},
recaptcha_response_field:{
required: true
}
},
messages:{
email:{
required: "Please provide a valid email address.",
email: "Your email address must be in the format of name#domain.com"
}
},
highlight: function(element) {
$(element).closest('.control-group').removeClass('success').addClass('error');
},
success: function(element) {
element
.addClass('valid')
.closest('.control-group').removeClass('error').addClass('success');
}
});
});
</script>
</body>
</html>

Related

How to make input fields not falling into new line for inline form of bootstrap 4?

I have an inline form that its input fields are more longer width than screen therefore some fields fall into new line.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Inline form</h1>
<div class="container-fluid">
<div class="row" style="flex-wrap: nowrap; overflow-x: scroll;">
<form>
<div class="form-row">
<div class="col-2">
<label for="">First Name</label>
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col-2">
<label for="">Last Name</label>
<input type="text" class="form-control" placeholder="Last name">
</div>
<div class="col-2">
<label for="">Gender</label>
<input type="text" class="form-control" placeholder="Gender">
</div>
<div class="col-2">
<label for="">Age</label>
<input type="text" class="form-control" placeholder="Age">
</div>
<div class="col-2">
<label for="">Address</label>
<input type="text" class="form-control" placeholder="Address">
</div>
<div class="col-2">
<label for="">Phone Number</label>
<input type="text" class="form-control" placeholder="Phone Number">
</div>
<div class="col-2">
<label for="">Email</label>
<input type="text" class="form-control" placeholder="Email">
</div>
<div class="col-2">
<label for="">Website</label>
<input type="text" class="form-control" placeholder="Website">
</div>
</div>
</form>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>
Understanding the bootstrap column should not exceed 12 columns width per row, but since I have many fields I want those those fields go into one single row with scroll bar.
How can I do that? Even thought, I set style flex-wrap: nowrap; overflow-x: scroll; to class .row already, it is still not working. Thanks.

you achive this using adding flex-nowrap class in .form-row div
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Inline form</h1>
<div class="container-fluid">
<div class="row" style="flex-wrap: nowrap; overflow-x: scroll;">
<form>
<div class="form-row flex-nowrap">
<div class="col-2">
<label for="">First Name</label>
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col-2">
<label for="">Last Name</label>
<input type="text" class="form-control" placeholder="Last name">
</div>
<div class="col-2">
<label for="">Gender</label>
<input type="text" class="form-control" placeholder="Gender">
</div>
<div class="col-2">
<label for="">Age</label>
<input type="text" class="form-control" placeholder="Age">
</div>
<div class="col-2">
<label for="">Address</label>
<input type="text" class="form-control" placeholder="Address">
</div>
<div class="col-2">
<label for="">Phone Number</label>
<input type="text" class="form-control" placeholder="Phone Number">
</div>
<div class="col-2">
<label for="">Email</label>
<input type="text" class="form-control" placeholder="Email">
</div>
<div class="col-2">
<label for="">Website</label>
<input type="text" class="form-control" placeholder="Website">
</div>
</div>
</form>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>

Change the col-2 class to just col and everything lays out on one line.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Inline form</h1>
<div class="container-fluid">
<div class="row" style="flex-wrap: nowrap; overflow-x: scroll;">
<form>
<div class="form-row">
<div class="col">
<label for="">First Name</label>
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<label for="">Last Name</label>
<input type="text" class="form-control" placeholder="Last name">
</div>
<div class="col">
<label for="">Gender</label>
<input type="text" class="form-control" placeholder="Gender">
</div>
<div class="col">
<label for="">Age</label>
<input type="text" class="form-control" placeholder="Age">
</div>
<div class="col">
<label for="">Address</label>
<input type="text" class="form-control" placeholder="Address">
</div>
<div class="col">
<label for="">Phone Number</label>
<input type="text" class="form-control" placeholder="Phone Number">
</div>
<div class="col">
<label for="">Email</label>
<input type="text" class="form-control" placeholder="Email">
</div>
<div class="col">
<label for="">Website</label>
<input type="text" class="form-control" placeholder="Website">
</div>
</div>
</form>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>

How to make one column have position fixed on horizontal scroll only?

I have one inline form that spans over horizontally and vertically. In this form, I have one
last column that is an add button that I want it to have a fixed position but only when I scroll the form horizontally, not vertically.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title>Hello, world!</title>
<style>
.btn-control {
position: fixed;
right: 0;
}
</style>
</head>
<body>
<h1>Inline form</h1>
<div class="container" style="width: 55%; height: 500px;">
<div class="row" style="flex-wrap: nowrap; overflow-x: scroll;">
<form style=" ">
<div class="form-row flex-nowrap">
<div class="col-3">
<label for="">First Name</label>
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col-3">
<label for="">Last Name</label>
<input type="text" class="form-control" placeholder="Last name">
</div>
<div class="col-3">
<label for="">Gender</label>
<input type="text" class="form-control" placeholder="Gender">
</div>
<div class="col-3">
<label for="">Age</label>
<input type="text" class="form-control" placeholder="Age">
</div>
<div class="col-3">
<label for="">Phone Numher</label>
<input type="text" class="form-control" placeholder="Phone Numher">
</div>
<div class="col-3 btn-control">
<p></p>
<button class="btn btn-info btn-circle">+</button>
</div>
</div>
<div class="form-row flex-nowrap">
<div class="col-3">
<label for="">First Name</label>
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col-3">
<label for="">Last Name</label>
<input type="text" class="form-control" placeholder="Last name">
</div>
<div class="col-3">
<label for="">Gender</label>
<input type="text" class="form-control" placeholder="Gender">
</div>
<div class="col-3">
<label for="">Age</label>
<input type="text" class="form-control" placeholder="Age">
</div>
<div class="col-3">
<label for="">Phone Numher</label>
<input type="text" class="form-control" placeholder="Phone Numher">
</div>
<div class="col-3 btn-control">
<p></p>
<button class="btn btn-info btn-circle">+</button>
</div>
</div>
<div class="form-row flex-nowrap">
<div class="col-3">
<label for="">First Name</label>
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col-3">
<label for="">Last Name</label>
<input type="text" class="form-control" placeholder="Last name">
</div>
<div class="col-3">
<label for="">Gender</label>
<input type="text" class="form-control" placeholder="Gender">
</div>
<div class="col-3">
<label for="">Age</label>
<input type="text" class="form-control" placeholder="Age">
</div>
<div class="col-3">
<label for="">Phone Numher</label>
<input type="text" class="form-control" placeholder="Phone Numher">
</div>
<div class="col-3 btn-control">
<p></p>
<button class="btn btn-info btn-circle">+</button>
</div>
</div>
</form>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>
I have set position: fixed but does not solve the problem as currently, the button has fixed position on both horizontal and vertical. I found some resources, but it does not fit my need.
Thanks.

position sticky should work
.btn-control {
position: sticky;
right: 0;
}
if it work you can change right position

Bootstrap Input-Group Multiple Textbox Widths

I have 2 textboxes in an input-group, seperated by an input-group-addon span. My problem is, I want textbox 1 to be wider than textbox 2. Textbox 1 is supposed to be the phone number (larger) and textbox 2 is an extension number (slimmer). I have a fiddle below:
https://jsfiddle.net/Lhhj7f5d/
<div class="col-xs-6">
<div class="input-group">
<input class="form-control" type="tel" placeholder="Phone Number" />
<span class="input-group-addon">Ext.</span>
<input class="form-control" type="text" placeholder="Extension"/>
</div>
</div>
Thanks!

You can set a width to your form
<div class="col-xs-6">
<div class="input-group">
<input class="form-control" type="tel" placeholder="Phone Number" />
<span class="input-group-addon">Ext.</span>
<input class="form-control" type="text" placeholder="Extension" style="width : 20px;"/>
</div>
</div>
or use css

You need to put your input tag inside a div with col-xs-*.
#phoneField .col-xs-3{
padding:0;
}
#phoneField .col-xs-3::after{
content: "-";
position:absolute;
margin:5px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-xs-6">
<div id="phoneField" class="input-group">
<div class="col-xs-3">
<input class="form-control" type="text" placeholder="Ext" maxlength="3"/>
</div>
<div class="col-xs-9">
<input class="form-control" type="tel" placeholder="Phone Number" maxlength="10"/>
</div>
</div>
</div>
</body>
</html>

Bootstrap Inline form - Horizontal stacked inputs and button

I have a design, where there are 4 input fields ending with a Search Button i.e.
INPUT1 INPUT2 INPUT3 INPUT4 BUTTON
I need all these to be stacked horizontally inside a form tag and should be inline with out any padding or spaces, showing at the center of the page on top of a banner. Need to accomplish this using bootstrap.
Regards,
Sijo Jose

Try this one.
<form>
<div class="input-container">
<div class="inline-content">
<input type="text" value="input 1">
<input type="text" value="input 2">
<input type="text" value="input 3">
<input type="text" value="input 4">
<button type="button">button</button>
</div>
</div>
</form>
I have also created a Bootply. Here is the link. http://www.bootply.com/XlBQ3QRLGN

Below code might help
HTML Code :-
<div class="header">
<div class="inner">
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="submit"/>
</div>
</div>
CSS Code:-
div {
min-height:75px;
line-height:75px;
text-align:center;
color:white;
font-weight:bold;
}
.inner {
width:100%;
max-width:960px;
margin:0 auto;
}
.header {
background:red;
}
Using form-inline using bootstrap :-
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
form {
margin: 0 auto;
}
</style>
</head>
<body>
<form class="form-inline">
<label class="sr-only" for="inlineFormInput">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="inputone">
<label class="sr-only" for="inlineFormInput">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="inputtwo">
<label class="sr-only" for="inlineFormInput">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="inputthree">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</body>
</html>

Using bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form>
<label class="text-inline">
<input type="text">
</label>
<label class="text-inline">
<input type="text">
</label>
<label class="text-inline">
<input type="text">
</label>
<label class="btn-inline">
<input type="submit" name="submit">
</label>
</form>
</div>
</body>
</html>

How to make login form responsive

Application uses Bootstrap to create logon form below. In mobile devices logon form is too small, centered in mobile screen, lot of white space.
It is difficult to enter user's name and password.
How can I fix this so that the login form looks native in mobile phones also ?
Or is there some template which can used to create usable logon form for any screen resolution ?
<!DOCTYPE html>
<html>
<head>
<link href="/admin/css/redmond/jquery-ui.css" rel="stylesheet" />
<link href="/admin/Content/font-awesome.min.css" rel="stylesheet" />
<link href="/admin/Content/bootstrap.css" rel="stylesheet" />
<link href="/admin/Content/bootstrap-theme.css" rel="stylesheet" />
<title>
Login
</title>
<script src="/admin/Scripts/jquery-1.11.2.js"></script>
<script src="/admin/Scripts/jquery-ui-1.11.4.js"></script>
<script src="/admin/Scripts/bootstrap.js"></script>
</head>
<body>
<div class='login-box container'>
<form action="/admin/Account/LogOn" method="post">
<fieldset>
<legend>Login</legend>
<div class="form-group">
<label for="user">User</label>
<input autofocus="1" class="form-control" id="user" maxlength="10" name="UserName" placeholder="User" required="True" style="width:auto" type="text" value="" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control" id="password" name="Password" placeholder="Password" required="True" style="width:auto" type="password" />
</div>
<div class="checkbox">
<label>
<input id="RememberMe" name="RememberMe" type="checkbox" value="true" />
<input name="RememberMe" type="hidden" value="false" /> Remember me
</label>
</div>
</fieldset>
<input type="submit" value='Logon' class="btn btn-primary" />
</form>
</div>
<script type="text/javascript">
$(function() {
$("input:text:visible:first").focus();
});
</script>
</body>
</html>
HTML5, Bootstrap 3, jQuery, jQuery UI, ASP.NET MVC 4, and Razor are used.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Vertical (basic) form</h2>
<form role="form">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>

Resources