Create Web Form Skill

Overview

This skill provides comprehensive reference materials and best practices for creating web forms. It covers HTML syntax, UI/UX design, form validation, server-side processing (PHP and Python), data handling, and network communication.

Purpose

Enable developers to build robust, accessible, and user-friendly web forms by providing:

• HTML form syntax and structure
• CSS styling techniques for form elements
• JavaScript for form interactivity and validation
• Accessibility best practices
• Server-side form processing with PHP and Python
• Database integration methods
• Network data handling and security
• Performance optimization

Reference Files

This skill includes the following reference documentation:

UI & Styling

• styling-web-forms.md - Form styling techniques and best practices
• css-styling.md - Comprehensive CSS reference for form styling

User Experience

• accessibility.md - Web accessibility guidelines for forms
• javascript.md - JavaScript techniques for form functionality
• form-controls.md - Native form controls and their usage
• progressive-web-app.md - Progressive web app integration

HTML Structure

• form-basics.md - Fundamental HTML form structure
• aria-form-role.md - ARIA roles for accessible forms
• html-form-elements.md - Complete HTML form elements reference
• html-form-example.md - Practical HTML form examples

Server-Side Processing

• form-data-handling.md - Network form data handling
• php-forms.md - PHP form processing
• php-cookies.md - Cookie management in PHP
• php-json.md - JSON handling in PHP
• php-mysql-database.md - Database integration with PHP
• python-contact-form.md - Python contact form implementation
• python-flask.md - Flask forms tutorial
• python-flask-app.md - Building Flask web applications
• python-as-web-framework.md - Python web framework basics

Data & Network

• xml.md - XML data format reference
• hypertext-transfer-protocol.md - HTTP protocol reference
• security.md - Web security best practices
• web-api.md - Web API integration
• web-performance.md - Performance optimization techniques

Usage

When creating a web form, consult the appropriate reference files based on your needs:

1. Planning: Review form-basics.md and form-controls.md
2. Structure: Use html-form-elements.md and aria-form-role.md
3. Styling: Reference styling-web-forms.md and css-styling.md
4. Interactivity: Apply techniques from javascript.md
5. Accessibility: Follow guidelines in accessibility.md
6. Server Processing: Choose between PHP or Python references
7. Data Storage: Consult database and data format references
8. Optimization: Review web-performance.md and security.md

Best Practices

• Always validate input on both client and server sides
• Ensure forms are accessible to all users
• Use semantic HTML elements
• Implement proper error handling and user feedback
• Secure form data transmission with HTTPS
• Collect passwords or payment data only when necessary; hash passwords server-side and prefer hosted payment fields or tokenization from a trusted processor
• Treat any credential shown in examples as a placeholder and load real secrets from environment variables or a secret manager
• Follow progressive enhancement principles
• Test forms across different browsers and devices
• Optimize for performance and user experience