Copy full html code from here and save it index.html file and double click and run.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Material Style Form</title>
<style>
body {
margin: 0;
height: 100vh;
background: linear-gradient(135deg, #667eea, #764ba2);
display: flex;
justify-content: center;
align-items: center;
font-family: "Segoe UI", Roboto, Arial, sans-serif;
}
.card {
background: #fff;
width: 380px;
padding: 30px;
border-radius: 12px;
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}
.title {
font-size: 22px;
font-weight: 600;
margin-bottom: 20px;
color: #333;
}
.field {
position: relative;
margin-bottom: 25px;
}
.field input {
width: 100%;
border: none;
border-bottom: 2px solid #ccc;
padding: 10px 0;
font-size: 16px;
outline: none;
}
.field label {
position: absolute;
top: 10px;
left: 0;
color: #999;
font-size: 14px;
transition: 0.3s ease;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label {
top: -10px;
font-size: 12px;
color: #667eea;
}
.error {
color: red;
font-weight: bold;
font-size: 13px;
display: none;
margin-top: 8px;
}
.radio-section {
display: none;
margin-top: 20px;
}
.radio-section label {
display: block;
margin: 8px 0;
font-weight: 500;
cursor: pointer;
}
.radio-msg {
color: red;
font-weight: bold;
margin-top: 10px;
display: none;
}
button {
margin-top: 25px;
width: 100%;
padding: 12px;
border: none;
background: #667eea;
color: #fff;
font-size: 16px;
border-radius: 25px;
cursor: pointer;
}
.success {
margin-top: 20px;
color: green;
font-weight: bold;
text-align: center;
display: none;
}
</style>
</head>
<body>
<div class="card">
<div class="title">Signup</div>
<div class="success" id="success">
You are safe now, you will see this form next year
</div>
<form id="form">
<div class="field">
<input type="text" placeholder=" ">
<label>Name</label>
</div>
<div class="field">
<input type="email" id="email" autocomplete="off" placeholder=" ">
<label>Email</label>
<div class="error" id="emailError">
Kal aap boss ki ladki ke saath ghoom rahe the.<br>
Neeche kuch choices hain, jo theek lage woh select kar lo.<br>
Phir main decide karunga ki yeh baat boss tak jaayegi ya nahi.
</div>
</div>
<div class="radio-section" id="radioSection">
<strong>I will increase your package by</strong>
<label>
<input type="radio" name="amount" value="100000"> 100000
</label>
<label>
<input type="radio" name="amount" value="200000"> 200000
</label>
<label>
<input type="radio" name="amount" value="500000"> 500000
</label>
<div class="radio-msg" id="radioMsg"></div>
</div>
<button type="submit">Submit</button>
</form>
</div>
<script>
const email = document.getElementById("email");
const emailError = document.getElementById("emailError");
const radioSection = document.getElementById("radioSection");
const radioMsg = document.getElementById("radioMsg");
const radios = document.querySelectorAll('input[name="amount"]');
const form = document.getElementById("form");
const success = document.getElementById("success");
email.addEventListener("focus", () => {
emailError.style.display = "block";
radioSection.style.display = "block";
});
radios.forEach(radio => {
radio.addEventListener("change", () => {
radioMsg.style.display = "block";
if (radio.value === "100000") {
radioMsg.textContent = "kam hai thoda bdhao";
} else if (radio.value === "200000") {
radioMsg.textContent = "aapko lgta hai itne mai maan jauga";
} else if (radio.value === "500000") {
radioMsg.textContent = "abhi ke liye thik hai";
}
});
});
form.addEventListener("submit", (e) => {
e.preventDefault();
success.style.display = "block";
});
</script>
</body>
</html>
