สาย Frontend ห้ามพลาด เพราะเรา "รวม 7 เครื่องมือเด็ด สำหรับออกแบบฟอร์มกรอกข้อมูล ที่ทำให้ฟอร์มของเรา สวยน่าใช้ขึ้น !!"
.
หมดยุคที่ใช้ฟอร์มแบบเชย ๆ หรือ หน้าตาไม่เป็นมิตรกับผู้ใช้ได้แล้ว เพราะแอดได้รวม JavaScript / CSS Libs มาให้ทุกคนแบบครบถ้วนแล้วนั่นเอง <3
.
อย่ารอช้า ไปดูทั้ง 7 ตัวนี้พร้อมกันกันเลย !!
.
⭐️ JS Form Validator
.
เครื่องมือที่ช่วยให้การตรวจสอบความถูกต้องใน Form ของคุณดูดีมีสไตล์และสามารถปรับแต่งเงื่อนไขได้ตามใจคุณ
.
https://via-profit.github.io/js-form-validator/
.
⭐️ JCF
.
Library ที่ทำให้ Form ของคุณดูดีมีลูกเล่น ด้วย Elements ที่ถูกปรับแต่งมาเป็นอย่างดีโดยเฉพาะ Slider Input และ Option Input ตัวนี้บอกเลยว่าเด็ด!
.
https://www.psd2html.com/js-custom-forms/
.
⭐️ iCheck
.
Library รวม Checkbox Elements สำเร็จรูปที่จะทำให้ Form ของคุณมี Checkbox ที่สวยงาม ทันสมัย
.
http://icheck.fronteed.com/
.
⭐️ flatpickr
.
เครื่องมือที่จะทำให้คุณสร้างช่องกรอกข้อมูลในเรื่องเวลาให้สวยงามไม่ใช่เรื่องยากอีกต่อไป, flatpickr จะช่วยให้คุณสร้างตัวเลือกเวลาแบบ minimal และมีการใช้งานที่สมูธน่าใช้งาน
.
https://flatpickr.js.org/examples/
.
⭐️ formBuilder
.
เครื่องมือที่ช่วยให้ Form ของคุณมีลูกเล่นน่าสนใจ ให้สามารถลากวาง Form ที่ต้องการกรอกข้อมูลได้เองได้ตามใจ บอกเลยว่าไม่เหมือนใครจริงๆ
.
https://formbuilder.online/docs/
.
⭐️ Bulma
.
CSS Framework มากความสามารถที่มีพื้นฐานมาจาก Flexbox สามารถจัดการกับ Form ให้กลายเป็นเรื่องง่ายๆทั้ง Style และการจัดการ
.
https://bulma.io/documentation/form
.
⭐️ Ant Design Form
.
Ant Design เป็น Framework ที่มีเครื่องมือช่วยในการสร้าง UI ซึ่งมีตัวช่วยในการสร้าง Form สวยๆ พร้อมเครื่องมืออย่างการจำกัดขอบเขตและการตรวจความถูกต้องของข้อมูล
.
https://ant.design/components/form/
.
และทั้งหมดนี้ก็เป็นตัวเด็ด ๆ ที่คัดสรรมาเฉพาะ เหมาะกับหลาย ๆ งานในโพสต์เดียวว หากกลัวลืมก็แชร์เก็บไว้ กดไลค์ให้กำลังใจพวกเราได้นะคร้าบบ <3
.
#borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
同時也有1部Youtube影片,追蹤數超過12萬的網紅prasertcbs,也在其Youtube影片中提到,ดาวน์โหลดไฟล์ประกอบได้ที่ http://goo.gl/TzFv8U ============ playlist สอน Excel https://www.youtube.com/playlist?list=PLoTScYm9O0GEMj5LpqxaxWWnanc55Ep...
「form checkbox」的推薦目錄:
- 關於form checkbox 在 BorntoDev Facebook 的最佳貼文
- 關於form checkbox 在 紀老師程式教學網 Facebook 的精選貼文
- 關於form checkbox 在 prasertcbs Youtube 的最讚貼文
- 關於form checkbox 在 HTML keep checkbox checked after form submit - Stack ... 的評價
- 關於form checkbox 在 Angular 筆記- Checkbox 的驗證實作 - 提姆寫程式 的評價
- 關於form checkbox 在 How to create a checkbox group · Issue #1037 · redux-form ... 的評價
- 關於form checkbox 在 Pure JavaScript - Google 圖書結果 的評價
- 關於form checkbox 在 JavaScript: Novice to Ninja - Google 圖書結果 的評價
- 關於form checkbox 在 Dreamweaver 4 for Windows and Macintosh 的評價
form checkbox 在 紀老師程式教學網 Facebook 的精選貼文
[WebTech #64] CSS > 4. CSS 範例 > 4-4 視覺元件 > 4-4-1 單選與多選按鈕
在人機介面中,最重要的大概就是「文字框」、「單選按鈕」、「下拉式功能表」...這些視覺元件了! CSS3 提供了大量方法,可以讓你用簡單的方法,製造出各種視覺元件。
由於視覺元件種類非常多,我將會一種一種分開介紹。本篇要介紹的是「單選按鈕」(Radio Button)與「多選按鈕」(Checkbox)。您不要只是點擊進去玩玩看就結束了喔!重要的是要讀懂它的 CSS 原始碼、學習它語法的精髓喔!
三個基本範例:
- 其一: http://www.hongkiat.com/blog/css3-checkbox-radio/
- 其二: http://www.inserthtml.com/2012/06/custom-form-radio-checkbox/
- 其三: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-easy-css3-checkboxes-and-radio-buttons/
兩個比較精緻的範例:
- 其一: http://webdesign.tutsplus.com/tutorials/site-elements/creating-a-javascript-free-radio-toggle-in-css3/
- 其二: http://tympanus.net/codrops/2012/09/13/button-switches-with-checkboxes-and-css3-fanciness/
最棒的 CSS Selector 或 Properties 線上參考手冊:
(進入後,Selector 在中央,Properties 在左下選單)
http://www.w3schools.com/cssref/css_selectors.asp
form checkbox 在 prasertcbs Youtube 的最讚貼文
ดาวน์โหลดไฟล์ประกอบได้ที่ http://goo.gl/TzFv8U
============
playlist สอน Excel
https://www.youtube.com/playlist?list=PLoTScYm9O0GEMj5LpqxaxWWnanc55Epnt
============
playlist สอนการใช้งาน PivotTable
https://www.youtube.com/playlist?list=PLoTScYm9O0GFFdZwK6437TxMXYf7Hrd4I
============
playlist การใช้ Excel ในการทำงานร่วมกับกับฐานข้อมูล (SQL Server, MySQL, Access)
https://www.youtube.com/watch?v=HfKl6eOfNFo&list=PLoTScYm9O0GGA2sSqNRSXlw0OYuCfDwYk
============
playlist การสร้างกราฟ แผนภูมิแบบต่าง ๆ ด้วย Excel
https://www.youtube.com/playlist?list=PLoTScYm9O0GExxZ3nlVmleu0wvlhGfs3j
============
playlist การสร้างกราฟ แผนภูมิแบบใหม่ใน Excel 2016
https://www.youtube.com/watch?v=0brII3eyaW8&list=PLoTScYm9O0GHkvWn5LVlo0ZXYMGmOCcEx
============
playlist สอนการเขียน Excel VBA และ Macro
https://www.youtube.com/watch?v=InS56wNCUfw&list=PLoTScYm9O0GHgpbmyNuXP39OUcb0BheaE
============
playlist สอนการใช้งาน Excel สำหรับการเงิน
https://www.youtube.com/playlist?list=PLoTScYm9O0GHcen0YDAIIbXewc-621buW
============
playlist ความสามารถใหม่ใน Excel 2016
https://www.youtube.com/watch?v=0brII3eyaW8&list=PLoTScYm9O0GEL6uJG7K1o99mtkKZLmTYb
============
playlist สอนเทคนิคการใช้งาน Word
https://www.youtube.com/watch?v=hSa7e5UkWGU&list=PLoTScYm9O0GG5QrQtl8hmVbg0o8fCCaJT
============
playlist สอนเทคนิคการใช้งาน PowerPoint
https://www.youtube.com/watch?v=pXWyMULdRvA&list=PLoTScYm9O0GEG5JELOjSGqigFN669d5IK
============
เชิญสมัครเป็นสมาชิกของช่องนี้ได้ที่
https://www.youtube.com/subscription_center?add_user=prasertcbs
form checkbox 在 Angular 筆記- Checkbox 的驗證實作 - 提姆寫程式 的推薦與評價
<form [formGroup]="checkboxForm"> <div class="form-check pri-txt"> <input class="form-check-input" type="checkbox" name="checkbox1" ... <看更多>
form checkbox 在 How to create a checkbox group · Issue #1037 · redux-form ... 的推薦與評價
In my form, a vectorFile checkbox should be checked if the array of spatialAverage s contains a spatialAverage with spatialAverage. ... <看更多>
form checkbox 在 HTML keep checkbox checked after form submit - Stack ... 的推薦與評價
... <看更多>
相關內容