一个用Markdown来设计HTML表单的小工具

yumo6663个月前 (04-30)技术文章36

大家好,我是TJ

关注TJ君比较久的读者应该知道,我是一名后端开发。对于前端知识是比较零碎的,所以很多时候写表单这样的工作,一般就是复制黏贴,然后改改字段。对于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还麻烦,也可以通过官方给出的表单库open in new window去找找是否有自己需要的,可以直接去复制黏贴:

好了,今天的分享就到这里。最后,奉上该站点地址:
https://createhtmlform.com/open in new window,有需要的就冲吧

相关文章

HTML表单search、tel和color高级元素的使用

search类型元素search类型的input元素是一种专门用来输入搜索关键词的文本框。其代码格式如下。<input type="search" name="user_...

html,fix固定写法,固定上方(html固定定位语法)

要实现一个搜索框始终固定在页面顶部,无论用户如何滚动页面,可以使用CSS的position: fixed;属性。fixed定位会使元素相对于浏览器窗口定位,而不是相对于父元素。这使得元素在页面滚动时保...

如何使用PHP编写一个简单的留言板?

留言板是一个常见的Web应用程序,允许用户在网站上发布和查看留言。在本文中,我们将使用PHP编写一个简单的留言板,介绍构建过程中的关键步骤和技巧。一、准备工作在开始编写留言板之前,我们需要准备好以下工...

小伙给同事爬取数据竟获取不到,竟要使用这种请求方式才能获取?

Http请求中Form Data 和 Request Payload两种参数的区别 ?Ajax Post请求中常用的两种的形式:form data 和 request payload一、默认的表单方式...

TypeScript 终极初学者指南(typescript ?)

在过去的几年里 TypeScript 变得越来越流行,现在许多工作都要求开发人员了解 TypeScript,各大厂的大型项目基本都要求使用 TypeScript 编写。下面是我整理的一些初学者必备的一...