index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Form Validation</title>

</head>
<body>
<div class="area">
    <ul class="circles">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

<div class="container">
    <h2>Form Validation</h2>
    <form id="myForm">
        <label for="email">Email:</label>
        <input type="text" id="email" name="email" placeholder="name@example.com">

        <label for="phone">Phone:</label>
        <input type="text" id="phone" name="phone" placeholder="+xxx xxxxxxxxxx">

        <label for="zip">Zip Code:</label>
        <input type="text" id="zip" name="zip" placeholder="xxxxx">

        <label for="password">Password:</label>
        <input type="password" id="password" name="password" placeholder="Must be at least 8 characters">

        <label for="url">URL:</label>
        <input type="text" id="url" name="url" placeholder="https://example.com/">

        <label for="date">Date (YYYY-MM-DD):</label>
        <input type="text" id="date" name="date" placeholder="YYYY-MM-DD">

        <input type="submit" value="Submit">
    </form>
</div>

<script src="main.js"></script>

</body>
</html>