24 個漂亮的個性化 HTML 表單技術

2020-12-25 站長之家

HTML 表單對象在不同瀏覽器渲染方式並不一致，儘管一些對象，如 textbox 和 textarea 可以通過 CSS 在不同瀏覽器獲得一致的外觀，其它多數無法通過CSS 控制外觀的對象在有些瀏覽器中看上去十分醜陋，本文精選了24個對表單對象進行個性化定製的技術。

Checkbox 與 Radio Buttons 相關

1.) FancyForm

FancyForm 是一個非常強大的 JavaScript 庫，可以作為 checkbox 和 radio button 的替代品，能生成非常漂亮的 checkbox 和 radio button，並支持幾乎所有瀏覽器，該 JavaScript 庫需要 MooTools JavaScript 框架的支持。

 

2.) CRIR: Checkbox & Radio Input Replacement

這個 JavaScript 和 CSS 組合可以隱藏表單中的 checkbox 和 radio button，並允許你使用 CSS 對 checkbox 與 radio button 的設置式樣模擬 checkbox 和 radio button。表單的功能不會改變，仍可以收集 checkbox 和 radio button 的數據值，checkbox 和 radio button 的標籤會觸發那些隱藏的對象。

 

3.) Ryan Fait’s Custom Checkboxes & Radio Buttons

這個 JavaScript 和 CSS 組合允許你使用自己的圖片模擬 checkbox，radio button 以及 select 列表控制項。這個很周到的 JavaScript 庫還可以在瀏覽器禁用了 JavaScript 的時候，自動用回傳統的表單控制項。

 

4.) ARC - Adam’s Radio/Checkbox Customization

該腳本會對表單中的 checkbox 和 radio button 及其標籤進行探測，一旦發現，就會使用基於 CSS 式樣的圖形標籤替換這些控制項。

 

5.) prettyCheckboxes

 

相關焦點

  • 如何發送HTML表單數據
    action特性 該特性定義了數據會被發往何處，它的值必須是個合法的URL。若該特性未指定，則數據會發送到包含該表單的頁面所在的URL。() say  = html.escape(form["say"].value); to   = html.escape(form["to"].value);  print(say, " ", to)   結果和之前用PHP處理是一樣的： Hi Mom  其它語言和框架 還有許多其他的服務端技術可以用來處理表單，比如Perl, Java
  • Python學習第224課——html表單
    這節我們學習html中另一個具有交互作用的元素--表單。我們在登錄一個網站的時候，需要輸入帳號密碼，這個區域其實就是用表單元素實現的。●html表單表單是一個包含表單元素的區域。表單標籤是<form></form>。form這個單詞本身就有表格的意思。
  • html中form表單標籤的詳細介紹
    本篇將介紹的是html中form表單標籤的用法，有興趣的朋友可以學習一下！在html中，表單是經常用到的，用來與用戶交互並提交數據。今天要介紹的就是表單標籤form標籤，接下來我們就一起來看看它的用法吧！「form」作為英文單詞有「表格」的意思，那它在html中作為標籤又充當什麼樣的角色呢！
  • 由淺入深地聊聊html的表單
    今天和大家分享學習一下html的表單一、HTML標籤：表單標籤表單的概念：用於採集用戶輸入的數據的。用於和伺服器進行交互。1、form表單標籤他是用於定義表單的，本身並沒有什麼樣式，可以定義一個範圍，範圍代表採集用戶數據的範圍，通俗易懂的說就是 被他包裹的數據可以被提交給伺服器。
  • 【專欄試讀】(03)③ HTML 表單詳解 | HTML
    前言：這一篇我們集中精力攻克一個知識點——表單。這個知識點在工作中用處很廣泛，不管是網頁還是 App，只要涉及到「註冊」，就會有它的身影，屬於必掌握項。1 「表單」的相關定義HTML 表單是一個可以用來輸入用戶信息的一個單子，它是一個包含「表單元素」的區域；「表單元素」是指：允許用戶在表單中（比如，文本域、下拉列表、複選框等等）輸入信息的元素；對於服務商（網頁、App 等運營者）來說，這個單子可以用來收集不同類型的用戶輸入。2 「表單」的實際運用及相關元素注釋<!
  • 使用 HTML 和 CSS 構建一個註冊表單
    你還可以複製此樣板並將其粘貼到你的  index.html  文件中：<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="
  • Django HTML表單實現用戶登錄退出(含源碼)
    HTML表單實現用戶的登錄通過前一節的學習，通過 HTML 表單並不難實現用戶的登錄功能，那麼大家先思考一下，用戶登錄的邏輯打開是怎麼樣的呢？分析這個邏輯，大家也可以去體驗一下其他網站的登錄功能，從用戶的註冊到登錄最後用戶退出，這整個的流程都需要大家細細的品味，並發現其中的規律，並且學以致用。當自己不熟練的時候，學會去借鑑其他人的經驗，往往是一個不錯的選擇。
  • 10 個漂亮的 CSS3 表單製作教程
    HTML5 引入了非常有用的表單元素——滑動條、數字調整、日期選擇等，該教程教你如何使用這些元素並製作非常精美的表單。 該教程是法語的，點進去之前確保自己法語是槓槓的，也可以下載源碼來體驗一下：get the source code » View tutorial 使用 HTML5 & CSS3 做一個漂亮的聯繫表單
  • HTML登錄表單
    登錄表單初識表單今天我們來學習表單。在我們的生活中，離不開表單，在我們註冊帳號的時候，或者買東西輸入地址或者登陸帳號密碼的時候，這時候我們用到都是表單的內容。我們就拿一個登錄表單為例我們需要一個文本輸入框輸入用戶名，需要一個密碼輸入框輸入密碼，需要一個提交按鈕進行登錄，而這些東西都需要包裹在一個from標籤裡通常在一個表單裡面，有許多表單控制項，有文本框、密碼框、單選按鈕、複選框等等這些表單控制項全部都是由
  • 10款AJAX/CSS/HTML的在線表單生成器
    在這篇文章中，我們將介紹10個超棒的在線表單生成器，幫助你整合web表單到你的網站中，希望大家喜歡！1. Form Assembly這是個web表單的CSS樣式集合2. JotForm第一款基於可見即可用的表單生成器。
  • html創建表格有那些小技巧,表單中真的有這麼多功能嗎
    html基礎篇（第二篇）上一篇 html 我們聊了初識 html 的基本常識和所用的瀏覽器內核以及基礎的標籤等等，這次我們再聊一聊 html 的表格和表單等語法
  • HTML表單標籤基礎
    HTML表單一、傳統表單(一)1、表單是什麼？01.在網頁中主要負責數據採集功能的組件。03.由表單元素組成。07.文件域08.提交按鈕09.重置按鈕3、form 標籤 （表單範圍）...小結：01.form 標籤是表單本身。02.input 標籤是表單元素最常見的情況，它的 type 屬性是非常多樣化的，不同的 type 屬性值決定了 表單元素的類型。
  • ASP.NET Mvc5表單Html輔助方法如何使用及對應的Html標記是什麼?
    對於幫助方法，返回的類型都是MvcHtmlString，且第一個參數都是this HtmlHelper htmlHelper，從擴展方法的語法上看，這是要將該方法擴展到HtmlHelper類中。注意：C#中的擴展方法都是靜態方法，這是C#語言的規定。
  • HTML、CSS從零開始 | HTML表單標籤
    收錄於話題 #HTML、CSS學習筆記 11個
  • HTML+CSS:常用表單控制項之單選框、多選框、下拉框的介紹
    上一篇文章我們說了單行文本框和多行文本框，今天呢我們繼續看一下表單的其它控制項：單選框、複選框、下拉框。（1）單選框和複選框在我們表單頁面中，經常會有選擇性別或者選擇愛好這類的內容，使用選擇框是一個好主意，html中有兩種選擇框，即單選框和複選框，兩者的區別是單選框中的選項用戶只能選擇一項，而複選框中用戶可以任意選擇多項，甚至全選。
  • 【20201115】HTML語言入門——標籤語言
    3.3 表單標籤:表單標籤是網頁的重要組成部分，它可以展示用戶表單給用戶，達到與用戶交互的目的。DOCTYPE html><html><head> <title>HTML標籤</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></head><body></body><
  • HTML網頁表單製作詳細講解
    表單是一個網站和訪問者開展互動的窗口，我們現在就給大家介紹一下表單的一些基本知識和表單美化方法。初識表單表單可以用來在網頁中發送數據，特別是經常被用在聯繫表單-用戶輸入信息然後發送到Email中。表單本身是沒有什麼用的。這需要編一個程序來處理輸入表單中的數據。這也超出了本站指南的範圍。如果使用網絡伺服器來放置HTML，你能夠自助地找到一些簡單的教程，開發一個伺服器端的程序使一個發送到Email的表單工作。
  • HTML中表單form的相關知識
    ：elements：獲取以源順序排列的給定表單中所有控制項的集合。該標記用於將文字綁定到對應的表單元素上，它的for 屬性指定它所要綁定的表單元素id 值。綁定後單擊該文字，滑鼠將聚焦到對應的文本框中或選中對應的選項。若安裝了某些桌面主題，某些表單元素還會變換顏色來予以提示，這大大提高了用戶體驗。
  • 29個非常實用的HTML 5實例、教程和技巧
    點擊瀏覽器支持圖標或技術標籤，就可以過濾演示(過濾器是「或」過濾器)。3.用HTML5表單大顯身手錶單通常被認為是我們必須添加標記和樣式的討厭鬼。我不敢苟同：表單(其重要性不亞於表)是我們所要處理的最激動人心的東西。
  • 使用React和HTML5表單驗證API處理表單
    但我想知道為什麼我們不依賴HTML5內置表單驗證，而不是使用無數的自定義實現。HTML5表單驗證該技術出現在不久前。第一個實現在2008年與Opera 9.5一起實現。如今，它在所有現代瀏覽器中都可用。表單（數據）驗證引入了額外的HTML屬性和輸入類型，可用於設置表單驗證規則。