Here’s a solution for your request with HTML, CSS, JavaScript, and Python. This implementation includes a form with validation on the client side (using JavaScript) and displays the data on a second page using Python's Flask framework.
Directory Structure
project/│├── templates/│ ├── form1.html│ └── form2.html├── static/│ ├── style.css├── app.py
form1.html
The first page with the form and client-side validation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Page</title>
<link rel="stylesheet" href="/static/style.css">
<script defer src="/static/validation.js"></script>
</head>
<body>
<div class="container">
<h1>Fill Out the Form</h1>
<form id="userForm" action="/submit" method="POST" enctype="multipart/form-data">
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="first_name" required>
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" name="last_name" required>
<label for="mi">Middle Initial:</label>
<input type="text" id="mi" name="mi" maxlength="1">
<label for="gender">Gender:</label>
<select id="gender" name="gender" required>
<option value="">Select</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
<label for="city">City:</label>
<input type="text" id="city" name="city" required>
<label for="state">State:</label>
<input type="text" id="state" name="state" required>
<label for="zip">Zip Code:</label>
<input type="text" id="zip" name="zip" pattern="\d{5}" required>
<label for="address">Address:</label>
<textarea id="address" name="address" required></textarea>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="picture">Upload Picture:</label>
<input type="file" id="picture" name="picture" accept="image/*" required>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
validation.js
JavaScript for client-side validation.
document.getElementById("userForm").addEventListener("submit", function (event) {
const firstName = document.getElementById("firstName").value.trim();
const lastName = document.getElementById("lastName").value.trim();
const email = document.getElementById("email").value.trim();
const zip = document.getElementById("zip").value.trim();
if (firstName === "" || lastName === "" || email === "" || !/^\d{5}$/.test(zip)) {
alert("Please fill out all fields correctly.");
event.preventDefault();
}
});
style.css
CSS for styling the form.
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f9;
}
.container {
width: 50%;
margin: 50px auto;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
form label {
display: block;
margin: 10px 0 5px;
font-weight: bold;
}
form input, form textarea, form select, form button {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
}
form button {
background-color: #5cb85c;
color: #fff;
border: none;
cursor: pointer;
font-size: 16px;
}
form button:hover {
background-color: #4cae4c;
}
App.Py
Flask backend to handle form submission and display data on the second page.
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route("/")
def form():
return render_template("form1.html")
@app.route("/submit", methods=["POST"])
def submit():
data = request.form
picture = request.files["picture"]
picture.save("static/" + picture.filename)
return render_template("form2.html", data=data, picture=picture.filename)
if __name__ == "__main__":
app.run(debug=True)
Form-2.HTML
The second page that displays the submitted data.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Submitted Data</title>
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
<div class="container">
<h1>Submitted Information</h1>
<p><strong>First Name:</strong> {{ data["first_name"] }}</p>
<p><strong>Last Name:</strong> {{ data["last_name"] }}</p>
<p><strong>Middle Initial:</strong> {{ data["mi"] }}</p>
<p><strong>Gender:</strong> {{ data["gender"] }}</p>
<p><strong>City:</strong> {{ data["city"] }}</p>
<p><strong>State:</strong> {{ data["state"] }}</p>
<p><strong>Zip:</strong> {{ data["zip"] }}</p>
<p><strong>Address:</strong> {{ data["address"] }}</p>
<p><strong>Email:</strong> {{ data["email"] }}</p>
<p><strong>Picture:</strong></p>
<img src="/static/{{ picture }}" alt="Uploaded Picture" style="max-width: 100%; height: auto;">
</div>
</body>
</html>
http://127.0.0.1:5000 in your browser to see the form. When the form is submitted, the second page will display the submitted data in a styled format.