HTML Elements Demonstration

This project showcases the implementation of various HTML elements including forms, tables, lists, and SVG graphics with modern styling and interactive JavaScript functionality.

Features

Forms

• Complete contact form with various input types
• Text, email, phone, number, date, color inputs
• Select dropdown, checkboxes, radio buttons
• File upload and textarea
• Form validation and submission handling

Tables

• Employee data table with header, body, and footer
• Responsive design with hover effects
• Interactive row selection
• Proper semantic markup with caption

Lists

• Unordered lists with nested items
• Ordered lists with different numbering styles
• Description lists for term definitions
• Interactive highlighting on click

SVG Graphics

• Basic shapes (rectangles, circles, ellipses, polygons)
• Chart visualization with gradients
• Complex path drawings (landscape scene)
• Interactive hover and click effects

Technologies Used

• HTML5 semantic elements
• CSS3 with Grid and Flexbox layouts
• Vanilla JavaScript for interactivity
• SVG for scalable graphics
• Responsive design principles

Browser Compatibility

This project works in all modern browsers that support:

• HTML5 form elements
• CSS3 Grid and Flexbox
• ES6 JavaScript features
• SVG graphics

Getting Started

Simply open index.html in a web browser to view the demonstration. All files are self-contained with no external dependencies.