Scribd
Upload
6 views

2.HTML TIME TABLE,REGISTRATION FORM

The document contains two HTML programs: a Time Table program that displays a weekly schedule with subjects and breaks, and a Registration Form program that allows users to input personal information such as name, email, password, and contact details. The Time Table features a structured layout with designated periods for each day, while the Registration Form includes validation for password strength and required fields. Both programs utilize CSS for styling and layout.

Uploaded by

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

2.HTML TIME TABLE,REGISTRATION FORM

The document contains two HTML programs: a Time Table program that displays a weekly schedule with subjects and breaks, and a Registration Form program that allows users to input personal information such as name, email, password, and contact details. The Time Table features a structured layout with designated periods for each day, while the Registration Form includes validation for password strength and required fields. Both programs utilize CSS for styling and layout.

Uploaded by

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

TIME TABLE PROGRAM

<!DOCTYPE html>
<html>

<head>
<title>Time Table</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f8f9fa;
margin: 0;
padding: 0;
}

h1 {
text-align: center;
color: #343a40;
}

table {
border-collapse: collapse;
margin: 20px auto;
background-color: #fff;
border: 2px solid #dee2e6;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

th,
td {
border: 1px solid #dee2e6;
padding: 10px;
text-align: center;
}

th {
background-color: #f2f2f2;
color: #343a40;
}

.highlight {
background-color: #f8f9fa;
}

.special {
background-color: #f0f0f0;
}
</style>
</head>

<body>
<h1>TIME TABLE</h1>
<table>
<tr>
<th>Day/Period</th>
<th>I<br>9:30-10:20</th>
<th>II<br>10:20-11:10</th>
<th>III<br>11:10-12:00</th>
<th>12:00-12:40</th>
<th>IV<br>12:40-1:30</th>
<th>V<br>1:30-2:20</th>
<th>VI<br>2:20-3:10</th>
<th>VII<br>3:10-4:00</th>
</tr>
<tr>
<td class="highlight"><b>Monday</b></td>
<td>Eng</td>
<td>Mat</td>
<td>Che</td>
<td rowspan="6" class="special"><b>LUNCH</b></td>
<td colspan="3" class="special">LAB</td>
<td>Phy</td>
</tr>
<tr>
<td class="highlight"><b>Tuesday</b></td>
<td colspan="3" class="special">LAB</td>
<td>Eng</td>
<td>Che</td>
<td>Mat</td>
<td class="special">SPORTS</td>
</tr>
<tr>
<td class="highlight"><b>Wednesday</b></td>
<td>Mat</td>
<td>Phy</td>
<td>Eng</td>
<td>Che</td>
<td colspan="3">LIBRARY</td>
</tr>
<tr>
<td class="highlight"><b>Thursday</b></td>
<td>Phy</td>
<td>Eng</td>
<td>Che</td>
<td colspan="3" class="special">LAB</td>
<td>Mat</td>
</tr>
<tr>
<td class="highlight"><b>Friday</b></td>
<td colspan="3" class="special">LAB</td>
<td>Mat</td>
<td>Che</td>
<td>Eng</td>
<td>Phy</td>
</tr>
<tr>
<td class="highlight"><b>Saturday</b></td>
<td>Eng</td>
<td>Che</td>
<td>Mat</td>
<td colspan="3">SEMINAR</td>
<td class="special">SPORTS</td>
</tr>
</table>
</body>

</html>
REGISTRATION FORM PROGRAM

!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.main {
background-color: #fff;
border-radius: 15px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
padding: 20px;
width: 300px;
}

.main h2 {
color: #4caf50;
margin-bottom: 20px;
}

label {
display: block;
margin-bottom: 5px;
color: #555;
font-weight: bold;
}

input[type="text"],
input[type="email"],
input[type="password"],
select {
width: 100%;
margin-bottom: 15px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #ddd;
border-radius: 5px;
}

button[type="submit"] {
padding: 15px;
border-radius: 10px;
border: none;
background-color: #4caf50;
color: white;
cursor: pointer;
width: 100%;
font-size: 16px;
}
</style>
</head>

<body>
<div class="main">
<h2>Registration Form</h2>
<form action="">
<label for="first">First Name:</label>
<input type="text" id="first" name="first" required />

<label for="last">Last Name:</label>


<input type="text" id="last" name="last" required />

<label for="email">Email:</label>
<input type="email" id="email" name="email" required />

<label for="password">Password:</label>
<input type="password" id="password" name="password"
pattern="^(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9])\S{8,}$"
title="Password must contain at least one number,
one alphabet, one symbol, and be at
least 8 characters long" required />

<label for="repassword">Re-type Password:</label>


<input type="password" id="repassword" name="repassword" required />

<label for="mobile">Contact:</label>
<input type="text" id="mobile" name="mobile" maxlength="10" required />

<label for="gender">Gender:</label>
<select id="gender" name="gender" required>
<option value="male">
Male
</option>
<option value="female">
Female
</option>
<option value="other">
Other
</option>
</select>

<button type="submit">
Submit
</button>
</form>
</div>
</body>

</html>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy