HTML Form Examples with Source Code for Students
Login Form UI
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
/* Background with gradient */
background: linear-gradient(to right, #6a11cb, #2575fc);
}
.login-box {
width: 300px;
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 5px 15px rgba(0,0,0,0.3);
margin: 100px auto;
text-align: center;
}
.login-box h2 {
margin-bottom: 20px;
color: #333;
}
.login-box input {
width: 90%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
transition: 0.3s;
}
/* Hover effect for input */
.login-box input:hover {
border-color: #2575fc;
box-shadow: 0px 0px 5px #2575fc;
}
.login-box button {
width: 95%;
padding: 10px;
border: none;
border-radius: 5px;
background: #2575fc;
color: white;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
}
/* Hover effect for button */
.login-box button:hover {
background: #6a11cb;
box-shadow: 0px 5px 15px rgba(0,0,0,0.4);
}
</style>
</head>
<body>
<div class="login-box">
<h2>Login</h2>
<form>
<input type="text" placeholder="Username" required><br>
<input type="password" placeholder="Password" required><br>
<button type="submit">Login</button>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
/* Gradient background */
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
}
.login-box {
background: #fff;
padding: 25px;
border-radius: 12px;
box-shadow: 0px 6px 18px rgba(0,0,0,0.3);
width: 350px;
transition: 0.3s;
}
/* Hover effect on whole box */
.login-box:hover {
transform: translateY(-5px);
box-shadow: 0px 12px 28px rgba(0,0,0,0.4);
}
.login-box h2 {
text-align: center;
margin-bottom: 20px;
color: #333;
}
table {
width: 100%;
}
td {
padding: 8px;
}
input {
width: 95%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 6px;
transition: 0.3s;
}
/* Hover effect for input */
input:hover {
border-color: #ff6a88;
box-shadow: 0px 0px 6px #ff6a88;
}
button {
width: 100%;
padding: 12px;
border: none;
border-radius: 6px;
background: linear-gradient(to right, #ff6a88, #ff99ac);
color: white;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
transition: 0.3s;
}
button:hover {
background: linear-gradient(to right, #ff99ac, #ff6a88);
box-shadow: 0px 6px 16px rgba(0,0,0,0.3);
}
.extra {
text-align: center;
margin-top: 12px;
font-size: 14px;
}
.extra a {
color: #ff6a88;
text-decoration: none;
}
.extra a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="login-box">
<h2>Login</h2>
<form>
<table>
<tr>
<td><label for="user">Username:</label></td>
</tr>
<tr>
<td><input type="text" id="user" placeholder="Enter Username" required></td>
</tr>
<tr>
<td><label for="pass">Password:</label></td>
</tr>
<tr>
<td><input type="password" id="pass" placeholder="Enter Password" required></td>
</tr>
<tr>
<td><button type="submit">Login</button></td>
</tr>
</table>
</form>
<div class="extra">
<p>Forgot password? <a href="#">Click here</a></p>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>Signup Form</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background: linear-gradient(120deg, #74ebd5, #ACB6E5);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.signup-box {
background: #fff;
padding: 25px;
border-radius: 12px;
box-shadow: 0px 6px 18px rgba(0,0,0,0.3);
width: 400px;
}
.signup-box h2 {
text-align: center;
margin-bottom: 20px;
color: #1877f2;
}
.row {
display: flex;
gap: 10px;
margin-bottom: 12px;
}
.row input {
flex: 1;
padding: 10px;
border: 1px solid #ccc;
border-radius: 6px;
transition: 0.3s;
}
input, select {
width: 100%;
padding: 10px;
margin-bottom: 12px;
border: 1px solid #ccc;
border-radius: 6px;
transition: 0.3s;
}
input:hover, select:hover {
border-color: #1877f2;
box-shadow: 0px 0px 6px #1877f2;
}
label {
font-size: 14px;
color: #333;
display: block;
margin-bottom: 6px;
}
.gender-options {
display: flex;
gap: 15px;
margin-bottom: 15px;
}
.gender-options label {
display: flex;
align-items: center;
gap: 5px;
}
button {
width: 100%;
padding: 12px;
border: none;
border-radius: 6px;
background: #42b72a;
color: white;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
}
button:hover {
background: #36a420;
box-shadow: 0px 6px 16px rgba(0,0,0,0.3);
}
.info {
font-size: 12px;
color: #555;
margin-top: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="signup-box">
<h2>Create a New Account</h2>
<form>
<div class="row">
<input type="text" placeholder="First name" required>
<input type="text" placeholder="Last name" required>
</div>
<input type="email" placeholder="Mobile number or email" required>
<input type="password" placeholder="New password" required>
<label>Date of birth</label>
<div class="row">
<select required>
<option>Day</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select required>
<option>Month</option>
<option>Jan</option>
<option>Feb</option>
<option>Mar</option>
</select>
<select required>
<option>Year</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>
</div>
<label>Gender</label>
<div class="gender-options">
<label><input type="radio" name="gender" required> Female</label>
<label><input type="radio" name="gender"> Male</label>
<label><input type="radio" name="gender"> Custom</label>
</div>
<button type="submit">Sign Up</button>
</form>
<div class="info">
By clicking Sign Up, you agree to our Terms and Privacy Policy.
</div>
</div>
</body>
</html>Contact Form
<!DOCTYPE html>
<html>
<head>
<title>Contact Us Form</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #00c6ff, #0072ff);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.contact-box {
background: #fff;
padding: 25px;
width: 400px;
border-radius: 12px;
box-shadow: 0px 6px 18px rgba(0,0,0,0.3);
transition: 0.3s;
}
/* Hover effect on whole box */
.contact-box:hover {
transform: translateY(-5px);
box-shadow: 0px 12px 28px rgba(0,0,0,0.4);
}
.contact-box h2 {
text-align: center;
margin-bottom: 20px;
color: #0072ff;
}
label {
font-size: 14px;
color: #333;
display: block;
margin-bottom: 6px;
}
input, textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 14px;
transition: 0.3s;
}
/* Hover effect for input & textarea */
input:hover, textarea:hover {
border-color: #0072ff;
box-shadow: 0px 0px 6px #0072ff;
}
textarea {
resize: none;
height: 100px;
}
button {
width: 100%;
padding: 12px;
border: none;
border-radius: 6px;
background: linear-gradient(to right, #00c6ff, #0072ff);
color: white;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
}
button:hover {
background: linear-gradient(to right, #0072ff, #00c6ff);
box-shadow: 0px 6px 16px rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<div class="contact-box">
<h2>Contact Us</h2>
<form>
<label for="name">Full Name</label>
<input type="text" id="name" placeholder="Enter your name" required>
<label for="email">Email Address</label>
<input type="email" id="email" placeholder="Enter your email" required>
<label for="subject">Subject</label>
<input type="text" id="subject" placeholder="Enter subject" required>
<label for="message">Message</label>
<textarea id="message" placeholder="Write your message..." required></textarea>
<button type="submit">Send Message</button>
</form>
</div>
</body>
</html>Feedback Form
<!DOCTYPE html>
<html>
<head>
<title>Feedback Form</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.feedback-box {
background: #fff;
padding: 25px;
width: 420px;
border-radius: 12px;
box-shadow: 0px 6px 18px rgba(0,0,0,0.3);
transition: 0.3s;
}
.feedback-box:hover {
transform: translateY(-5px);
box-shadow: 0px 12px 28px rgba(0,0,0,0.4);
}
.feedback-box h2 {
text-align: center;
margin-bottom: 20px;
color: #ff4b5c;
}
label {
font-size: 14px;
color: #333;
display: block;
margin: 10px 0 6px;
}
input[type="text"], input[type="email"], textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 14px;
transition: 0.3s;
}
input:hover, textarea:hover {
border-color: #ff4b5c;
box-shadow: 0px 0px 6px #ff4b5c;
}
textarea {
resize: none;
height: 80px;
}
.options {
margin: 8px 0;
}
button {
width: 100%;
padding: 12px;
border: none;
border-radius: 6px;
background: linear-gradient(to right, #ff4b5c, #ff6a88);
color: white;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
}
button:hover {
background: linear-gradient(to right, #ff6a88, #ff4b5c);
box-shadow: 0px 6px 16px rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<div class="feedback-box">
<h2>Feedback Form</h2>
<form>
<label for="name">Full Name</label>
<input type="text" id="name" placeholder="Enter your name" required>
<label for="email">Email Address</label>
<input type="email" id="email" placeholder="Enter your email" required>
<label>How do you rate our service?</label>
<div class="options">
<input type="radio" name="rating" value="excellent"> Excellent <br>
<input type="radio" name="rating" value="good"> Good <br>
<input type="radio" name="rating" value="average"> Average <br>
<input type="radio" name="rating" value="poor"> Poor
</div>
<label>Which features do you like? (Select all that apply)</label>
<div class="options">
<input type="checkbox" name="features" value="design"> Design <br>
<input type="checkbox" name="features" value="usability"> Usability <br>
<input type="checkbox" name="features" value="performance"> Performance <br>
<input type="checkbox" name="features" value="support"> Support
</div>
<label for="suggestions">Any Suggestions?</label>
<textarea id="suggestions" placeholder="Write here..."></textarea>
<button type="submit">Submit Feedback</button>
</form>
</div>
</body>
</html>
Student Admission Form
<!DOCTYPE html>
<html>
<head>
<title>Feedback Form</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.feedback-box {
background: #fff;
padding: 25px;
width: 420px;
border-radius: 12px;
box-shadow: 0px 6px 18px rgba(0,0,0,0.3);
transition: 0.3s;
}
.feedback-box:hover {
transform: translateY(-5px);
box-shadow: 0px 12px 28px rgba(0,0,0,0.4);
}
.feedback-box h2 {
text-align: center;
margin-bottom: 20px;
color: #ff4b5c;
}
label {
font-size: 14px;
color: #333;
display: block;
margin: 10px 0 6px;
}
input[type="text"], input[type="email"], textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 14px;
transition: 0.3s;
}
input:hover, textarea:hover {
border-color: #ff4b5c;
box-shadow: 0px 0px 6px #ff4b5c;
}
textarea {
resize: none;
height: 80px;
}
.options {
margin: 8px 0;
}
button {
width: 100%;
padding: 12px;
border: none;
border-radius: 6px;
background: linear-gradient(to right, #ff4b5c, #ff6a88);
color: white;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
}
button:hover {
background: linear-gradient(to right, #ff6a88, #ff4b5c);
box-shadow: 0px 6px 16px rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<div class="feedback-box">
<h2>Feedback Form</h2>
<form>
<label for="name">Full Name</label>
<input type="text" id="name" placeholder="Enter your name" required>
<label for="email">Email Address</label>
<input type="email" id="email" placeholder="Enter your email" required>
<label>How do you rate our service?</label>
<div class="options">
<input type="radio" name="rating" value="excellent"> Excellent <br>
<input type="radio" name="rating" value="good"> Good <br>
<input type="radio" name="rating" value="average"> Average <br>
<input type="radio" name="rating" value="poor"> Poor
</div>
<label>Which features do you like? (Select all that apply)</label>
<div class="options">
<input type="checkbox" name="features" value="design"> Design <br>
<input type="checkbox" name="features" value="usability"> Usability <br>
<input type="checkbox" name="features" value="performance"> Performance <br>
<input type="checkbox" name="features" value="support"> Support
</div>
<label for="suggestions">Any Suggestions?</label>
<textarea id="suggestions" placeholder="Write here..."></textarea>
<button type="submit">Submit Feedback</button>
</form>
</div>
</body>
</html>
Library Membership
<!DOCTYPE html>
<html>
<head>
<title>Library Membership Form</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #89f7fe, #66a6ff);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.library-box {
background: #fff;
width: 400px; /* smaller width */
border-radius: 12px;
overflow: hidden;
box-shadow: 0px 8px 22px rgba(0,0,0,0.3);
transition: 0.3s;
}
.library-box:hover {
transform: translateY(-5px);
box-shadow: 0px 12px 28px rgba(0,0,0,0.4);
}
.header {
background: linear-gradient(to right, #4facfe, #00f2fe);
padding: 12px;
text-align: center;
color: white;
font-size: 18px;
font-weight: bold;
}
.form-body {
padding: 18px;
}
label {
font-size: 13px;
color: #333;
display: block;
margin: 8px 0 4px;
}
input[type="text"], input[type="email"], input[type="tel"], textarea {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #bbb;
border-radius: 6px;
font-size: 13px;
transition: 0.3s;
}
input:hover, textarea:hover {
border-color: #0072ff;
box-shadow: 0px 0px 6px #0072ff;
}
textarea {
resize: none;
height: 50px; /* smaller textarea */
}
.options {
margin: 5px 0 10px;
font-size: 13px;
}
.options input {
margin-right: 4px;
}
button {
width: 100%;
padding: 10px;
border: none;
border-radius: 6px;
background: linear-gradient(to right, #00c6ff, #0072ff);
color: white;
font-size: 15px;
cursor: pointer;
transition: 0.3s;
}
button:hover {
background: linear-gradient(to right, #0072ff, #00c6ff);
box-shadow: 0px 6px 16px rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<div class="library-box">
<div class="header">Library Membership</div>
<div class="form-body">
<form>
<label for="id">Membership ID</label>
<input type="text" id="id" placeholder="Enter ID" required>
<label for="name">Full Name</label>
<input type="text" id="name" placeholder="Enter name" required>
<label for="email">Email</label>
<input type="email" id="email" placeholder="Enter email" required>
<label for="phone">Phone</label>
<input type="tel" id="phone" placeholder="Enter phone" required>
<label>Book Preferences</label>
<div class="options">
<input type="checkbox"> Fiction
<input type="checkbox"> Science
<input type="checkbox"> History
<input type="checkbox"> Comics
</div>
<button type="submit">Apply</button>
</form>
</div>
</div>
</body>
</html>