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

boyanx3个月前技术教程11

大家好,我是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,有需要的就冲吧

相关文章

技术干货 | Flutter在线编程实践总结

1.Flutter架构Flutter的架构主要分成三层:Framework,Engine,Embedder。1.Framework使用dart实现,包括Material Design风格的Widget...

一、自动装配基础 - @Component、@ComponentScan、@Enable 模块

目录前言1、起源2、Spring 模式注解 2.1、装配方式context:component-scan 方式@ComponentScan 方式 2.2、派生性3、Spring @Enable 模块驱...

流水号设计及Leaf的升级使用_流水号生成器实现

一、需求背景由于业务需要对数据和消息等进行唯一的标识。需要进行唯一流水号的设计。返回数据的流水号(requestId)记录唯一日志数据流水号发送的消息唯一流水号数据库主键二、常用方法介绍2.1 UUI...

常用半导体中英对照表2(建议收藏)

微电子辞典大集合 整理了一些常用的半导体术语的中英文对照表,希望对大家有所帮助。如有出错之处,请不吝指正,感谢!(按首字母顺序排序)AAbrupt junction 突变结Accelerated t...

实战Netty!基于私有协议,怎样快速开发网络通信服务

私有协议编写目的本文档用于描述边缘计算单元(以下简称边缘盒)与上位机配置软件(以下简称上位机)之间进行的数据交互通信协议。通信方式边缘盒作为服务端,上位机作为客户端,采用TCP/IP协议的socket...

RocketMQ源码详解(Broker启动过程源码分析)

一、前言在分布式消息中间件RocketMQ的架构中,Broker扮演着核心的消息存储和转发枢纽角色。它直接承担了生产者的消息投递、消费者的消息拉取以及消息的持久化存储等核心职责,其稳定性和性能直接决定...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。