Let's apply simple bootstrap CSS classes to make it responsive.
We will be applying following bootstrap CSS classes:
- container: Top level bootstrap class with fixed width and left margin.
- form-horizontal: Places labels to the left of input/select controls.
- form-group: wraps labels and controls in div for optimum spacing.
- control-label: groups labels and input/select controls.
- form-control: styles for input/textarea/select elements.
- radio: styles for radio element.
- checkbox: styles for checkbox element.
- btn, btn-primary: styles for button element.
The following is a student form with bootstrap styling.
Example: AngularJS form with bootstrap CSS classes
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link href="~/Content/bootstrap.CSS" rel="stylesheet" />
<script src="~/Scripts/angular.js"></script>
</head>
<body ng-controller="studentController" class="container" > <br />
<form class="form-horizontal" ng-submit="submitStudnetForm()" role="form">
<div class="form-group">
<label for="firstName" class="col-sm-3 control-label">First Name</label>
<div class="col-sm-6">
<input type="text" id="firstName" class="form-control" ng-model="student.firstName" />
</div>
<div class="col-sm-3"></div>
</div>
<div class="form-group">
<label for="lastName" class="col-sm-3 control-label">Last Name</label>
<div class="col-sm-6">
<input type="text" id="lastName" class="form-control" ng-model="student.lastName" />
</div>
<div class="col-sm-3"></div>
</div>
<div class="form-group">
<label for="dob" class="col-sm-3 control-label">DoB</label>
<div class="col-sm-2">
<input type="date" id="dob" class="form-control" ng-model="student.DoB" />
</div>
<div class="col-sm-7"></div>
</div>
<div class="form-group">
<label for="gender" class="col-sm-3 control-label">Gender</label>
<div class="col-sm-2">
<select id="gender" class="form-control" ng-model="student.gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<div class="col-sm-7"></div>
</div>
<div class="form-group">
<div class="col-sm-3"></div>
<div class="col-sm-2">
<span><b>Training Location</b></span>
<div class="radio">
<label><input value="online" type="radio" name="training" ng-model="student.trainingType" />Online</label>
</div>
<div class="radio">
<label><input value="onsite" type="radio" name="training" ng-model="student.trainingType" />OnSite</label>
</div>
</div>
<div class="col-sm-7">
<span><b>Main Subjects</b></span>
<div class="checkbox">
<label><input type="checkbox" ng-model="student.maths" />Maths</label>
</div>
<div class="checkbox">
<label><input type="checkbox" ng-model="student.physics" />Physics</label>
</div>
<div class="checkbox">
<label><input type="checkbox" ng-model="student.chemistry" />Chemistry</label>
</div>
</div>
</div>
<input type="submit" value="Save" class="btn btn-primary col-sm-offset-3" />
<input type="reset" value="Reset" ng-click="resetForm()"
</form>
<script>
//1. create app module
var studentApp = angular.module('studentApp', []);
//2. create controller
studentApp.controller("studentController", function ($scope, $http) {
//3. attach originalStudent model object
$scope.originalStudent = {
firstName: 'James',
lastName: 'Bond',
DoB: new Date('01/31/1980'),
gender: 'male',
trainingType: 'online',
maths: false,
physics: true,
chemistry: true
};
//4. copy originalStudent to student. student will be bind to a form
$scope.student = angular.copy($scope.originalStudent);
//5. create submitStudentForm() function. This will be called when user submits the form
$scope.submitStudnetForm = function () {
var onSuccess = function (data, status, headers, config) {
alert('Student saved successfully.');
};
var onError = function (data, status, headers, config) {
alert('Error occured.');
}
$http.post('/student/submitData', { student:$scope.student })
.success(onSuccess)
.error(onError);
};
//6. create resetForm() function. This will be called on Reset button click.
$scope.resetForm = function () {
$scope.student = angular.copy($scope.OriginalStudent);
};
});
</script>
</body>
</html>
