mirror of
https://github.com/github/awesome-copilot.git
synced 2026-02-20 02:15:12 +00:00
86 lines
3.6 KiB
Markdown
86 lines
3.6 KiB
Markdown
---
|
|
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
|
|
- Follow progressive enhancement principles
|
|
- Test forms across different browsers and devices
|
|
- Optimize for performance and user experience
|