試試用Markdown來設計表單

發表於2023-09-19

相信很多後端開發。對於前端知識是比較零碎的，所以很多時候寫表單這樣的工作，一般就是複製黏貼，然後改改欄位。對於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。第一時間瞭解前沿行業訊息、分享深度技術乾貨、獲取優質學習資源

相關文章