7/19(一) 每日任務

--- tags: 網頁切版直播班 - 2021 夏季班 --- # 7/19(一) 每日任務請大家開始學習 jQuery ，觀看 [此影片](https://www.youtube.com/watch?v=GVWOIP-HX70) 週四的每日任務將會有 jQuery 的題目來讓大家練習哩 --- 除了上方的 jQuery 影片，今天也想要帶大家了解 HTML 表單：form 這週首頁設計稿中有一部分就是表單的設計，如果想要使用表單元素記得外層需要使用 <form> 標籤 ```htmlembedded <form> ... </form> ``` **基本表單元素 label ＆ input：** label：用來給表單的控制元件一個說明標題。 input：有非常多不同的用途，主要是用 <input> 上的 type 屬性來指明不同的功能，[點我查看更多 type 種類](https://www.w3schools.com/tags/tag_input.asp)。另外要注意的是，input 並沒有結尾標籤，和 img 一樣都是單標籤。 label for 屬性與 input id 屬性對應：點擊 label 文字時可以讓對應的 input 變成 focus 狀態寫法一 ```htmlembedded <label for="name">姓名：</label> <input type="text" id="name" name="name"> ``` 寫法二： ```htmlembedded <label for="name"> 姓名: <input type="text" id="name" name="name"> </label> ``` **其他表單元素屬性：** * name：表單元素都有一個 name 屬性，用來指定傳送給後端的資料要用什麼名稱。也會用在 radio 或是 checkbox 當作群組，同一群組的 input 需要使用相同的 name。 ```htmlembedded <p>我喜歡：</p> <label for="ming">小明</label> <input name="like" id="ming" type="checkbox"> <label for="auntie">漂亮阿姨</label> <input name="like" id="auntie" type="checkbox"> <label for="jay">杰倫</label> <input name="like" id="jay" type="checkbox"> ``` <img src="https://i.imgur.com/xBuYvCT.png" width="250"> * value：用來指定表單元素的初始值 ```htmlembedded <input name="text" type="text" value="我的預設值"> ``` <img src="https://i.imgur.com/4VXoiCT.png" width="200"> * placeholder：用來指定表單元素的提示文字 ```htmlembedded <input name="name" type="text" placeholder="請填寫姓名"> ``` <img src="https://i.imgur.com/H9GBmQV.png" width="200"> * disabled：用來禁用該表單元素 ```htmlembedded <input name="submit" type="submit" value="送出"> <input name="submit" type="submit" value="送出" disabled> ``` <img src="https://i.imgur.com/R7MZNCE.png" width="150"> **完整的表單範例：** ```htmlembedded <form> <label for="name">姓名</label> <input id="name" type="text"> <input name="submit" type="submit" value="送出"> </form> ``` <img src="https://i.imgur.com/b4bhonN.png" width="300"> ## 題目請做出以下圖示中的表單 ![](https://i.imgur.com/ibUxMUv.png) 提示： * 每個 label 都需要對應到相對的 input * 一共有 6 種不同的 type * 性別中的「男」「女」一次只能擇一選擇，預設為「男」，可以使用 checked 屬性 ## 回報流程 1. 請將程式碼寫在 Codepen 並將連結貼至「回報區」中回報就算完成了喔～解答及回報方式請參考下方 ![](https://i.imgur.com/vftL5i0.png)  回報區 ---

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.