---
tags: 30 天軟體工程師體驗營｜2025
---

# 🏅 切版任務 Day22 - input 樣式調整基礎練習

# 什麼是 input

<input> 是 HTML 裡面用來建立使用者輸入欄位的元素。可以讓使用者輸入文字、數字、密碼、上傳檔案、選擇日期等等。是「單一標籤元素」（self-closing），通常寫成 <input />。

## 基本語法

<input type="text" />

type 是屬性，決定了這個欄位的輸入型態（例如文字、數字、密碼、email...）。

## 常見屬性介紹
1. `type` 決定輸入的資料型態，例如：text、number、password、email、file、date
2. `placeholder` 顯示在輸入框內的提示文字，例如：`placeholder="請輸入姓名"`
3. `value` 預設的輸入值，例如：`value="Hello"`
4. `name` 資料送出時的參數名稱，例如：`name="username"`
5. `required` 必填欄位，沒填不能送出
6. `disabled` 讓欄位變成不可輸入（灰色）
7. `readonly` 只能看不能改，但可以被送出
8. `maxlength` 限制最多可以輸入幾個字

## 注意事項
1. **type 沒設定的話，預設是 type="text"。**
2. **placeholder 只是提示，不是實際的值，要送出資料要用 value。**
3. **有些 input 型態會出現瀏覽器自帶的 UI（例如 type="date" 會出現日期選單）。**

## 題目
複製此 [CodePen](https://codepen.io/yen-kg/pen/NPPvEZQ) 模板，並且替 input 加上正確的 type 與提示文字，如下圖所示：


## 回報流程

1. 將答案貼在 CodePen 並複製 CodePen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）


<!--
解答：
<input type="text" placeholder="請輸入您的大名" class="subscribe-input" />
<input type="email" placeholder="請輸入您的電子信箱" class="subscribe-input" />
-->

回報區
---

| 報數 | Discord 名字 | Codepen／其他回饋 |
|:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
| 01 | Hank_08123 | [Codepen](https://codepen.io/hankyang1213/pen/ogXgYwQ) |
| 2 | 4chan |[Codepen](https://codepen.io/ijuolaqc-the-looper/pen/ZYGYByJ)|
| 3 | Daniel Huang |[Codepen](https://codepen.io/Hou-Chieh-HUANG/pen/gbpbLeb)|
| 4 | Dean |[Codepen](https://codepen.io/ch933114/pen/PwqwbXZ?editors=1000)|
| 5 | jingle0900 |[Codepen](https://codepen.io/EvaLi0472/pen/vEOEgBO)|
| 6 | DD |[Codepen](https://codepen.io/dorihung/pen/LEVExbY)|
|7|JHT|[Codepen](https://codepen.io/juanht/pen/xbGbgVN)|
|8|B|[Codepen](https://codepen.io/Babel777/pen/MYwYJvz)|
| 9 | Joseph_Kyuu |[Codepen](https://codepen.io/zrzfastd-the-reactor/pen/gbpbgBG)|
| 10 | oyll |[Codepen](https://codepen.io/dizzydog-rgb/pen/emNmgoq?editors=1100)|
| 11 | NAOJUN |[Codepen](https://codepen.io/NAOJUN/pen/myJyRYB)|
| 12 | andy |[Codepen](https://codepen.io/ewnblckz-the-styleful/pen/JodoWGR)|
| 13 | Yu(light_2020_03026) |[Codepen](https://codepen.io/Yu_Chang/pen/NPqPpRe)|
| 14 | pastor |[Codepen](https://codepen.io/peter_hung/pen/WbvbpxP)|
| 15 | Aoi |[Codepen](https://codepen.io/zching07/pen/raVayzx)|
| 16 | RUDY |[Codepen](https://codepen.io/Rudy-crw/pen/ByNyWwv?editors=1100)|
| 17 | ying |[Codepen](https://codepen.io/Lara-Lin/pen/RNPNpRx)|
| 18 | 謝天 |[Codepen](https://codepen.io/crisxie/pen/jEPEBdE)|
| 19 | An |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/vEOExqV)|
| 20 | 柔術小子 |[Codepen](https://codepen.io/Li-Lee-Everything-is-PM/pen/azOzJMy?editors=1100)|
|21|Saika|[Codepen](https://codepen.io/saika4501/pen/NPqPjKW?editors=1111)|
| 22 | kururu110 |[Codepen](https://codepen.io/ecqyjuck-the-decoder/pen/myJymeo)|
| 23 | 力文 |[Codepen](https://codepen.io/liwenchiou/pen/bNdNWEN)|
| 24 | stone | [Codepen](https://codepen.io/bgrwlzoz-the-reactor/pen/pvJvPdP)|
| 25 | Chia__ |[Codepen](https://codepen.io/Chia-the-encoder/pen/yyNybzb)|
| 26| 7Lun |[Day22-Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/ogXgWPV)|
| 27 | nora_zizi |[Codepen](https://codepen.io/Nora-Ch/pen/ogXgWVR)|
| 28 | Min |[Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/wBaBevJ)|
| 29 | Aidd. |[Codepen](https://codepen.io/aiddchen/pen/ZYGYyWM)|
| 30 | Ariel |[Codepen](https://codepen.io/ariel0510/pen/zxGxzwX)|
| 31 | Archang |[Codepen](https://codepen.io/pxfnrvgk-the-styleful/pen/WbvbEKV)|
| 32 | Melanie |[Codepen](https://codepen.io/pnrcspte-the-animator/pen/KwpwXVM)|
| 33| WAWATA|[Codepen](https://codepen.io/wa-wa-GNOHC-WA-Wa/pen/Kwpwvrw)|
| 34 | WEIWEI |[Codepen](https://codepen.io/weiwei93/pen/xbGbgPK)|
| 35 | Owl666 |[Codepen](https://codepen.io/JenHuang/pen/OPVPxKR?editors=1100)|
| 36 | ggininder |[Codepen](https://codepen.io/wei900221/pen/JodoOgX?editors=1100)|
|37|蛋殼|[Codepen](https://codepen.io/weybrian/pen/dPoPJZV)
| 38 | 阿龍 |[Codepen](https://codepen.io/Nemo-Lin/pen/XJbJVLM)|
|39|LisaWang|[Codepen](https://codepen.io/mnbfkkvb-the-lessful/pen/MYwYQjp)|
| 40 | Cyan66 |[Codepen](https://codepen.io/Cyan66/pen/OPVPvXW)|
| 41 | FangFang |[Codepen](https://codepen.io/Fang-the-selector/pen/ogXgqZN)|
| 42 | carrie0416 |[Codepen](https://codepen.io/Hong-Carrie/pen/emNmMKX)|
| 43 | jean_ke |[Codepen](https://codepen.io/Jean-Ke/pen/WbvbJea?editors=1100)|
| 44 | zhe |[Codepen](https://codepen.io/dotheright/pen/zxGxjvG)|
| 45 | HawkeyeLin | [Codepen](https://codepen.io/long-long/pen/gbpbzbo) |
| 46 | Holly | [Codepen](https://codepen.io/LEE-HOLLY/pen/RNPNMQo) |
| 47 | Zing | [Codepen](https://codepen.io/TZU-YIN-WANG/pen/NPqPMbe) |
| 48 | Chuang |[Codepen](https://codepen.io/uidoytjq-the-solid/pen/gbpbzPv?editors=1100)|
| 49 | Hugh |[Codepen](https://codepen.io/Hugh-Chen/pen/raVaKVm)|
| 50 | kelsonhouse |[Codepen](https://codepen.io/Kelson-House/pen/ZYGYRaJ?editors=0010)|
| 51 | Michelle |[Codepen](https://codepen.io/bastar_dize/pen/raVaQzo)|
| 52 | cks40660 |[Codepen](https://codepen.io/CKS40660/pen/raVaPZJ)|
|53|小趴|[Codepen](https://codepen.io/papa2415/pen/gbpbEwM)
|54|登登登|[Codepen](https://codepen.io/Duncanin/pen/pvJvYwV)|
| 55 | tina01170 |[Codepen](https://codepen.io/tina-huang-the-bashful/pen/EajaMpB)|
| 56 | Jane |[Codepen](https://codepen.io/jkmx/pen/ZYGGJGZ)|
| 57 | 消波塊 |[Codepen](https://codepen.io/PaulHsiao/pen/xbGGezO)|
| 58 | klaus chen |[Codepen](https://codepen.io/Klaus-Chen/pen/ogXNRgP?editors=1100)|
| 59 | wei_0982 |[Codepen](https://codepen.io/nico-lai/pen/KwpwYJK)|
| 60 | Jessie_Yu | [Jessie_Yu 的 Codepen](https://codepen.io/bakyfkso-the-looper/pen/VYLebbr)|
| 61 | kent_31665 |[Codepen](https://codepen.io/kentlee406/pen/KwpVGVE)|
| 62 | Leonard |[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/bNdpOvR)|
| 63 | William Hsieh |[Codepen](https://codepen.io/lsaimqxa-the-vuer/pen/VYLpwZY?editors=1100)|
| 64 | mercury2508. |[Codepen](https://codepen.io/Mercury2508/pen/NPqpPNo)|
| 65 | Astrid |[6/7](https://codepen.io/astrid321654/pen/xbGLBdW)|
| 66 | 禹成林 |[Codepen](https://codepen.io/useirin/pen/LEVyzym)|
| 67 | haohaoliao |[Codepen](https://codepen.io/tqdtaouh-the-styleful/pen/GgJMJoO)|
| 68 | ann.328 |[Codepen](https://codepen.io/yqmegupa-the-styleful/pen/xbGYxjg)|
| 69 | Rogan |[Codepen](https://codepen.io/RoganHsu/pen/YPXJKMv)|
| 70 | JiaMori |[Codepen](https://codepen.io/jiamori/pen/zxGmxeg)|
| 71 | 叮咚|[Codepen](https://codepen.io/pinchieh-lin/pen/GgpreeL)|
<!--
| number | name |[Codepen]()|
-->