create-web-form

SKILL.md

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:

Planning: Review form-basics.md and form-controls.md

Structure: Use html-form-elements.md and aria-form-role.md

Styling: Reference styling-web-forms.md and css-styling.md

Interactivity: Apply techniques from javascript.md

Accessibility: Follow guidelines in accessibility.md

Server Processing: Choose between PHP or Python references

Data Storage: Consult database and data format references

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