mcpField
C
create-web-form

create-web-form

github.com/github开发40.5k7.0k 次安装今天更新
代码仓库

关于 create-web-form

create-web-form 是为构建 Web 表单的开发者准备的参考技能，汇集 HTML、样式、无障碍、验证、服务器端处理、数据处理、安全和性能方面的资料。

主要功能

  1. 01HTML 结构与表单控件
  2. 02CSS 样式和 JavaScript 交互
  3. 03无障碍指南
  4. 04PHP 与 Python 处理资料
  5. 05数据处理、安全与性能

适用场景

  1. 01规划无障碍表单结构
  2. 02添加客户端验证和交互
  3. 03使用 PHP 或 Python 处理提交
  4. 04检查表单安全性与性能

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/create-web-form确认已加载。

包含的文件

除 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

详细介绍

创建 Web 表单技能

概述

该技能为创建 Web 表单提供全面的参考资料和最佳实践。它涵盖 HTML 语法、UI/UX 设计、表单验证、服务端处理（PHP 和 Python）、数据处理以及网络通信。

目的

通过提供以下内容，帮助开发者构建健壮、可访问且用户友好的 Web 表单：

  • HTML 表单语法和结构
  • 表单元素的 CSS 样式技巧
  • 用于表单交互和验证的 JavaScript
  • 无障碍最佳实践
  • 使用 PHP 和 Python 进行服务端表单处理
  • 数据库集成方法
  • 网络数据处理与安全
  • 性能优化

参考文件

该技能包含以下参考文档：

UI 与样式
  • styling-web-forms.md - 表单样式技巧和最佳实践
  • css-styling.md - 用于表单样式的全面 CSS 参考
用户体验
  • accessibility.md - 表单的 Web 无障碍指南
  • javascript.md - 用于表单功能的 JavaScript 技巧
  • form-controls.md - 原生表单控件及其用法
  • progressive-web-app.md - 渐进式 Web 应用集成
HTML 结构
  • form-basics.md - 基础 HTML 表单结构
  • aria-form-role.md - 用于无障碍表单的 ARIA 角色
  • html-form-elements.md - 完整的 HTML 表单元素参考
  • html-form-example.md - 实用的 HTML 表单示例
服务端处理
  • form-data-handling.md - 网络表单数据处理
  • php-forms.md - PHP 表单处理
  • php-cookies.md - PHP 中的 Cookie 管理
  • php-json.md - PHP 中的 JSON 处理
  • php-mysql-database.md - 与 PHP 的数据库集成
  • python-contact-form.md - Python 联系表单实现
  • python-flask.md - Flask 表单教程
  • python-flask-app.md - 构建 Flask Web 应用
  • python-as-web-framework.md - Python Web 框架基础
数据与网络
  • xml.md - XML 数据格式参考
  • hypertext-transfer-protocol.md - HTTP 协议参考
  • security.md - Web 安全最佳实践
  • web-api.md - Web API 集成
  • web-performance.md - 性能优化技巧

用法

创建 Web 表单时，根据你的需求查阅相应的参考文件：

  1. 规划：查看 form-basics.md 和 form-controls.md
  2. 结构：使用 html-form-elements.md 和 aria-form-role.md
  3. 样式：参考 styling-web-forms.md 和 css-styling.md
  4. 交互性：应用 javascript.md 中的技巧
  5. 无障碍：遵循 accessibility.md 中的指南
  6. 服务端处理：在 PHP 或 Python 参考之间选择
  7. 数据存储：查阅数据库和数据格式参考
  8. 优化：查看 web-performance.md 和 security.md

最佳实践

  • 始终在客户端和服务端对输入进行验证
  • 确保表单对所有用户均可访问
  • 使用语义化 HTML 元素
  • 实现适当的错误处理和用户反馈
  • 使用 HTTPS 保护表单数据传输安全
  • 遵循渐进增强原则
  • 在不同浏览器和设备上测试表单
  • 针对性能和用户体验进行优化

评论

支持 Markdown