Create Web Form

SKILL.md

---
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