issues in html code

[StormAditya]

Identified Issues
Incomplete

Tag in the Back of the Card:

The <div class= tag within the .back section is incomplete, causing improper rendering of the card's backside.
Invalid Input Types:

The input elements for the card number use type="num", which is not a valid HTML input type. The correct type should be type="number" or type="text".
Non-Unique IDs:

Multiple input fields share the same id (id="card-number"), leading to duplicate IDs in the DOM. Each ID must be unique.
Hardcoded Expiration Years:

The expiration year dropdown is hardcoded up to 2025, which can quickly become outdated. It should dynamically generate future years.
Accessibility Concerns:

Missing aria-labels and aria-describedby: Enhances screen reader support.
SVG Elements Lack Accessible Names: SVG logos should have aria-label or <title> tags for better accessibility.
Insufficient Contrast and Focus Indicators: Ensure that form elements are easily navigable and readable.
Form Validation Issues:

The novalidate attribute disables built-in HTML form validation without providing custom validation, potentially allowing invalid data submission.
Multiple Inputs for Card Number:

Splitting the card number into four separate inputs can complicate validation and data handling. A single input with proper formatting is more user-friendly.
Missing Visual Representation for the Chip:

The

lacks content or styling to visually represent a credit card chip.
Lack of Feedback on Form Submission:

There's no indication (like a loading spinner or success message) after form submission, which can leave users uncertain about the action's outcome.
Incorrect Form Field Associations:

The label elements should be correctly associated with their respective input fields using the for attribute matching the id of the input.
Missing Placeholder Text and Input Hints:

Adding placeholders and hints can guide users on the expected input format.
Security Considerations:

Although not directly visible in the HTML, ensuring that sensitive information like CCV is handled securely is crucial.
Redundant or Broken Links:

The anchor tag at the end links to a possibly outdated CodePen example, which might not be relevant.