[go: up one dir, main page]
Scribd
Upload
10 views3 pages

Program 1

This document contains HTML code for a simple event registration form. It includes fields for full name, email address, and phone number, along with a submit button. A JavaScript function handles form submission and displays a success message without actually submitting the form.

Uploaded by

Madupathi Harshini
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

Program 1

This document contains HTML code for a simple event registration form. It includes fields for full name, email address, and phone number, along with a submit button. A JavaScript function handles form submission and displays a success message without actually submitting the form.

Uploaded by

Madupathi Harshini
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

Program 1

Write code for a simple user registration form for an event.

<!DOCTYPE html>
<html>
<head>
<title>Event Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #eef2f3;
padding: 30px;
}
.form-container {
background-color: white;
max-width: 400px;
margin: auto;
padding: 20px 30px;
border-radius: 10px;
box-shadow: 0 0 10px gray;
}
h2 {
text-align: center;
color: #333;
}
label {
display: block;
margin-top: 10px;
font-weight: bold;
}
input[type="text"],
input[type="email"],
input[type="tel"] {
width: 100%;
padding: 8px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
margin-top: 20px;
width: 100%;
padding: 10px;
background-color: #28a745;
color: white;
border: none;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
.message {
text-align: center;
margin-top: 20px;
color: green;
}
</style>
</head>
<body>

<div class="form-container">
<h2>Event Registration</h2>
<form id="registrationForm" onsubmit="return registerUser();">
<label for="name">Full Name:</label>
<input type="text" id="name" required>

<label for="email">Email Address:</label>


<input type="email" id="email" required>

<label for="phone">Phone Number:</label>


<input type="tel" id="phone" required>

<button type="submit">Register</button>
</form>
<div class="message" id="successMessage"></div>
</div>

<script>
function registerUser() {
const name = document.getElementById("name").value;
const email = document.getElementById("email").value;
const phone = document.getElementById("phone").value;

// You could add more validation here

document.getElementById("successMessage").innerText =
`Thank you, ${name}! Your registration is successful.`;

// Optional: Reset the form


document.getElementById("registrationForm").reset();

return false; // Prevent actual form submission


}
</script>
</body>
</html>

You might also like