mcpField
C
create-web-form

create-web-form

github.com/githubDevelopment40.5k7.0k installsUpdated today
Repository

About create-web-form

create-web-form is a reference skill for developers building web forms. It brings together guidance on HTML, styling, accessibility, validation, server-side processing, data handling, security, and performance.

Key features

  1. 01HTML structure and form controls
  2. 02CSS styling and JavaScript behavior
  3. 03Accessibility guidance
  4. 04PHP and Python processing references
  5. 05Data handling, security, and performance

Use cases

  1. 01Plan an accessible form structure
  2. 02Add client-side validation and interaction
  3. 03Process submissions with PHP or Python
  4. 04Review form security and performance

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/github/awesome-copilot --skill create-web-form

After installing, type/create-web-formin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
accessibility.md
aria-form-role.md
css-styling.md
form-basics.md
form-controls.md
form-data-handling.md
html-form-elements.md
html-form-example.md
hypertext-transfer-protocol.md
javascript.md
php-cookies.md
php-forms.md
php-json.md
php-mysql-database.md
progressive-web-app.md
python-as-web-framework.md
python-contact-form.md
python-flask-app.md
python-flask.md
security.md
styling-web-forms.md
web-api.md
web-performance.md
xml.md

Details

From the project README

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

Comments

Markdown supported