相信很多后端开发。对于前端知识是比较零碎的,所以很多时候写表单这样的工作,一般就是复制黏贴,然后改改字段。对于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. 代码随想录算法训练营Day11 栈与队列|20. 有效的括号  1047. 删除字符串中的所有相邻重复项  150. 逆波兰表达式求值

    20.有效的括号 题目链接:20.有效的括号 给定一个只包括 '(',')','{','}','[',']' 的字符串 s ,判断字符串是否有效. 有效字符串需满足: 左括号必须用相同类型的右括号闭合 ...

  2. Qt+QtWebApp开发笔记(四):http服务器使用Session和Cookie实现用户密码登录和注销功能

    前言   前面实现了基础的跳转,那么动态交互中登录是常用功能.  本篇实现一个动态交互的简单登录和注销功能,在Qt中使用Session和Cookie技术.   Demo    下载地址   链接:ht ...

  3. ODOO13之十四 :Odoo 13开发之部署和维护生产实例

    本文中将学习将 Odoo 服务器作为生产环境的基本准备.安装和维护服务器是一个复杂的话题,应该由专业人员完成.本文中所学习的不足以保证普通用户创建应对包含敏感数据和服务的健壮.安全环境. 本文旨在介绍 ...

  4. 基于SqlSugar的开发框架循序渐进介绍(30)-- 整合客户关系管理系统模块功能

    以前在随笔<Winform开发框架之客户关系管理系统(CRM)的开发总结系列1-界面功能展示 >的几篇随笔中介绍过基于WInform开发框架开发的CRM系统,系统的功能主要也是围绕着客户相 ...

  5. Python 列表、字典、元组的一些小技巧

    1. 字典排序 我们知道 Python 的内置 dictionary 数据类型是无序的,通过 key 来获取对应的 value.可是有时我们需要对 dictionary 中的 item 进行排序输出, ...

  6. ImageMagick 图像处理学习笔记

    Use ImageMagick to create, edit, compose, or convert bitmap images. It can read and write images in ...

  7. 顶级生物信息学 RSS 订阅源

    早在 2018 年的时候我在"生信草堂"的公众号上写过一篇关于 RSS 的文章<使用 RSS 打造你的科研资讯头条>,介绍了关于 RSS 的一些内容和如何使用 inor ...

  8. GitHub 的项目徽章

    GitHub 项目的 README.md 中可以添加徽章(Badge)对项目进行标记和说明,这些好看的小图标不仅简洁美观,而且还包含了清晰易读的信息. GitHub 项目的徽标可以参考 https:/ ...

  9. Dapr在Java中的实践 之 状态管理

    状态管理 状态管理(State Management)使用键值对作为存储机制,可以轻松的使长时运行.高可用的有状态服务和无状态服务共同运行在我们的服务中. 我们的服务可以利用Dapr的状态管理API在 ...

  10. 【技术积累】Python中的NumPy库【一】

    NumPy库是什么 NumPy是Python科学计算的核心库之一,用来进行科学计算,数值分析等矩阵运算.主要提供了以下几种功能: 1.多维数组(ndarray)对象,可以进行快速的数值计算和数组操作: ...