Skill: jhauga/create-web-form (version 1.0.3)

--- name: create-web-form description: 'Create robust, accessible web forms with best practices for HTML structure, CSS styling, JavaScript interactivity, form validation, and server-side processing. Use when asked to "create a form", "build a web form", "add a contact form", "make a signup form", or when building any HTML form with data handling. Covers PHP and Python backends, MySQL database integration, REST APIs, XML data exchange, accessibility (ARIA), and progressive web apps.' --- # 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


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: clean | SkillSpector: suspicious (MEDIUM)