Scribd
Upload
10 views3 pages

Practical 3

The document outlines a practical assignment for creating an HTML form using Bootstrap that collects student information such as Enrollment No., Name, Semester, Branch, Mobile Number, Email, and Address. It includes JavaScript for email validation and a function to display the entered data when a button is clicked. The solution consists of HTML, JavaScript for email validation, and a script to display the collected data in an alert box.

Uploaded by

fomoda5195
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views3 pages

Practical 3

The document outlines a practical assignment for creating an HTML form using Bootstrap that collects student information such as Enrollment No., Name, Semester, Branch, Mobile Number, Email, and Address. It includes JavaScript for email validation and a function to display the entered data when a button is clicked. The solution consists of HTML, JavaScript for email validation, and a script to display the collected data in an alert box.

Uploaded by

fomoda5195
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Advance Web Programming (3161611)

Practical 3: Create a HTML form using bootstrap controls that will accept Enrollment No., Name, Semester, Branch,
Mobile Number, Email, Address etc. from the student, combine and display them on the page when button is clicked
also validate an Email address using Javascript.

Solution:

<!DOCTYPE html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<html>
<body>
<div class="container">
<h2>Student Registration Details</h2>
<form method="get" action="" name="form1">
<div class="form-group">
<label for="enrollmentno">Enrollment No.</label>
<input type="text" class="form-control" id="enrollmentno">
</div>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name">
</div>
<div class="form-group">
<label for="semester">Semester:</label>
<select class="form-control" id="semester">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</div>
<div class="form-group">
<label for="branch">Branch:</label>
<select class="form-control" id="branch">
<option value="I.T.">I.T.</option>
<option value="E.C.">E.C.</option>
<option value="Electrical">Electrical</option>
<option value="Mechanical">Mechanical</option>
<option value="Civil">Civil</option>
</select>
</div>

6th Semester IT (SSEC, Bhavnagar)


Advance Web Programming (3161611)
<div class="form-group">
<label for="mobileno">Mobile No</label>
<input type="text" class="form-control" id="mobileno">
</div>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email" name="email">
</div>

<div class="form-group">
<label for="address">Address:</label>
<textarea class="form-control" rows="5" id="address"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary"
onclick="ValidateEmail(document.form1.email);display(document.form1)">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
</div>
</form>
</div>
<script src="email-validation.js"></script>
<script src="display_data.js"></script>
</body>
</html>

email-validation.js

function ValidateEmail(inputText)
{
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(inputText.value.match(mailformat))
{
alert("Valid email address!");
document.form1.email.focus();
return true;
}
else
{
alert("You have entered an invalid email address!");
document.form1.email.focus();
return false;
}
}

6th Semester IT (SSEC, Bhavnagar)


Advance Web Programming (3161611)
display_data.js

function display()

var strText1 = document.getElementById("enrollmentno").value;

var strText2 = document.getElementById("name").value;

var strText3 = document.getElementById("semester").value;

var strText4 = document.getElementById("branch").value;

var strText5 = document.getElementById("mobileno").value;

var strText6 = document.getElementById("email").value;

var strText7 = document.getElementById("address").value;

var result = strText1 + ' ' + strText2 + ' ' + strText3 + ' ' + strText4 + ' ' + strText5 + ' ' + strText6 + ' ' + strText7;

alert("Entered Details: " + result);

Output:

6th Semester IT (SSEC, Bhavnagar)

You might also like