iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 372 瀏覽

鐵人賽 Modern Web DAY 25

30 days of React 系列第 25 篇

技術 Day 25 - React 基礎實作練習：下拉式選單

今天要來練習做下拉式選單選擇國家。目前我們的程式碼已經有基礎的樣式。需要讓下拉式選單的功能正常運作。目前有的程式碼： import React from...

yuu ‧ 2023-10-10 ‧團隊好想工作室 v7.0

0 Like 0 留言 172 瀏覽

鐵人賽自我挑戰組 DAY 16

JavaScript 是什麼？可以吃嗎？系列第 16 篇

技術 Day16 - 表單的元素選擇：為什麼我們應該用 Form 而不是 Div？

哈囉，大家好！我是 Eric。今天我們要來談談一個看似簡單但實則關鍵的議題：表單處理。我們都知道，表單是網頁互動中不可或缺的一部分。但你有沒有遇過這樣的問題：你...

Eric ‧ 2023-09-16

1 Like 0 留言 1676 瀏覽

技術 [快速入門前端 4] 什麼是 HTML 標籤 (2) — 表格(Table) 和表單(Form)

HTML 標籤表格 - table <table> 顧名思義就是表格標籤，用來呈現二維資料的表資訊，不過 <table> 標籤只是作為...

Doris ‧ 2023-05-10

0 Like 0 留言 1154 瀏覽

鐵人賽 Modern Web DAY 15

你 React 了嗎? 30 天解鎖 React 技能系列第 15 篇

技術 [DAY 15] React 表單處理，更新資料及儲存表單

［情境任務］解師傅：我們的餐廳生意越來越好了，為了不讓客人排隊，我想客製一個點餐機～小當家：啥？這是什麼玩意？解師傅：直接在點餐機上選擇餐點跟輸入客人的資...

Lala Wang ‧ 2022-09-30

0 Like 0 留言 789 瀏覽

鐵人賽自我挑戰組 DAY 10

WordPress 區塊編輯器 | 多區塊組合應用技巧 | [進階應用] 系列第 10 篇

技術 10 | WordPress 表單 (Form) 區塊組合

WordPress 表單 (Form) 是個功能多元化的功能，你可以透過它收集訪客意見、提供招募員工表格、收集產品團購的名單或作一般聯明用途，功能各式各樣，在...

Mack Chan ‧ 2022-09-24

0 Like 0 留言 292 瀏覽

鐵人賽影片教學 DAY 7

從麻瓜變成前端魔法師系列第 7 篇

技術 Day07【從麻瓜變成前端魔法師】HTML 表單 form (下集)

接續上集附上連結 Day05【從麻瓜變成前端魔法師】HTML 表單 form (上集) 、Day06【從麻瓜變成前端魔法師】HTML 表單 form (中集)...

Olivia ‧ 2022-09-22

0 Like 0 留言 315 瀏覽

鐵人賽影片教學 DAY 6

從麻瓜變成前端魔法師系列第 6 篇

技術 Day06【從麻瓜變成前端魔法師】HTML 表單 form (中集)

接續上集附上連結 Day05【從麻瓜變成前端魔法師】HTML 表單 form (上集) 我們來練習做下圖這樣的表單：因為是【每天5分鐘】學前端的影片...

Olivia ‧ 2022-09-21

0 Like 1 留言 499 瀏覽

鐵人賽影片教學 DAY 5

從麻瓜變成前端魔法師系列第 5 篇

技術 Day05【從麻瓜變成前端魔法師】HTML 表單 form (上集)

★ 註： <label> for 和 <input> id 值設定一樣就能夠綁定，不要真的打上星星符號啊～囧我們來練習做下圖...

Olivia ‧ 2022-09-20

0 Like 0 留言 637 瀏覽

鐵人賽 Software Development DAY 14

傳教士的 Compose for Desktop 耕讀筆記系列第 14 篇

技術第 14 天：常用 UI 元件之表單元件

在寫 UI 的時候，除了顯示內容給使用者看的元件以外，接收使用者輸入的表單元件也很常見。在前面的筆記裡，已經整理過如 TextFiel、Button 等表單元件...

聖佑 ‧ 2022-09-20 ‧團隊攀岩抱石玩滑板還比賽的Kotlin鐵人們

0 Like 0 留言 1012 瀏覽

鐵人賽 Modern Web DAY 3

轉職工程師前的技能學習！沒記起來就偷看筆記吧～系列第 3 篇

技術用HTML與CSS製作出「下拉選單」！

input原本的下拉選單太過擁擠，想製作出好看的下拉選單可以參考這邊呦～ HTML 先製作選單input值，讓input內文字能夠顯示出所選選項。 <di...

Alice CH ‧ 2022-09-17

0 Like 0 留言 419 瀏覽

鐵人賽影片教學 DAY 17

從筆記語法帶入網頁設計系列第 17 篇

技術 Day17 HTML表單

<form action="/formprocess.php" method="post"> &l...

馬鈴薯 ‧ 2022-09-17

1 Like 3 留言 5210 瀏覽

鐵人賽 Modern Web DAY 7

【每天5分鐘】學前端系列第 7 篇

技術 Day07【每天5分鐘】學前端 | HTML 表單 form

表單 Form 昨天介紹的表格，最外層是用 <table> 標籤包起來；表單的組成也有點像，它則是用 <form> 標籤包起來。...

Olivia ‧ 2022-09-08

1 Like 5 留言 3546 瀏覽

鐵人賽 Modern Web DAY 30

Angular 深入淺出三十天：表單與測試系列第 30 篇

技術 Angular 深入淺出三十天：表單與測試 Day30 - 表單原理

經過前面二十九天的的練習與學習，相信大家應該在表單的實作上都熟悉了不少，只要不是太複雜、太特別的表單應該也都難不倒你們。今天是本系列文的最後一天，就讓我們來...

Leo ‧ 2021-10-15 ‧團隊請支援 Coding

0 Like 1 留言 2375 瀏覽

鐵人賽 Modern Web DAY 29

Angular 深入淺出三十天：表單與測試系列第 29 篇

技術 Angular 深入淺出三十天：表單與測試 Day29 - ControlContainer

昨天跟大家分享了自訂表單元件的作法，但昨天的作法只適用於一個欄位、一個 FormControl 。雖然 FormControl 裡是可以設 {} 的值，但如...

Leo ‧ 2021-10-14 ‧團隊請支援 Coding

0 Like 2 留言 1831 瀏覽

鐵人賽 Modern Web DAY 28

Angular 深入淺出三十天：表單與測試系列第 28 篇

技術 Angular 深入淺出三十天：表單與測試 Day28 - 自訂表單元件

經過了這段時間的練習與學習，相信大家應該越來越能體會 Angular 表單的強大與便利。不過既然 Angular 表單這麼好用，如果能讓自己做的 Compo...

Leo ‧ 2021-10-13 ‧團隊請支援 Coding

1 Like 3 留言 2582 瀏覽

鐵人賽 Modern Web DAY 27

Angular 深入淺出三十天：表單與測試系列第 27 篇

技術 Angular 深入淺出三十天：表單與測試 Day27 - Reactive Forms 進階技巧 - 跨欄位驗證

今天想要跟大家分享的是跨欄位驗證的小技巧，這個小技巧其實沒有多厲害或多特別，只是可能滿多人剛好不知道原來可以這樣用。而我們在 Day 23 - Reacti...

Leo ‧ 2021-10-12 ‧團隊請支援 Coding

0 Like 1 留言 3358 瀏覽

鐵人賽 Modern Web DAY 26

Angular 深入淺出三十天：表單與測試系列第 26 篇

技術 Angular 深入淺出三十天：表單與測試 Day26 - 進階表單開發技巧 - 自訂驗證器

之前在開發表單的時候，我們都是使用 Angular 所提供的驗證器來驗證表單欄位裡的值是否符合我們的需求。雖然 Angular 已經這麼貼心地提供了這麼多驗...

Leo ‧ 2021-10-11 ‧團隊請支援 Coding

0 Like 1 留言 1334 瀏覽

鐵人賽 Modern Web DAY 25

Angular 深入淺出三十天：表單與測試系列第 25 篇

技術 Angular 深入淺出三十天：表單與測試 Day25 - 測試進階技巧 - DI 抽換

好一陣子沒寫單元測試與整合測試了，大家是否覺得有些生疏了呢？之前的測試都寫得很簡單，正好昨天好好地寫了搜尋輸入框還有呼叫 API ，可以藉由撰寫這個功能的測...

Leo ‧ 2021-10-10 ‧團隊請支援 Coding

2 Like 2 留言 2489 瀏覽

鐵人賽 Modern Web DAY 24

Angular 深入淺出三十天：表單與測試系列第 24 篇

技術 Angular 深入淺出三十天：表單與測試 Day24 - Reactive Forms 進階技巧 - Auto-Complete Searching

在日常生活中，大家應該滿常看到有些系統的搜尋輸入框是可以在一邊打字的同時，一邊將搜尋結果呈現在一個下拉選單裡，非常地貼心且方便。當然，這其中其實有很多細節，...

Leo ‧ 2021-10-09 ‧團隊請支援 Coding

0 Like 0 留言 510 瀏覽

鐵人賽 Modern Web DAY 24

關於 UI 元件你所該知道的事系列第 24 篇

技術 Day 24 - 實戰演練 — FormControl

之前有講到非 input-like 的表單情境也需要處理，這時候就是 FormControl 出場的時候了，但其實也不代表 Input-like 的元件不能用...

parkerhiphop027 ‧ 2021-10-09

0 Like 1 留言 2321 瀏覽

鐵人賽 Modern Web DAY 23

Angular 深入淺出三十天：表單與測試系列第 23 篇

技術 Angular 深入淺出三十天：表單與測試 Day23 - Reactive Forms 進階技巧 - 欄位連動檢核邏輯

大家在日常生活中，應該看過滿多表單的某個欄位會隨著另個欄位的改變，而造成該欄位的驗證邏輯需要改變的情況吧？舉例來說，可能會有個欄位叫做聯絡資訊，使用者可以選...

Leo ‧ 2021-10-08 ‧團隊請支援 Coding

1 Like 1 留言 1790 瀏覽

鐵人賽 Modern Web DAY 22

Angular 深入淺出三十天：表單與測試系列第 22 篇

技術 Angular 深入淺出三十天：表單與測試 Day22 - 把 Cypress 變成 TypeScript 版

平常都用慣 TypeScript 版的 Cypress，但這兩天都用 JavaScript 在寫測試，令我有點不太習慣。雖然 JS 版或 TS 版的差別並沒...

Leo ‧ 2021-10-07 ‧團隊請支援 Coding

0 Like 1 留言 1419 瀏覽

鐵人賽 Modern Web DAY 21

Angular 深入淺出三十天：表單與測試系列第 21 篇

技術 Angular 深入淺出三十天：表單與測試 Day21 - E2E 測試實作 - 被保人表單

大家如果對於昨天的 E2E 測試如果沒有什麼問題的話，今天就來為我們的被保人表單撰寫 E2E 測試吧！實作開始撰寫測試前的準備昨天有說過了，今天就不再贅...

Leo ‧ 2021-10-06 ‧團隊請支援 Coding

0 Like 0 留言 1497 瀏覽

鐵人賽 Modern Web DAY 20

Angular 深入淺出三十天：表單與測試系列第 20 篇

技術 Angular 深入淺出三十天：表單與測試 Day20 - E2E 測試實作 - 登入系統

經過這兩天的介紹，相信大家對於 Cypress 應該已經有了一定程度的理解，有沒有人已經開始用它來寫測試了呢？今天就讓我帶著大家用 Cypress 來為我們...

Leo ‧ 2021-10-05 ‧團隊請支援 Coding

0 Like 0 留言 2127 瀏覽

鐵人賽 Modern Web DAY 19

Angular 深入淺出三十天：表單與測試系列第 19 篇

技術 Angular 深入淺出三十天：表單與測試 Day19 - 與 Cypress 的初次見面（下）

昨天跟大家初步地分享了 Cypress 怎麼安裝、 Cypress 的資料夾結構、 Cypress Test Runner 有哪些功能、和 Cypress...

Leo ‧ 2021-10-04 ‧團隊請支援 Coding

0 Like 0 留言 3420 瀏覽

鐵人賽 Modern Web DAY 18

Angular 深入淺出三十天：表單與測試系列第 18 篇

技術 Angular 深入淺出三十天：表單與測試 Day18 - 與 Cypress 的初次見面（上）

昨天跟大家分享了 Cypress 有多厲害之後，大家有沒有很期待呢？這兩天就讓我來跟大家介紹 Cypress 到底有多厲害吧！由於 Cypress 的功...

Leo ‧ 2021-10-03 ‧團隊請支援 Coding

1 Like 0 留言 5557 瀏覽

鐵人賽 Modern Web DAY 17

Angular 深入淺出三十天：表單與測試系列第 17 篇

技術 Angular 深入淺出三十天：表單與測試 Day17 - E2E 自動化測試工具簡介

在這個各種前端框架、開發工具層出不窮、百花齊放、百鳥齊鳴的美好時代， E2E 自動化測試工具的選擇自然也很多。今天我們會先來初步了解一下目前有哪些 E2E...

Leo ‧ 2021-10-02 ‧團隊請支援 Coding

0 Like 0 留言 1271 瀏覽

鐵人賽 Modern Web DAY 17

關於 UI 元件你所該知道的事系列第 17 篇

技術 Day 17 - UML x Interface — FormControl

上一章是在講跟 Input 相關的表單元件會使用 TextField 來給定表單會用到的 required, disabled, helperText 以及 l...

parkerhiphop027 ‧ 2021-10-02

1 Like 0 留言 1821 瀏覽

鐵人賽 Modern Web DAY 16

Angular 深入淺出三十天：表單與測試系列第 16 篇

技術 Angular 深入淺出三十天：表單與測試 Day16 - Template Driven Forms vs Reactive Forms

這段期間，我們用 Template Driven Forms 與 Reactive Forms 各自做了一個登入表單（靜態）與被保人表單（動態），而且我們也都...

Leo ‧ 2021-10-01 ‧團隊請支援 Coding

0 Like 1 留言 1153 瀏覽