Scribd
Upload
32 views10 pages

Assignment 3

The document contains a student registration form coded in HTML, including fields for personal information, college selection, and payment details. It also includes CSS styles for the form and a separate HTML file showcasing upcoming events at the Coimbatore Institute of Technology. The form is designed to be user-friendly with validation patterns and a responsive layout.

Uploaded by

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

Assignment 3

The document contains a student registration form coded in HTML, including fields for personal information, college selection, and payment details. It also includes CSS styles for the form and a separate HTML file showcasing upcoming events at the Coimbatore Institute of Technology. The form is designed to be user-friendly with validation patterns and a responsive layout.

Uploaded by

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

Roll no : 2303717620521003 Date:31-01-2025

Name:Ajay A

ASSIGNMENT 3

Source Code:
Index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Registration Form</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
integrity="sha384-1ZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9s+oqd12jhcu+A56Ebc1zFSJ"
crossorigin="anonymous">
<script src="./script.js" type="text/javascript"></script>
</head>
<body>
<div class="wrapper">
<div class="title">Student Registration Form
</div>
<form action="POST" data-netlify="true">
<div class="form">
<div class="inputfield">
<label >Name</label>
<input type="text" class="input" id="name" name="fname" placeholder="Enter your name"
maxlength="30"
pattern="[A-Za-z]{1,32}" title="Enter only alphabets" required>
</div>
<div class="inputfield">
<label>Email Address</label>
<input type="email" class="input" name="email" placeholder="Enter your email"
Roll no : 2303717620521003 Date:31-01-2025
Name:Ajay A

pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,63}$" required>
</div>
<div class="inputfield">
<label for="">Year of study</label>
<input type="text" class="input" name="age" placeholder="Enter your year" maxlength="2"
pattern="^[0-9]{2}$"
required placeholder="Enter your age" title="Enter numbers only">
</div>
<div class="inputfield">
<label>Enter your College</label>
<div class="custom_select">
<select id="state" name="state" required>
<option value="">--Select your college--</option>
<option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
<option value="Andhra Pradesh">Andhra Pradesh</option>
<option value="Arunachal Pradesh">Arunachal Pradesh</option>
<option value="Assam">Assam</option>
<option value="Bihar">Bihar</option>
<option value="Chandigarh">Chandigarh</option>
<option value="Chhattisgarh">Chhattisgarh</option>
<option value="Dadra and Nagar Haveli">Dadra and Nagar Haveli</option>
<option value="Daman and Diu">Daman and Diu</option>
<option value="Delhi">Delhi</option>
<option value="Goa">Goa</option>
<option value="Gujarat">Gujarat</option>
<option value="Haryana">Haryana</option>
<option value="Himachal Pradesh">Himachal Pradesh</option>
<option value="Jammu and Kashmir">Jammu and Kashmir</option>
<option value="Jharkhand">Jharkhand</option>
<option value="Karnataka">Karnataka</option>
<option value="Kerala">Kerala</option>
<option value="Ladakh">Ladakh</option>
<option value="Lakshadweep">Lakshadweep</option>
Roll no : 2303717620521003 Date:31-01-2025
Name:Ajay A

<option value="Madhya Pradesh">Madhya Pradesh</option>


<option value="Maharashtra">Maharashtra</option>
<option value="Manipur">Manipur</option>
<option value="Meghalaya">Meghalaya</option>
<option value="Mizoram">Mizoram</option>
<option value="Nagaland">Nagaland</option>
<option value="Odisha">Odisha</option>
<option value="Puducherry">Puducherry</option>
<option value="Punjab">Punjab</option>
<option value="Rajasthan">Rajasthan</option>
<option value="Sikkim">Sikkim</option>
<option value="Tamil Nadu">Tamil Nadu</option>
<option value="Telangana">Telangana</option>
<option value="Tripura">Tripura</option>
<option value="Uttar Pradesh">Uttar Pradesh</option>
<option value="Uttarakhand">Uttarakhand</option>
<option value="West Bengal">West Bengal</option>
</select>
</div>
</div>
<div class="inputfield">
<label>Roll no</label>
<input type="text" class="input" id="rollno" name="" placeholder="Enter your roll no"
required>
</div>
<div class="inputfield">
<label>Attach Student ID</label><p id="file-size">*Max size 100kb.</p>
<input type="file" name="myfile" id="myfile" placeholder="Upload your photo" rows="7"
required />
</div>
<div class="inputfield">
<label>Department</label>
<input type="text" onkeyup='check()' class="input" id="rollno" name=""
Roll no : 2303717620521003 Date:31-01-2025
Name:Ajay A

placeholder="Enter your Department" required>


</div>
<p id="message"></p>
<div class="inputfield">
<label for="">Phone Number(WP)</label>
<div class="custom-select" id="phone-codes">
<select id="phone-code">
<option value="+91">+91</option>
</select>
</div>
<input type="tel" class="input" name="phone-number" maxlength="10" id="phone-number"
placeholder="Enter your phone number" pattern="[7-9]{1}[0-9]{9}" title="Please enter valid phone
number">
</div>
<div class="inputfield">
<label>UPI Transaction ID</label>
<input type="text" class="input" id="rollno" name="" placeholder="Enter your ID" required>
</div>
<div class="inputfield">
<label for="">Date of Payment</label>
<input type="date" class="input" name="dob" required>
</div>
<div class="inputfield">
<label>Payment photo</label><p id="file-size">*Max size 100kb.</p>
<input type="file" name="myfile" id="myfile" placeholder="Upload your photo" rows="7"
required />

</div>
<div class="inputfield terms">
<label class="check">
<input type="checkbox" name="check" value="Declared" required>
<span class="checkmark"></span>
</label>
Roll no : 2303717620521003 Date:31-01-2025
Name:Ajay A

<p>I hereby declare that the above information provided is true and correct.</p>
</div>
<div class="inputfield" required>
<div data-netlify-recaptcha="true"></div>
</div>
<div class="inputfield btns" id="btn">
<button type="submit" value="Register" class="btn"
onclick="checkPassword()">Register</button>
<button type="reset" value="Reset" class="btn">Reset</button>
</div>
</div>
</form>
</div>
</body>
</html>

Styles.css:
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 50px auto;
background: white;
padding: 20px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
h1 {
Roll no : 2303717620521003 Date:31-01-2025
Name:Ajay A

color: #333;
}
.events {
display: flex;
flex-direction: column;
gap: 20px;
}
.event {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.event img {
width: 100%;
height: auto;
border-radius: 8px;
}
.event h2 {
color: #444;
}
.event p {
color: #666;
}
.event a {
display: inline-block;
margin-top: 10px;
padding: 10px 15px;
background: #007bff;
color: white;
text-decoration: none;
border-radius: 5px;
Roll no : 2303717620521003 Date:31-01-2025
Name:Ajay A

}
.event a:hover {
background: #0056b3;
}
.photo{
width: 20px;
}
.events{
display: flex;
}
Index1.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Events</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Coimbatore Institute of Technology</h1>
<h3>Upcoming Events</h3>
<div class="events">
<div class="event">
<img src="event1.jpg" alt="Event 1" class="photo">
<h2>Event 1: Tech Conference</h2>
<p>Join us for an exciting event about technology!</p>
<a href="index.html">Register Now</a>
</div>
<div class="event">
<img src="event2.webp" alt="Event 2" class="photo">
Roll no : 2303717620521003 Date:31-01-2025
Name:Ajay A

<h2>Event 2: AI Summit</h2>
<p>Explore the future of AI and innovation.</p>
<a href="index.html">Register Now</a>
</div>
<div class="event">
<img src="event3.avif" alt="Event 3" class="photo">
<h2>Event 3: Business Networking</h2>
<p>A networking event for professionals and learners.</p>
<a href="index.html">Register Now</a>
</div>
</div>
</div>
</body>
</html>

Styles.css:
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 50px auto;
background: white;
padding: 20px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
h1 {
Roll no : 2303717620521003 Date:31-01-2025
Name:Ajay A

color: #333;
}
.events {
display: flex;
flex-direction: column;
gap: 20px;
}
.event {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.event img {
width: 100%;
height: auto;
border-radius: 8px;
}
.event h2 {
color: #444;
}
.event p {
color: #666;
}
.event a {
display: inline-block;
margin-top: 10px;
padding: 10px 15px;
background: #007bff;
color: white;
text-decoration: none;
border-radius: 5px;
Roll no : 2303717620521003 Date:31-01-2025
Name:Ajay A

}
.event a:hover {
background: #0056b3;
}
.photo{
width: 20px;
}
.events{
display: flex;
}
Output:

You might also like