小编点评

**Create HTML Form 是一款很有趣的工具，可以帮助您通过 Markdown 简洁地编写 HTML 表单，并生成可视化的表单预览以及完整的 HTML 代码。** **它具有以下优点：** * **Markdown 简洁易读：**使用 Markdown 来编写表单元素，非常易于理解和维护。 * **可视化预览：**创建表单后，工具自动生成可视化的表单预览，您可以看到表单的结构和布局。 * **完整的 HTML 代码：**除了表单可视化，工具还提供完整的 HTML 代码，您可以自由使用。 * **易于分享：**您可以轻松地分享您的表单代码，方便其他人使用。 **使用 Create HTML Form 的优点：** * **省时省力：**创建表单只需几分钟，并生成可视化的表单预览。 * **易于理解：**Markdown 的语法很简洁，易于理解和使用。 * **可扩展性：**您可以根据需要添加或删除表单元素。 * **安全可靠：**表单数据将被安全加密存储。 **一些其他值得注意的点：** * Create HTML Form 支持多种 HTML 5 元素。 * 它还支持 JavaScript，可以动态添加表单元素。 * 它支持多种格式的图片，可以作为表单元素的背景或图标。 **结论：** Create HTML Form 是一个非常棒的工具，可以帮助您轻松地创建并发布表单。它易于使用、安全可靠且具有可视化功能。如果您想尝试一下，您可以访问其网站：**createhtmlform.com**。

正文

相信很多后端开发。对于前端知识是比较零碎的，所以很多时候写表单这样的工作，一般就是复制黏贴，然后改改字段。对于HTML格式，一直觉得比较杂乱，不够简洁。

最近TJ发现了一个有趣的小工具：Create HTML Form。

看看上面它的Slogan，是不是很有意思？居然可以通过Markdown来编写HTML的表单？下面就来一起看看这款工具的能力。

下面是官方页面给出的Markdown案例：

## Example Form

name* = ___ 
Email = ___[@] Enter Email
Password = ___[*] ***

city = {Boston, SFO -> San Francisco, (NYC -> New York City)}

size = () small (x) medium () large            

I agree to share my information with partners = ___[checkbox]

Publish on my profile = ___[switch]
User Number = ___[1-10]
Phone Number* = ___[r2002000000-9999999999]
Color = ___[color]
Date = ___[date]

Save = ___[+]

通过上面的Markdown内容，将获得如下图所示的结果内容：

其中，左边是表单的可视化结果，右边是具体的HTML代码（包括：pico.css、bootstrap、tailwindcss三种），根据自己需要选择性的复制就用就可以了。怎么样？是不是很有趣？

如果你觉得写Markdown还麻烦，也可以通过官方给出的表单库去找找是否有自己需要的，可以直接去复制黏贴：

好了，今天的分享就到这里。最后，奉上该站点地址：https://createhtmlform.com/，有需要的就冲吧～

欢迎关注公众号：TJ君，订阅每日推荐，了解更多效率工具、发现优质开源项目

欢迎关注我的公众号：程序猿DD。第一时间了解前沿行业消息、分享深度技术干货、获取优质学习资源