一个用Markdown来设计HTML表单的小工具

zhezhongyun 2024-12-06 20:47 21 浏览

大家好，我是TJ

关注TJ君比较久的读者应该知道，我是一名后端开发。对于前端知识是比较零碎的，所以很多时候写表单这样的工作，一般就是复制黏贴，然后改改字段。对于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还麻烦，也可以通过官方给出的表单库open in new window去找找是否有自己需要的，可以直接去复制黏贴：

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

HTML 表单

上一篇：HTML表单及css样式
下一篇：超牛 Vue+ElementUI 可视化表单设计器组件FormMaking

一个用Markdown来设计HTML表单的小工具

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

接口测试遇到500报错?别慌，你的头部可能有点问题

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

关于HTML5被简称做H5，你怎么看?（html5缩写）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?