Forms, Media & Interactive Elements

Build accessible forms, embed responsive media, and create interactive HTML elements for a professional portfolio experience.

55 min•By Priygop Team•Last updated: Feb 2026

Accessible Form Design

Form Structure: <form action='/api/contact' method='POST'> — always specify action and method. Use <fieldset> to group related inputs and <legend> for group labels
Input Types: type='email' (validates email format, shows @ keyboard on mobile), type='tel' (shows number pad), type='url' (validates URL format). Browser-native validation before JavaScript
Labels & Descriptions: <label for='email'>Email Address</label> <input id='email' required aria-describedby='email-help'> <span id='email-help'>We'll never share your email</span> — complete accessible pattern
Validation Attributes: required (must be filled), pattern='[A-Za-z]+' (regex match), minlength/maxlength (length constraints), min/max (number range). Use :valid/:invalid CSS pseudo-classes for styling
Textarea: <textarea id='message' rows='5' required placeholder='Tell me about your project...'></textarea> — don't use placeholder as a replacement for labels. Placeholder text disappears when typing
Submit Button: <button type='submit'>Send Message</button> — always use <button>, never <div> or <span>. Button has built-in keyboard interaction (Enter/Space), focus management, and screen reader announcement

Responsive Images: <img src='project.jpg' alt='E-commerce dashboard showing sales analytics' width='800' height='600' loading='lazy' decoding='async'> — always set width/height to prevent layout shifts (CLS)
Picture Element: <picture><source srcset='hero.avif' type='image/avif'><source srcset='hero.webp' type='image/webp'><img src='hero.jpg' alt='...'></picture> — serve modern formats with fallback
Srcset for Resolution: <img srcset='photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w' sizes='(max-width: 768px) 100vw, 50vw' src='photo-800.jpg'> — browser chooses optimal image size
Video Embedding: <video controls preload='metadata' poster='thumbnail.jpg'><source src='demo.mp4' type='video/mp4'><track kind='captions' src='captions.vtt' srclang='en' label='English'></video>
Figure & Figcaption: <figure><img src='project.jpg' alt='...'><figcaption>Dashboard redesign increasing user engagement by 40%</figcaption></figure> — semantic association between image and its description
Lazy Loading: loading='lazy' on images and iframes below the fold — browser only loads them when near viewport. Never lazy-load hero image or LCP element (use fetchpriority='high' instead)