试试用Markdown来设计表单
相信很多后端开发。对于前端知识是比较零碎的,所以很多时候写表单这样的工作,一般就是复制黏贴,然后改改字段。对于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来设计表单的更多相关文章
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(44)-工作流设计-设计表单
系列目录 设计表单是比较复杂的一步,完成一个表单的设计其实很漫长,主要分为四步. 开始之前先说说表的结构. 其实表Flow_Form与Flow_FormContent设计是有一个缺陷的.我总共是设置最 ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(44)-工作流设计-设计表单
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(44)-工作流设计-设计表单 系列目录 设计表单是比较复杂的一步,完成一个表单的设计其实很漫长,主要分为四 ...
- WEB学习笔记12-高可读性的HTML之如何正确设计表单
网站中的用户登录.注册.用户调查等都是通过页面中的表单提交到网站服务器的.假设要实现让用户设置个人信息的一个表单. 该表格为两栏布局,第一栏中的文本左对齐,第二栏的表单控件右对齐,构成了最容易实现的表 ...
- 通达OA设计表单的小总结
16px下: 2010-09-09 80px 一般 100px 占5个字符 2010年09月09日 112px 一般120px 对应计算控件30px 占7个字符 2010-09-09时分秒 14 ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(55)-工作流设计-表单布局
系列目录 前言:这一节比较有趣.基本纯UI,但是不是很复杂 有了实现表单的打印和更加符合流程表单方式,我们必须自定义布局来适合业务场景打印!我们想要什么效果?看下图 (我们没有布局之前的表单和设置布局 ...
- 基于React和Node.JS的表单录入系统的设计与实现
一.写在前面 这是一个真实的项目,项目已经过去好久了,虽然很简单,但还是有很多思考点,跟随着笔者的脚步,一起来看看吧.本文纯属虚构,涉及到的相关信息均已做虚构处理, 二.背景 人活着一定要有信仰,没有 ...
- asp.net 微信企业号办公系统-表单及流程设计配置实例
在环境搭建好之后,我们就来学习一下怎样快速创建一个流程,并执行和流转该流程(我们这里讲的只是入门,不涉及到具体流程参数设置). 创建一个流程步骤为:在数据库在创建表-->设计表单-->设置 ...
- vue开源Element UI表单设计及代码生成器
在日常的开发工作中,表单开发是较为繁琐且重复的.本文介绍一个我自己写的,提高开发效率的小工具. 1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代 ...
- Bootstrap框架(基础篇)之列表,表格,表单
继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>… ...
- SPC2014 :“FOSL”不是替代InfoPath,只是另外一种创建表单的方式
今天在SPC2014微软宣布他们技术路线图.其实,没有足够证据替代InfoPath,只是另外的一种尝试 - FOSL(对SharePoint列表表单). FOSL使用相同的引擎,用于创建表单的访问服务 ...
随机推荐
- 为什么会出现 setTimeout 倒计时误差
setTimeout 倒计时误差的出现主要与 JavaScript 的事件循环机制和计时器的执行方式有关. 在 JavaScript 中,事件循环是用于管理和调度代码执行的机制.setTimeout ...
- 前端学习C语言 - 第二篇(常量、运算符、控制和循环)
常量.运算符.控制和循环 前文我们写了第一个 c 语言程序,了解了基本的数据类型.本篇将继续学习:常量.运算符.控制语句和循环语句. 常量 #define 常量 #define是用来定义常量和宏的预处 ...
- 【HMS Core】Health Kit注册订阅后,每种设备都会通过相同的回调地址上传数据?
[问题描述1] 注册订阅后,每种设备都会通过相同的回调地址上传数据? [解决方案] 一般和设备关系不大.订阅回调地址只有一个,当用户完成订阅,且用户数据在云端发生变化时,我们会向您提供的订阅地址发送 ...
- JVM源码分析:深入剖析java.c文件中JavaMain方法中InitializeJVM的实现
经过前文<从JDK源码级深入剖析main方法的运行机制>的分析,我们知道了实现JavaMain方法的四个主要步骤: 初始化Java虚拟机 加载主运行类 通过加载的主运行类,获取main方法 ...
- uni-app简单通用Request网络请求 支持请求成功 失败回调
uni-app简单通用Request网络请求 支持请求成功 失败回调; 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12794 ...
- Java 设计模式实战系列—策略模式
从优惠打折活动说起 电商平台为了增加销量经常搞一些活动,比如 618.双十一,还有一些节假日活动,根据销量的变化又经常更新不同的活动.最开始为了增加销量,全场都六折: // 打六折 public Bi ...
- XMLSpy操作手册
最新发布的XMLSpy会让XML代码的处理更容易,还会有助于这个产品成为最主要的XML编辑器.xmlspy是符合行业标准的XML开发环境,专门用于设计,编辑和调试企业级的应用程序,包括XML, XML ...
- 创建属于自己的github、使用git提交、更新代码至github、写好readme
1. 在github上创建一个Repository 点击github网站,你可以用你的邮箱先注册一个账号. 点击New,转到创建一个repository的界面,如下图所示,你可以填写你的Reposit ...
- 使用 Sa-Token 实现不同的登录模式:单地登录、多地登录、同端互斥登录
一.需求分析 如果你经常使用腾讯QQ,就会发现它的登录有如下特点:它可以手机电脑同时在线,但是不能在两个手机上同时登录一个账号. 同端互斥登录,指的就是:像腾讯QQ一样,在同一类型设备上只允许单地点登 ...
- FFmpeg+SDL实时解码和渲染H264视频流
前言 之前实现了Android手机摄像头数据的TCP实时传输,今天接着聊聊,如何在PC端把接收到的H264视频流实时解码并渲染出来.这次使用的语言是C++,框架有FFmpeg和SDL2. 解码 解码部 ...