create-web-form

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Create Web Form Skill

创建Web表单技能

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.

本技能提供创建Web表单的全面参考资料与最佳实践，涵盖HTML语法、UI/UX设计、表单验证、基于PHP和Python的服务端处理、数据处理以及网络通信等内容。

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

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

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

Reference Files

参考文件

This skill includes the following reference documentation:

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

UI & Styling

UI与样式

```
styling-web-forms.md
```
- Form styling techniques and best practices
```
css-styling.md
```
- Comprehensive CSS reference for form styling

```
styling-web-forms.md
```
- 表单样式技巧与最佳实践
```
css-styling.md
```
- 表单样式全面参考

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

```
accessibility.md
```
- 表单Web可访问性指南
```
javascript.md
```
- 表单功能的JavaScript技巧
```
form-controls.md
```
- 原生表单控件及其用法
```
progressive-web-app.md
```
- 渐进式Web应用集成

HTML Structure

HTML结构

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

```
form-basics.md
```
- HTML表单基础结构
```
aria-form-role.md
```
- 可访问表单的ARIA角色
```
html-form-elements.md
```
- HTML表单元素完整参考
```
html-form-example.md
```
- 实用HTML表单示例

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

```
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框架基础

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

```
xml.md
```
- XML数据格式参考
```
hypertext-transfer-protocol.md
```
- HTTP协议参考
```
security.md
```
- Web安全最佳实践
```
web-api.md
```
- Web API集成
```
web-performance.md
```
- 性能优化技巧

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

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

规划：查阅
```
form-basics.md
```
与
```
form-controls.md
```
结构：使用
```
html-form-elements.md
```
与
```
aria-form-role.md
```
样式：参考
```
styling-web-forms.md
```
与
```
css-styling.md
```
交互：应用
```
javascript.md
```
中的技巧
可访问性：遵循
```
accessibility.md
```
中的指南
服务端处理：选择PHP或Python相关参考文档
数据存储：查阅数据库与数据格式相关参考
优化：参考
```
web-performance.md
```
与
```
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

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