试试用Markdown来设计表单

news2024/10/5 13:03:20

相信很多后端开发。对于前端知识是比较零碎的,所以很多时候写表单这样的工作,一般就是复制黏贴,然后改改字段。对于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。前沿技术早知道,弯道超车有希望!积累超车资本,从关注DD开始!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1004759.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

新手请进,Python是什么,Python简介!

Python 是荷兰人 Guido van Rossum (吉多范罗苏姆,中国程序员称其为“龟叔”)在 1990 年初开发的一种解释型编程语言。 图1:Python 的标志(Logo) Python 的诞生是极具戏曲性的,据 Guido 自述记载…

【拼多多API接口开发系列】拼多多商品详情接口:卖家必知的赚钱利器

拼多多,作为中国最大的社交电商之一,为卖家提供了丰富的商品详情接口。这些接口可以帮助卖家快速获取商品信息,提高销售效率。本文将详细介绍如何使用拼多多商品详情接口,以及它的优势和注意事项。 一、拼多多商品详情接口概述 …

LabVIEW以编程方式查找系统中DAQ设备的设备名称

LabVIEW以编程方式查找系统中DAQ设备的设备名称 使用DAQmx VI,“创建虚拟通道”函数,这个函数需要物理通道输入端。当使用相同型号的新设备(例如,两个不同的USB-6210)运行可执行文件时,代码会中断&#xf…

医院院检验科LIS系统源码 检验申请、标本编号、联机采集、报告单的生成与打印、质控图的绘制和数据的检索与备份

一套符合医院院检验科实际需要的管理系统, 实现检验业务全流程的计算机管理。从检验申请、标本编号、联机采集、中文报告单的生成与打印、质控图的绘制和数据的检索与备份。通过将所有仪器自身提供的端口与科室LIS系统中的工作站点连接,实现与医院HIS系统的联网。 通过门诊医生…

python基于GDAL的多线程高速批量重采样、对齐栅格、对齐行列数,并无损压缩

在自己写代码处理遥感数据进行波段计算,或者基于遥感等空间数据进行机器学习、深度学习时,一般都需要各图层行列数一致。在QGIS中有“对齐栅格”工具可以完成该任务,但是QGIS中没有提供批量操作的接口,在数据比较多时,…

PCL入门(五):随机采样一致性算法RANSAC简单使用

目录 1. 简介2. 简单使用 1. 简介 参考博客《随机抽样一致性(RANSAC)算法详解》 该算法根据数据集获得满足一定条件的参数估计,实现利用尽可能少的数据获得尽可能大的一致性数据集。具体来说, 步骤1:从数据集中随机…

网页布局常用的8种布局方式

网页布局在整个网页设计中起着至关重要的作用。不同的网页布局设计会产生不同的视觉效果,直接影响浏览者对网页的第一印象。 网页布局在很大程度上决定了网站用户如何与网页内容互动。好的网页设计具有很强的实用性和适应性,所以在布局上要选择合适的设…

论文撰写必备!16个免费查重网站助你成为学术精英

一、引言 初审查重在论文撰写过程中扮演着重要的角色,以下是简要概述初审查重的重要性: 确保原创性:初审查重可以帮助确保你的论文的原创性,并避免抄袭他人的作品。这对于维护学术诚信以及论文的学术价值至关重要。 避免版权侵权&…

从单页面应用角度去解决不跳转页面,也能更改浏览器url地址

正常来说不刷新页面,也能更改浏览器url地址的方法有很多,我们在网上搜的话可以看到有pushState、replaceState、popstate等方法,那还有没有其他方法呢? 答案是有的! 最近做一个vue商城项目的时候,用户点击支…

【KingFusion】如何设置日期控件默认选择最近24小时

哈喽,大家好,我是雷工! 本篇记录一个日期时间控件的使用过程,以下为应用笔记。 1、问题描述 KingFusion中,对于一些特定的查询情况下,需要设置日期时间控件默认显示前一天的日期时间到当前时间24小时内的…

2023/9/12 -- C++/QT

作业 实现一个图形类(Shape),包含受保护成员属性:周长、面积, 公共成员函数:特殊成员函数书写 定义一个圆形类(Circle),继承自图形类,包含私有属性&#xf…

数据结构题型3--按序查找

#include <iostream> //引入头文件 using namespace std;typedef int Elemtype;#define Maxsize 100 #define ERROR 0 #define OK 1typedef struct LNode {Elemtype data;//数据域struct LNode* next;//指针域 }LNode, * LinkList;bool InitList(LinkList& L) …

OpenCV(三十九):积分图像

1.积分图像介绍 积分图像中的每个像素表示了原始图像中对应位置及其左上方矩形区域内像素值的总和。如图&#xff0c;p0表示原始图像蓝色区域内像素值的总和。 倾斜求和&#xff08;Skewed Sum&#xff09;是积分图像的一种扩展形式&#xff0c;用于计算图像区域内的像素和&…

小白带你学习linux自动化运维ansible

目录 一、为什么要用自动化运维软件 二、自动化运维要注意的方面 1、管理机与被管理机之间的连接方式 2、服务器分组(主机清单) 3,、自动化运维的管理分类 三、常见的开源自动化运维软件 1、puppet 2、saltstack 3、ansible 四、自动化运维软件一般安装在哪 五、ans…

【栈与队列面试题】有效的括号(动图演示)

leetcode20.括号匹配问题 前言&#xff1a; &#x1f4a5;&#x1f388;个人主页:​​​​​​Dream_Chaser&#xff5e; &#x1f388;&#x1f4a5; ✨✨刷题专栏:http://t.csdn.cn/UlvTc ⛳⛳本篇内容:力扣上栈与队列的面试OJ题目 目录 leetcode20.括号匹配问题 1.问题描…

2023-9-12 多重背包问题(二)

题目链接&#xff1a;多重背包问题 II #include <iostream> #include <algorithm>using namespace std;const int N 12010, M 2010;int n, m; int v[N], w[N]; int f[M];int main() {cin >> n >> m;// 最后一共转换成多少个物品int cnt 0;for(int i…

Rust通用编程概念(3)

Rust通用编程概念 1.变量和可变性1.执行cargo run2.变量3.变量的可变性4.常量5.遮蔽5.1遮蔽与mut区别1.遮蔽2.mut 2.数据类型1.标量类型1.1整数类型1.2浮点数类型1.3数字运算1.4布尔类型1.5字符类型 2.复合类型2.1元组类型2.2数组类型1.访问数组2.无效的数组元素访问 3.函数3.1…

9月12日作业

作业代码 #include <iostream>using namespace std;class Shape { protected:double cir;double area; public://无参构造Shape() {cout<<"无参构造"<<endl;}//有参构造Shape(double c, double a):cir(c), area(a){cout<<"有参构造&quo…

Maven Helper mvn项目冲突如何解决

一般用这款插件来查看maven的依赖树。 一、安装&#xff1a; File-->setting--->Plugins--->在搜索框中填写Maven Helper然后搜索&#xff0c;单击Install按钮进行安装&#xff0c;装完重启IDE。 二、使用 当Maven Helper 插件安装成功后&#xff0c;打开项目中的p…

【算法基础】时间复杂度和空间复杂度

目录 1 算法的评价 2 算法复杂度 2.1 时间复杂度&#xff08;Time Complexity&#xff09; 2.1.1 如何计算时间复杂度&#xff1a; 2.1.2 常见的时间复杂度类别与示例 2.2 空间复杂度 2.2.1 如何计算空间复杂度 2.2.2 常见的空间复杂度与示例 3 时间复杂度和空间复杂度…