相信很多后端开发。对于前端知识是比较零碎的,所以很多时候写表单这样的工作,一般就是复制黏贴,然后改改字段。对于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。第一时间了解前沿行业消息、分享深度技术干货、获取优质学习资源

试试用Markdown来设计表单的更多相关文章

  1. ASP.NET MVC5+EF6+EasyUI 后台管理系统(44)-工作流设计-设计表单

    系列目录 设计表单是比较复杂的一步,完成一个表单的设计其实很漫长,主要分为四步. 开始之前先说说表的结构. 其实表Flow_Form与Flow_FormContent设计是有一个缺陷的.我总共是设置最 ...

  2. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(44)-工作流设计-设计表单

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(44)-工作流设计-设计表单 系列目录 设计表单是比较复杂的一步,完成一个表单的设计其实很漫长,主要分为四 ...

  3. WEB学习笔记12-高可读性的HTML之如何正确设计表单

    网站中的用户登录.注册.用户调查等都是通过页面中的表单提交到网站服务器的.假设要实现让用户设置个人信息的一个表单. 该表格为两栏布局,第一栏中的文本左对齐,第二栏的表单控件右对齐,构成了最容易实现的表 ...

  4. 通达OA设计表单的小总结

    16px下: 2010-09-09  80px  一般 100px  占5个字符 2010年09月09日 112px 一般120px 对应计算控件30px 占7个字符 2010-09-09时分秒 14 ...

  5. ASP.NET MVC5+EF6+EasyUI 后台管理系统(55)-工作流设计-表单布局

    系列目录 前言:这一节比较有趣.基本纯UI,但是不是很复杂 有了实现表单的打印和更加符合流程表单方式,我们必须自定义布局来适合业务场景打印!我们想要什么效果?看下图 (我们没有布局之前的表单和设置布局 ...

  6. 基于React和Node.JS的表单录入系统的设计与实现

    一.写在前面 这是一个真实的项目,项目已经过去好久了,虽然很简单,但还是有很多思考点,跟随着笔者的脚步,一起来看看吧.本文纯属虚构,涉及到的相关信息均已做虚构处理, 二.背景 人活着一定要有信仰,没有 ...

  7. asp.net 微信企业号办公系统-表单及流程设计配置实例

    在环境搭建好之后,我们就来学习一下怎样快速创建一个流程,并执行和流转该流程(我们这里讲的只是入门,不涉及到具体流程参数设置). 创建一个流程步骤为:在数据库在创建表-->设计表单-->设置 ...

  8. vue开源Element UI表单设计及代码生成器

    在日常的开发工作中,表单开发是较为繁琐且重复的.本文介绍一个我自己写的,提高开发效率的小工具. 1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代 ...

  9. Bootstrap框架(基础篇)之列表,表格,表单

    继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>… ...

  10. SPC2014 :“FOSL”不是替代InfoPath,只是另外一种创建表单的方式

    今天在SPC2014微软宣布他们技术路线图.其实,没有足够证据替代InfoPath,只是另外的一种尝试 - FOSL(对SharePoint列表表单). FOSL使用相同的引擎,用于创建表单的访问服务 ...

随机推荐

  1. ODOO13之五:Odoo 13开发之导入、导出以及模块数据

    大多数Odoo 模块的定义,如用户界面和安全规则,实际是存储在对应数据表中的数据记录.模块中的 XML 和 CSV 文件不是 Odoo 应用运行时使用,而是载入数据表的手段.正是因为这个原因,Odoo ...

  2. MySQL之常用函数介绍

    一:函数的简介 函数可以把我们经常使用的代码封装起来,需要的时候直接调用即可.这样既提高了代码效率,又提高了可维护性.在SQL中我们也可以使用函数对检索出来的数据进行函数操作.使用这些函数,可以极大地 ...

  3. Kubernetes(k8s)服务service:service的发现和service的发布

    目录 一.系统环境 二.前言 三.Kubernetes service简介 四.使用hostPort向外界暴露应用程序 4.1 创建deploy 4.2 使用hostPort向外界暴露pod的端口 五 ...

  4. 一分钟学一个 Linux 命令 - find 和 grep

    前言 大家好,我是 god23bin.欢迎来到<一分钟学一个 Linux 命令>系列,每天只需一分钟,记住一个 Linux 命令不成问题.今天需要你花两分钟时间来学习下,因为今天要介绍的是 ...

  5. Go应用性能优化的8个最佳实践,快速提升资源利用效率!

    作者|Ifedayo Adesiyan 翻译|Seal软件 链接|https://earthly.dev/blog/optimize-golang-for-kubernetes/ 优化服务器负载对于确 ...

  6. Java有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少?

    代码如下: public static void main(String[] args) { Scanner scanner = new Scanner(System.in); System.out. ...

  7. 理解ffmpeg

    ffmpeg是一个完整的.跨平台的音频和视频录制.转换和流媒体解决方案. 它的官网:https://ffmpeg.org/ 这里有一份中文的文档:https://ffmpeg.p2hp.com/ ff ...

  8. pod setup 慢 的问题

    由于更换了硬盘,重装了系统,需要重新配置环境,发现现在安装cocapods比之前坑更深了, 装环境时遇到pod setup才几kb的下载速度(即使用梯子也是巨慢),实在是没法用在网上尝试了各种方法,但 ...

  9. 防火墙(iptables与firewalld)

    防火墙 iptables 疏通和堵 进行路由选择前处理的数据包:prerouting 处理流入的数据包:input 处理流出的数据包:output 处理转发的数据包:forward 进行路由选择后处理 ...

  10. 用windows脚本命令netsh快速启用、禁用网络

    用windows脚本命令netsh快速启用.禁用网络 不知道你有没有这种需求:公司单位里的网络是内网,有时需要连接手机热点wifi网络,这时就需要先禁用内网网卡,启用无线网卡.连接内网的时候又需要先禁 ...