Scribd
Upload
4 views

Pavan

The document contains multiple HTML forms for different purposes, including user personal details, product feedback, event registration, website survey, and hotel booking. Each form includes various input types such as text fields, radio buttons, checkboxes, and text areas, along with corresponding JavaScript to handle form submissions and display data in the console. The CSS styles ensure a consistent and user-friendly layout across all forms.

Uploaded by

akashreddyvits
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
4 views

Pavan

The document contains multiple HTML forms for different purposes, including user personal details, product feedback, event registration, website survey, and hotel booking. Each form includes various input types such as text fields, radio buttons, checkboxes, and text areas, along with corresponding JavaScript to handle form submissions and display data in the console. The CSS styles ensure a consistent and user-friendly layout across all forms.

Uploaded by

akashreddyvits
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/ 15

1

Index.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>User Personal Details Form</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<form id="userForm">

<label for="name">Name:</label>

<input type="text" id="name" name="name" required><br><br>

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

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

<label>Gender:</label><br>

<input type="radio" id="male" name="gender" value="male">

<label for="male">Male</label><br>

<input type="radio" id="female" name="gender" value="female">

<label for="female">Female</label><br>

<input type="radio" id="other" name="gender" value="other">

<label for="other">Other</label><br><br>

<label>Interests:</label><br>

<input type="checkbox" id="reading" name="interests" value="reading">

<label for="reading">Reading</label><br>

<input type="checkbox" id="traveling" name="interests" value="traveling">

<label for="traveling">Traveling</label><br>
<input type="checkbox" id="sports" name="interests" value="sports">

<label for="sports">Sports</label><br><br>

<label for="bio">Short Bio:</label><br>

<textarea id="bio" name="bio" rows="4" cols="50"></textarea><br><br>

<button type="submit">Submit</button>

</form>

<script src="script.js"></script>

</body>

</html>

--------------------------------------------------------------------------------------------------------------------------------------

Styles.css

body {

font-family: Arial, sans-serif;

margin: 40px;

label {

display: block;

margin-bottom: 5px;

input, textarea {

margin-bottom: 20px;

width: 100%;

padding: 10px;

box-sizing: border-box;

input[type="radio"], input[type="checkbox"] {

width: auto;

}
button {

padding: 10px 20px;

background-color: #007BFF;

color: white;

border: none;

cursor: pointer;

button:hover {

background-color: #0056b3;

--------------------------------------------------------------------------------------------------------------------------------------

Script.js

--------------------------------------------------------------------------------------------------------------------------------------

document.getElementById('userForm').addEventListener('submit', function(event) {

event.preventDefault();

const formData = new FormData(event.target);

const data = Object.fromEntries(formData.entries());

data.interests = formData.getAll('interests');

console.log(data);

alert('Form submitted! Check the console for the data.');

});
2

Index.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Product Feedback Form</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<form id="feedbackForm">

<label for="productName">Product Name:</label>

<input type="text" id="productName" name="productName" required><br><br>

<label>Rating:</label><br>

<input type="radio" id="star1" name="rating" value="1">

<label for="star1">1 Star</label><br>

<input type="radio" id="star2" name="rating" value="2">

<label for="star2">2 Stars</label><br>

<input type="radio" id="star3" name="rating" value="3">

<label for="star3">3 Stars</label><br>

<input type="radio" id="star4" name="rating" value="4">

<label for="star4">4 Stars</label><br>

<input type="radio" id="star5" name="rating" value="5">

<label for="star5">5 Stars</label><br><br>

<label for="feedback">Feedback:</label><br>

<textarea id="feedback" name="feedback" rows="4" cols="50"></textarea><br><br>

<label for="subscribe">
<input type="checkbox" id="subscribe" name="subscribe">

Subscribe to newsletter

</label><br><br>

<button type="submit">Submit</button>

</form>

<script src="script.js"></script>

</body>

</html>

Styles.css

body {

font-family: Arial, sans-serif;

margin: 40px;

label {

display: block;

margin-bottom: 5px;

input, textarea {

margin-bottom: 20px;

width: 100%;

padding: 10px;

box-sizing: border-box;

input[type="radio"], input[type="checkbox"] {

width: auto;

button {

padding: 10px 20px;

background-color: #007BFF;

color: white;
border: none;

cursor: pointer;

button:hover {

background-color: #0056b3;

script.js

document.getElementById('feedbackForm').addEventListener('submit', function(event) {

event.preventDefault();

const formData = new FormData(event.target);

const data = Object.fromEntries(formData.entries());

data.subscribe = formData.get('subscribe') ? true : false;

console.log(data);

alert('Feedback submitted! Check the console for the data.');

});
3

index.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Event Registration Form</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<form id="registrationForm">

<label for="fullName">Full Name:</label>

<input type="text" id="fullName" name="fullName" required><br><br>

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

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

<label>Select your event session:</label><br>

<input type="radio" id="session1" name="session" value="session1">

<label for="session1">Session 1</label><br>

<input type="radio" id="session2" name="session" value="session2">

<label for="session2">Session 2</label><br>

<input type="radio" id="session3" name="session" value="session3">

<label for="session3">Session 3</label><br><br>

<label>Choose your interests:</label><br>

<input type="checkbox" id="networking" name="interests" value="networking">

<label for="networking">Networking</label><br>

<input type="checkbox" id="workshops" name="interests" value="workshops">

<label for="workshops">Workshops</label><br>
<input type="checkbox" id="keynotes" name="interests" value="keynotes">

<label for="keynotes">Keynotes</label><br><br>

<label for="comments">Additional notes or comments:</label><br>

<textarea id="comments" name="comments" rows="4" cols="50"></textarea><br><br>

<button type="submit">Submit</button>

</form>

<script src="script.js"></script>

</body>

</html>

Styles.css

body {

font-family: Arial, sans-serif;

margin: 40px;

label {

display: block;

margin-bottom: 5px;

input, textarea {

margin-bottom: 20px;

width: 100%;

padding: 10px;

box-sizing: border-box;

input[type="radio"], input[type="checkbox"] {

width: auto;

button {

padding: 10px 20px;


background-color: #007BFF;

color: white;

border: none;

cursor: pointer;

button:hover {

background-color: #0056b3;

Script.js

document.getElementById('registrationForm').addEventListener('submit', function(event) {

event.preventDefault();

const formData = new FormData(event.target);

const data = Object.fromEntries(formData.entries());

data.interests = formData.getAll('interests');

console.log(data);

alert('Registration submitted! Check the console for the data.');

});
4

Index.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Website Survey Form</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<form id="surveyForm">

<label for="websiteUrl">Website URL:</label>

<input type="url" id="websiteUrl" name="websiteUrl" required><br><br>

<label>Rate the usability:</label><br>

<input type="radio" id="excellent" name="usability" value="excellent">

<label for="excellent">Excellent</label><br>

<input type="radio" id="good" name="usability" value="good">

<label for="good">Good</label><br>

<input type="radio" id="fair" name="usability" value="fair">

<label for="fair">Fair</label><br>

<input type="radio" id="poor" name="usability" value="poor">

<label for="poor">Poor</label><br><br>

<label for="suggestions">Suggestions for improvement:</label><br>

<textarea id="suggestions" name="suggestions" rows="4" cols="50"></textarea><br><br>

<label for="terms">

<input type="checkbox" id="terms" name="terms" required>

I agree to the terms and conditions


</label><br><br>

<button type="submit">Submit</button>

</form>

<script src="script.js"></script>

</body>

</html>

Styles.css

body {

font-family: Arial, sans-serif;

margin: 40px;

label {

display: block;

margin-bottom: 5px;

input, textarea {

margin-bottom: 20px;

width: 100%;

padding: 10px;

box-sizing: border-box;

input[type="radio"], input[type="checkbox"] {

width: auto;

button {

padding: 10px 20px;

background-color: #007BFF;

color: white;

border: none;

cursor: pointer;
}

button:hover {

background-color: #0056b3;

Script.js

document.getElementById('surveyForm').addEventListener('submit', function(event) {

event.preventDefault();

const formData = new FormData(event.target);

const data = Object.fromEntries(formData.entries());

data.usability = formData.get('usability');

data.terms = formData.get('terms') ? true : false;

console.log(data);

alert('Survey submitted! Check the console for the data.');

});
5

Index.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Hotel Booking Form</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<form id="bookingForm">

<label for="fullName">Full Name:</label>

<input type="text" id="fullName" name="fullName" required><br><br>

<label for="checkin">Check-in Date:</label>

<input type="date" id="checkin" name="checkin" required><br><br>

<label for="checkout">Check-out Date:</label>

<input type="date" id="checkout" name="checkout" required><br><br>

<label>Room Type:</label><br>

<input type="radio" id="single" name="roomType" value="single">

<label for="single">Single</label><br>

<input type="radio" id="double" name="roomType" value="double">

<label for="double">Double</label><br>

<input type="radio" id="suite" name="roomType" value="suite">

<label for="suite">Suite</label><br><br>

<label>Add Extras:</label><br>

<input type="checkbox" id="breakfast" name="extras" value="breakfast">


<label for="breakfast">Breakfast</label><br>

<input type="checkbox" id="gym" name="extras" value="gym">

<label for="gym">Gym Access</label><br>

<input type="checkbox" id="airport" name="extras" value="airport">

<label for="airport">Airport Pickup</label><br><br>

<label for="requests">Additional Requests:</label><br>

<textarea id="requests" name="requests" rows="4" cols="50"></textarea><br><br>

<button type="submit">Submit</button>

</form>

<script src="script.js"></script>

</body>

</html>

Styles.css

body {

font-family: Arial, sans-serif;

margin: 40px;

label {

display: block;

margin-bottom: 5px;

input, textarea {

margin-bottom: 20px;

width: 100%;

padding: 10px;

box-sizing: border-box;

input[type="radio"], input[type="checkbox"] {

width: auto;
}

button {

padding: 10px 20px;

background-color: #007BFF;

color: white;

border: none;

cursor: pointer;

button:hover {

background-color: #0056b3;

Script.js

document.getElementById('bookingForm').addEventListener('submit', function(event) {

event.preventDefault();

const formData = new FormData(event.target);

const data = Object.fromEntries(formData.entries());

data.extras = formData.getAll('extras');

console.log(data);

alert('Booking submitted! Check the console for the data.');

});

You might also like