相信很多后端开发。对于前端知识是比较零碎的,所以很多时候写表单这样的工作,一般就是复制黏贴,然后改改字段。对于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. 代码随想录算法训练营Day35 贪心算法

    代码随想录算法训练营 代码随想录算法训练营Day35 贪心算法| 860.柠檬水找零 406.根据身高重建队列 452. 用最少数量的箭引爆气球 860.柠檬水找零 题目链接:860.柠檬水找零 在柠 ...

  2. Java中序列化和反序列化解释

    在Java中,序列化(Serialization)是指将对象的状态转换为字节流的过程,以便将其保存到文件.在网络中传输或持久化到数据库中.而反序列化(Deserialization)则是将字节流转换回 ...

  3. PyInstaller 完美打包 Python 脚本,输出结构清晰、便于二次编辑的打包程序

    引入问题 如果我要写一个 Python 项目,打包成 exe 运行(方便在没有 Python 的电脑上使用),我需要打包出的根目录结构美观,没有多余的.杂乱的依赖文件在那里碍眼,而且需要在发现 bug ...

  4. 使用CNI网络插件(calico)实现docker容器跨主机互联

    目录 一.系统环境 二.前言 三.CNI网络插件简介 四.常见的几种CNI网络插件对比 五.Calico网络之间是如何通信的 六.配置calico让物理机A上的docker容器c1可以访问物理机B上的 ...

  5. docker镜像的原理

    docker镜像的原理 docker镜像是由特殊的文件系统叠加而成 最低端是bootfs,并使用宿主机的bootfs 第二层是root文件系统rootfs,称之为base image 再往上是可叠加的 ...

  6. 解决github无法打开问题

    在国内访问国外服务器(如github)会有卡顿.无法加载等问题,提供两种解决方案: 1.查看github的IP地址并修改Hosts windows键+R,打开cmd(或windows键+X,打开Win ...

  7. MySQL读取的记录和我想象的不一致

    摘要:并发的事务在运行过程中会出现一些可能引发一致性问题的现象,本篇将详细分析一下. 本文分享自华为云社区<MySQL读取的记录和我想象的不一致--事物隔离级别和MVCC>,作者:砖业洋_ ...

  8. 【城南】如何识别AI生成图?视觉AIGC伪造检测技术综述

    如何识别 AI 生成图片?or 如何识别 AIGC 图?or 如何识别 AI 换脸?or AI生成图伪造检测? 类似的说法有很多种,总之就是利用AI技术来鉴别一张图是不是AI生成的,这种AI技术就是本 ...

  9. 从n个不同元素中有放回的取出r个且不计顺序,有多少种不同的取法?

    从n个不同元素中有放回的取出r个且不计顺序,有多少种不同的取法? 答案是:\(C_{n+r-1}^r\) 解析 因为是有放回地取出,所以同一个元素可能会被取多次,并且取出的元素是不计顺序的,那么如果我 ...

  10. 深入分析Go语言与C#的异同

    摘要:本文由葡萄城技术团队于博客园原创并首发.转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 前言 为了更加深入地介绍Go语言以及与C#语言的比较,本文将会 ...