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>
Related
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>
I am improving my bootstrap skills, i wanna know why in one place for inlining one work and in one place another, here : d-inline-block and this form-inline, what it difference between this two and why for example using 'form-inline' in 'd-inline-block' place wont work ? both has form classes ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<style>
body{
padding:0px;
margin:0px;}
</style>
</head>
<body>
<div class="form-group form-inline pt-4">
<div class="col-sm-10">
<div class="fas fa-lock"></div> <input type="password" class="form-control" id="pwd" placeholder=" password" name="pwd">
</div>
</div>
<div class=" ">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
</div>
</div>
</div>
<div class="form-group d-inline-block">
<button type="submit" class="btn btn-success ml-3">Login</button>
</div>
<div class="form-group d-inline-block">
<button type="submit" class="btn btn-primary">Login with facebook</button>
</div>
</div>
</form>
</div>
</body>
</html>
The difference is that .form-inline allows you to align labels inline with related inputs. .form-inline should by applied to form element. When you use .d-inline-block applied to form-groups you are able to align them in a row, but labels will stay at top. Check the snippet below to see a difference:
form {
border: 2px solid black;
padding: 10px;
margin: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<style>
body {
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<h6>Inline form</h6>
<form class="form-inline">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group d-inline-block">
<button type="submit" class="btn btn-success ml-3">Login</button>
<button type="submit" class="btn btn-primary">Login with facebook</button>
</div>
</form>
<h6>Not inline form with .form-group.d-inline-block</h6>
<form>
<div class="form-group d-inline-block">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group d-inline-block">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group d-inline-block">
<button type="submit" class="btn btn-success ml-3">Login</button>
<button type="submit" class="btn btn-primary">Login with facebook</button>
</div>
</form>
</body>
</html>
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>
I have a simple Spring MVC 4.x (tiles) scenario. Where in response to a URI a form is displayed, however, Bootstrap styling is not kicking in:
JSP:
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<br/><br/><br/>
<form:form modelAttribute="car" method="post">
<div class="form-group">
<label for="title">Make</label>
<form:input path="make"/>
</div>
<div class="form-group">
<label for="isbn">Model (Long Label)</label>
<form:input path="model"/>
</div>
<div class="form-group">
<label for="isbn">Color</label>
<form:input path="color"/>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form:form>
Rendered HTML:
<body>
<div class="container">
<div class="row">
<div class="header">
</div>
<div id="main-content-container">
<!-- main body -->
<br/><br/><br/>
<form id="car" action="/libms/carsx" method="post">
<div class="form-group">
<label for="title">Make</label>
<input id="make" name="make" type="text" value=""/>
</div>
<div class="form-group">
<label for="isbn">Model (Long Label)</label>
<input id="model" name="model" type="text" value=""/>
</div>
<div class="form-group">
<label for="isbn">Color</label>
<input id="color" name="color" type="text" value=""/>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="footer">
</div>
</div>
</div>
</body>
Looks like this on screen:
I have verified if Spring's form:form is removed and <form> is used instead, the styling kicks in.
You need to include jquery and bootstrap on your page. For example:
<head>
<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>
You may also want to make of use some other bootstrap elements such as cssClass.
For example:
<form:form modelAttribute="car" method="post">
...can be changed to:
<form:form modelAttribute="car" cssClass="form-horizontal" method="post">
And:
<label for="title">Make</label>
...can be changed to:
<label for="title" class="col-sm-2 control-label">Make</label>
And:
<form:input path="make"/>
...can be changed to:
<div class="col-sm-2">
<form:input path="make" cssClass="form-control"/>
</div>
As you mention, the Spring form functionality also kicks in since you're including the Spring form taglib as well.
Have you Included Bootstrap in your jsp page Like
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<title>Products</title>
</head>
<body>
<div class="jumbotron">
<div class="container">
<h1>Products</h1>
<p>Add products</p>
</div>
</div>
....
I can't see it in your page
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>