WEB TECHNOLOGIES
ASSIGNMENT-5
NAME : Santhosh R
HTNO : 2203A51190
Batch-11
[Link] a Simple Form with Multiple Controllers on AngularJS
Output Design:
Form Header: "User Information Form"
Personal Information Section:
Labels and input fields for "First Name" and "Last Name."
Beneath the input fields, the form will display the full name (e.g.,
"Full Name: SR University") as the user types.
Contact Information Section:
Labels and input fields for "Email" and "Phone."
Beneath the input fields, the form will display the email and phone
number entered by the user (e.g., "Email: sru@[Link]" and "Phone:
0860-234567").
Layout:
Two distinct sections are separated by a horizontal line (<hr>).
The form is simple and intuitive, with each section having a clear
header.
<!DOCTYPE html>
<html ng-app="userApp">
<head>
<title>User Information Form</title>
<script
src="[Link]
.[Link]"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h2 {
color: #333;
}
form {
max-width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
label {
display: block;
margin-bottom: 5px;
}
input {
width: 100%;
padding: 8px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
}
hr {
margin: 20px 0;
}
</style>
</head>
<body>
<form>
<h2>User Information Form</h2>
<div ng-controller="PersonalInfoController">
<h3>Personal Information</h3>
<label for="firstName">First Name:</label>
<input type="text" id="firstName" ng-model="firstName"
placeholder="Enter your first name">
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" ng-model="lastName"
placeholder="Enter your last name">
<p><strong>Full Name:</strong> {{firstName}}
{{lastName}}</p>
</div>
<hr>
<div ng-controller="ContactInfoController">
<h3>Contact Information</h3>
<label for="email">Email:</label>
<input type="email" id="email" ng-model="email"
placeholder="Enter your email">
<label for="phone">Phone:</label>
<input type="text" id="phone" ng-model="phone"
placeholder="Enter your phone number">
<p><strong>Email:</strong> {{email}}</p>
<p><strong>Phone:</strong> {{phone}}</p>
</div>
</form>
<script>
// Define the AngularJS application
var app = [Link]('userApp', []);
// Controller for Personal Information Section
[Link]('PersonalInfoController', function($scope) {
$[Link] = '';
$[Link] = '';
});
// Controller for Contact Information Section
[Link]('ContactInfoController', function($scope) {
$[Link] = '';
$[Link] = '';
});
</script>
</body>
</html>
OUTPUT
2. Create Nested Controllers in a Form using AngularJS
Output Design:
Form Header: "User Registration Form"
User Details Section:
Labels and input fields for "Username" and "Password."
Profile Information Section:
Labels and input fields for "Age" and a dropdown for "Gender" with
options ("Male," "Female," "Other").
Summary Section:
Displays a summary of the entered data, including the username,
password, age, and gender.
<!DOCTYPE html>
<html ng-app="registrationApp">
<head>
<title>User Registration Form</title>
<script
src="[Link]
.[Link]"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h2 {
color: #333;
}
form {
max-width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
label {
display: block;
margin-bottom: 5px;
}
input, select {
width: 100%;
padding: 8px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
}
hr {
margin: 20px 0;
}
</style>
</head>
<body>
<form>
<h2>User Registration Form</h2>
<!-- User Details Section -->
<div ng-controller="UserDetailsController">
<h3>User Details</h3>
<label for="username">Username:</label>
<input type="text" id="username" ng-model="username"
placeholder="Enter your username">
<label for="password">Password:</label>
<input type="password" id="password" ng-
model="password" placeholder="Enter your password">
<!-- Nested Controller for Profile Information Section -->
<div ng-controller="ProfileInfoController">
<h3>Profile Information</h3>
<label for="age">Age:</label>
<input type="number" id="age" ng-model="age"
placeholder="Enter your age">
<label for="gender">Gender:</label>
<select id="gender" ng-model="gender">
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
<!-- Summary Section -->
<hr>
<h3>Summary</h3>
<p><strong>Username:</strong> {{username}}</p>
<p><strong>Password:</strong> {{password}}</p>
<p><strong>Age:</strong> {{age}}</p>
<p><strong>Gender:</strong> {{gender}}</p>
</div>
</div>
</form>
<script>
// Define the AngularJS application
var app = [Link]('registrationApp', []);
// Controller for User Details Section
[Link]('UserDetailsController', function($scope) {
$[Link] = '';
$[Link] = '';
});
// Nested Controller for Profile Information Section
[Link]('ProfileInfoController', function($scope) {
$[Link] = '';
$[Link] = '';
});
</script>
</body>
</html>
OUTPUT
3. Implement form controls with validation, ensuring that
required fields are filled and the input is in the correct format.
<!DOCTYPE html>
<html ng-app="registrationApp">
<head>
<title>User Registration Form</title>
<script
src="[Link]
.[Link]"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h2 {
color: #333;
}
form {
max-width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
label {
display: block;
margin-bottom: 5px;
}
input, select {
width: 100%;
padding: 8px;
margin-bottom: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
.error {
color: red;
font-size: 0.9em;
}
hr {
margin: 20px 0;
}
.submit-btn {
background-color: #28a745;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.submit-btn:disabled {
background-color: #ccc;
cursor: not-allowed;
}
</style>
</head>
<body>
<form name="registrationForm" ng-submit="submitForm()"
novalidate>
<h2>User Registration Form</h2>
<!-- User Details Section -->
<div ng-controller="UserDetailsController">
<h3>User Details</h3>
<label for="username">Username:</label>
<input type="text" id="username" name="username" ng-
model="username" placeholder="Enter your username" required>
<span class="error" ng-
show="[Link].$touched &&
[Link].$invalid">Username is
required.</span>
<label for="password">Password:</label>
<input type="password" id="password"
name="password" ng-model="password" placeholder="Enter your
password" required>
<span class="error" ng-
show="[Link].$touched &&
[Link].$invalid">Password is required.</span>
<!-- Nested Controller for Profile Information Section -->
<div ng-controller="ProfileInfoController">
<h3>Profile Information</h3>
<label for="age">Age:</label>
<input type="number" id="age" name="age" ng-
model="age" placeholder="Enter your age" required min="18"
max="100">
<span class="error" ng-
show="[Link].$touched &&
[Link].$invalid">Age is required and must be
between 18 and 100.</span>
<label for="gender">Gender:</label>
<select id="gender" name="gender" ng-
model="gender" required>
<option value="" disabled selected>Select your
gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
<span class="error" ng-
show="[Link].$touched &&
[Link].$invalid">Gender is required.</span>
<!-- Summary Section -->
<hr>
<h3>Summary</h3>
<p><strong>Username:</strong> {{username}}</p>
<p><strong>Password:</strong> {{password}}</p>
<p><strong>Age:</strong> {{age}}</p>
<p><strong>Gender:</strong> {{gender}}</p>
</div>
</div>
<button type="submit" class="submit-btn" ng-
disabled="registrationForm.$invalid">Submit</button>
</form>
<script>
// Define the AngularJS application
var app = [Link]('registrationApp', []);
// Controller for User Details Section
[Link]('UserDetailsController', function($scope) {
$[Link] = '';
$[Link] = '';
});
// Nested Controller for Profile Information Section
[Link]('ProfileInfoController', function($scope) {
$[Link] = '';
$[Link] = '';
});
// Form submission logic
[Link]('FormController', function($scope) {
$[Link] = function() {
if ($[Link].$valid) {
alert('Form submitted successfully!');
} else {
alert('Please fill out the form correctly.');
}
};
});
</script>
</body>
</html>
OUTPUT
