HTML Forms: Syntax, Elements, Attributes, and Examples

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Form Architecture</title>
    <style>
        .form-group { margin-bottom: 16px; }
        label { display: block; font-weight: 600; margin-bottom: 6px; }
        input[type="text"], input[type="email"] { width: 100%; max-width: 400px; padding: 10px; border: 1px solid #cbd5e1; border-radius: 6px; }
        button[type="submit"] { background: #2563eb; color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; }
    </style>
</head>
<body>
    <h2>User Registration Form</h2>
    <!-- Secure Form with POST Method -->
    <form action="/api/register" method="POST">
        <div class="form-group">
            <label for="fullName">Full Name</label>
            <input type="text" id="fullName" name="full_name" placeholder="John Doe" required>
        </div>

        <div class="form-group">
            <label for="userEmail">Email Address</label>
            <input type="email" id="userEmail" name="email" placeholder="john@example.com" required>
        </div>

        <button type="submit">Complete Registration</button>
    </form>
</body>
</html>