Scribd
Upload
16 views9 pages

Assignment 2 (F 2446)

Uploaded by

chamodik97madu
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
16 views9 pages

Assignment 2 (F 2446)

Uploaded by

chamodik97madu
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/ 9

ASSIGNMENT 2

ICT 256

2022/RP/ICT/S/P/F/2446
K. A. C. Madurangi
Question No.01
<html>
<head>
<title>Sign In</title>
<style>
table {
width: 360px;
padding: 20px;
border-collapse: collapse;
}
th {
padding: 15px;
text-align: center;
}
td {
padding: 10px;
}
input[type="email"],
input[type="password"] {
width: 100%;
height: 15px;
padding: 10px;
border: 1px solid lightgray;
}
input[type="submit"] {
width: 90px;
padding: 8px;
cursor: pointer;
}
.border{
border: 1px solid black;
}
</style>
</head>
<body>
<form>
<table>
<tr>
<th colspan="2" class="border" style="font-family: sans-serif;">Sign In</th>
</tr>
<tr>
<td class="border">E-mail address</td>
<td class="border"><input type="email" name="email" required></td>
</tr>
<tr>
<td class="border">Password</td>
<td class="border"><input type="password" name="password" required></td>
</tr>
<tr>
<th colspan="2" class="border" style="font-family: sans-serif;"><input
type="submit" value="Sign In"></th>
</tr>
</table>
</form>
</body>
</html>
Question No.02
<html>
<head>
<title>Sign Up</title>
<style>
table {
width: 500px;
padding: 20px;
border-collapse: collapse;
color: yellow;
}
#border {
border: 0.3px solid white;
}
.fontRight {
text-align: right;
}
td, th {
padding: 10px;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Populate days
var daySelect = document.getElementsByName('day')[0];
for (var i = 1; i <= 31; i++) {
var value = i.toString().padStart(2, '0');
var option = document.createElement('option');
option.value = value;
option.textContent = value;
daySelect.appendChild(option);
}

// Populate years
var yearSelect = document.getElementsByName('year')[0];
var currentYear = new Date().getFullYear();
var startYear = currentYear - 100;
for (var year = currentYear; year >= startYear; year--) {
var option = document.createElement('option');
option.value = year;
option.textContent = year;
yearSelect.appendChild(option);
}

// Populate countries
var countries = ["Sri Lanka","Australia","India","America","Qatar","Nepal","Canada"];
var countrySelect = document.getElementsByName('country')[0];
countries.forEach(function(country) {
var option = document.createElement('option');
option.value = country;
option.textContent = country;
countrySelect.appendChild(option);
});
});
</script>
</head>
<body>
<form>
<table>
<tr style="background-color: orange; padding: 10px;">
<td colspan="2" id="border">Sign Up</td>
</tr>
<tr style="background-color: black;">
<td id="border" class="fontRight">First Name</td>
<td id="border"><input type="text" name="firstName" placeholder="Enter Your
First Name"></td>
</tr>
<tr style="background-color: black;">
<td id="border" class="fontRight">Last Name</td>
<td id="border"><input type="text" name="lastName" placeholder="Enter Your
Last Name"></td>
</tr>
<tr style="background-color: black;">
<td id="border" class="fontRight">Date of Birth</td>
<td id="border">
<select name="day">
<option value="" selected>Day</option>
</select>
<select name="month">
<option value="01" selected>Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="year">
<option value="" selected>Year</option>
</select>
</td>
</tr>
<tr style="background-color: black;">
<td id="border" class="fontRight">Gender</td>
<td id="border">
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
</td>
</tr>
<tr style="background-color: black;">
<td id="border" class="fontRight">Country</td>
<td id="border">
<select name="country" style="width: 70px;">
<option value="" selected>Country</option>
</select>
</td>
</tr>
<tr style="background-color: black;">
<td id="border" class="fontRight">Email</td>
<td id="border"><input type="email" name="email" placeholder="Enter
Email"></td>
</tr>
<tr style="background-color: black;">
<td id="border" class="fontRight">Phone</td>
<td id="border"><input type="phone" name="phoneNumber" placeholder="Enter
Phone"></td>
</tr>
<tr style="background-color: black;">
<td id="border" class="fontRight">Password</td>
<td id="border"><input type="password" name="pwd"></td>
</tr>
<tr style="background-color: black;">
<td id="border" class="fontRight">Confirm Password</td>
<td id="border"><input type="password" name="pwd"></td>
</tr>
<tr style="background-color: black;">
<td id="border"></td>
<td id="border"><input type="checkbox" name="agreeToTerms">I Agree to the
Terms of Use</td>
</tr>
<tr style="text-align: right; background-color: orange">
<td colspan="2">
<input type="submit" value="Submit" style="background-color: green; border:
none; width: 70px; height: 30px; color: aliceblue;">
<input type="button" value="Cancel" style="background-color: red; border:
none; width: 70px; height: 30px; color: floralwhite;">
</td>
</tr>
</table>
</form>
</body>
</html>

You might also like