安装指南

1. ClawHub CLI 从源直接安装技能的最快方式。
   npx clawhub@latest install create-web-form
2. 手动安装 将技能文件夹复制到以下位置之一
   全局模式
   ~/.openclaw/skills/
   工作区
   /skills/
   优先级：工作区 > 本地 > 内置
3. 提示词安装 将此提示词复制到 OpenClaw 即可自动安装。
   请帮我使用 Clawhub 安装 create-web-form。如果尚未安装 Clawhub，请先安装（npm i -g clawhub）。
   更倾向于下载？
   获取包含原生技能文件的ZIP压缩包。
   下载技能 (.zip)

什么是

Create Web Form 是 Openclaw Skills 提供的一项资源，可指导开发者从初始结构到数据处理，构建可靠的 Web 表单。它整合了语义化 HTML、CSS 样式设计、JavaScript 交互功能、无障碍访问、验证、错误处理和渐进增强方面的指导。
此技能还涵盖使用 PHP 和 Python 进行服务器端表单处理，包括 Flask、数据库集成、HTTP、API、XML 和安全性。相关参考资料可帮助开发者选择合适的实现方案，同时确保表单易于使用、性能良好且运行更安全。

应用场景

构建联系表单、注册表单或其他数据收集表单。
添加无障碍表单控件、ARIA 支持和清晰的验证反馈。
实现客户端交互，同时保留服务器端验证。
使用 PHP 或 Python 处理提交内容，并将表单连接到 MySQL。
通过 JSON、XML、HTTP 或 Web API 交换提交的数据。
检查现有表单的安全性、性能、响应式设计或跨浏览器可用性。

工作原理

查阅 form-basics.md 和 form-controls.md，规划表单并选择合适的结构和控件。
使用 html-form-elements.md 构建语义化 HTML，并参考 aria-form-role.md 设置无障碍表单角色。
使用 styling-web-forms.md 和 css-styling.md 设置视觉样式。
使用 javascript.md 添加 JavaScript 交互和验证，同时确保通过渐进增强，用户仍可完成表单。
遵循 accessibility.md，并提供实用的错误消息和反馈。
从 PHP 或 Python 参考资料中选择后端工作流程，然后根据需要查阅数据库、数据格式、HTTP 或 API 相关资料。
验证客户端和服务器端验证、HTTPS、安全性、性能，以及表单在不同浏览器和设备上的表现。

配置指南

此技能是一组参考文档；所提供的 SKILL.md 未指定 CLI 安装命令，也未要求使用特定运行时。请将技能及其参考文件提供给你的编码代理，然后查阅与表单实现相关的资料。
从 form-basics.md 和 form-controls.md 开始。
根据界面需求选择 HTML、样式设计、无障碍访问和 JavaScript 相关资料。
选择 PHP 或 Python 参考资料进行服务器端处理，并在需要时补充数据库或 API 指导。
配置自己的应用环境和密钥。示例中的凭据应视为占位符；实际密钥应从环境变量或密钥管理器中读取。

所提供的 SKILL.md 未指定安装命令

数据架构

此技能将指导内容整理为按实现主题分类的 Markdown 参考文件；它不定义必需的应用数据架构，也不会自动生成文件。
领域 参考文件 用途
UI 和样式设计 styling-web-forms.md、css-styling.md 表单外观和 CSS 技术
用户体验 accessibility.md、javascript.md、form-controls.md、progressive-web-app.md 无障碍控件、交互和渐进式 Web 应用集成
HTML 结构 form-basics.md、aria-form-role.md、html-form-elements.md、html-form-example.md 语义化标记、表单角色和示例
服务器端处理 form-data-handling.md、php-forms.md、python-contact-form.md、python-flask.md、python-flask-app.md、python-as-web-framework.md 使用 PHP 和 Python 框架处理提交内容
数据和网络 php-json.md、php-mysql-database.md、php-cookies.md、xml.md、hypertext-transfer-protocol.md、web-api.md 存储、格式、Cookie、HTTP 和 API 集成
安全性和性能 security.md、web-performance.md 更安全的数据处理和优化
参考资料介绍了可能的实现选项，包括 MySQL 和 JSON/XML 处理，但此技能不规定通用的字段分类、数据库架构或生成的产物格式。

高级特性

覆盖完整的表单工作流程，从语义化 HTML 和原生控件到服务器端处理。
支持 PHP 和 Python 方案，包括 Flask，并提供 MySQL 集成相关参考资料。
通过 ARIA 指导和表单可用性实践关注无障碍访问。
包含 JavaScript 交互、客户端验证和渐进增强。
提供关于 HTTP、REST 风格 Web API、JSON、XML 和 PHP Cookie 的参考资料。
强调客户端和服务器端验证、HTTPS、错误处理及性能。
建议尽量减少敏感数据收集，在服务器端对密码进行哈希处理，并在适用时使用托管支付字段或可信的支付令牌化服务。
建议在不同浏览器和设备上进行测试；所提供的技能未指定钩子、自动部署或多代理功能。

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:

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

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

创建技能模板
Markdown 转 HTML 转换器