Angularjs and BOOTSTRAP3 are the best partners.
1, form.html:
<!doctype html>
<meta charset= "Utf-8" >
<link rel= "stylesheet" href= "Css/bootstrap-3.0.0/css/bootstrap.css" >
<script src= "Js/angular-1.3.0.js" ></script>
<script src= "Form.js" ></script>
<body>
<div class= "Panel Panel-primary" >
<div class= "Panel-heading" >
<div class= "Panel-title" > Bidirectional data Binding </div>
</div>
<div class= "Panel-body" >
<div class= "Row" >
<div class= "col-md-12" >
<form class= "form-horizontal" role= "form" ng-controller= "Userinfoctrl" >
<div class= "Form-group" >
<label class= "Col-md-2 Control-label" >
Mailbox:
</label>
<div class= "Col-md-10" >
<input type= "Email" class= "Form-control" placeholder= "recommended 126 mailboxes" ng-model= "Userinfo.email" >
</div>
</div>
<div class= "Form-group" >
<label class= "Col-md-2 Control-label" >
Password:
</label>
<div class= "Col-md-10" >
<input type= "Password" class= "Form-control" placeholder= "can only be numbers, letters, underscores" ng-model= "Userinfo.password" >
</div>
</div>
<div class= "Form-group" >
<div class= "Col-md-offset-2 col-md-10" >
<div class= "checkbox" >
<label>
<input type= "checkbox" ng-model= "Userinfo.autologin" > Automatic login
</label>
</div>
</div>
</div>
<div class= "Form-group" >
<div class= "Col-md-offset-2 col-md-10" >
<button class= "btn btn-default" ng-click= "Getformdata ()" > Get value of Form form </button>
<button class= "btn btn-default" ng-click= "Setformdata ()" > Set values for Form form </button>
<button class= "btn btn-default" ng-click= "Resetform ()" > Reset Form </button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
2, Form.js:
var userinfomodule = angular.module (' Userinfomodule ', []);
Userinfomodule.controller (' Userinfoctrl ', [' $scope ',
function ($scope) {
$scope. UserInfo = {//Initialize Assignment
Email: "[email protected]",
Password: "253445528",
Autologin:true
};
$scope. Getformdata = function () {//Get form data method
Console.log ($scope. UserInfo);
};
$scope. Setformdata = function () {//Set method
$scope. UserInfo = {
Email: '[email protected]‘,
Password: ' Damoqiongqiu ',
Autologin:false
}
};
$scope. Resetform = function () {//Reset method
$scope. UserInfo = {
Email: "[email protected]",
Password: "253445528",
Autologin:true
};
}
}
])
[email protected] and BOOTSTRAP3 's application