HTML form 表單元素

<form>包 label for & input name+id+type </form>

麻瓜學習歷險記
4 min readJul 19, 2021

外層需要使用 <form> 標籤

<form>
...
</form>

完整的表單範例:

<form>
<label for="name">姓名</label> **說明標題**
<input id="name" type="text">
<input name="submit" type="submit" value="送出">
**value:用來指定表單元素的初始值
</form>

基本表單控制元素 label & input:

label:說明標題

input:與label綁在一起用, 用來輸入依據label要的內容,

有不同功能:點我查看更多 type 種類
type 屬性指明不同的功能,沒有結尾標籤、和 img 一樣都是單標籤

寫法一

<label for="**name**">姓名:</label> 
<input type="text" id="**name**" name="name">

寫法二:

<label for="name">
姓名: <input type="text" id="name" name="name">
</label>

label for 屬性與 input id 屬性對應:點擊 label 文字時可以讓對應的 input 變成 focus 狀態

input name=”like”與 radio/checkbox 運用:

  • name:表單元素都有一個 name 屬性,用來指定傳送給後端的資料要用什麼名稱。 也會用在 radio 或是 checkbox 當作群組,同一群組的 input 需要使用相同的 name。
<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">

input value=”預設值”:表單預設值

<input name="text" type="text" value="我的預設值">

input placeholder=”請填寫姓名”:提示文字

<input name="name" type="text" placeholder="請填寫姓名">

input disabled:用來“禁用”該表單元素

<input name="submit" type="submit" value="送出">
<input name="submit" type="submit" value="送出" disabled>

input type=“submit”:通常用於“送出”

可以加上 name 也可以不加,
當如果一個表單有多個 submit 按鈕的時候就需要使用 name,
讓後端可以知道使用者點擊了哪個按鈕
可以參考這篇

題目

請做出以下圖示中的表單

提示:

  • 每個 label 都需要對應到相對的 input
  • 一共有 6 種不同的 type
  • 性別中的「男」「女」一次只能擇一選擇,預設為「男」,可以使用 checked 屬性

答案:

https://codepen.io/hoick/pen/JjNJMJK

--

--

麻瓜學習歷險記
麻瓜學習歷險記

Written by 麻瓜學習歷險記

對於學習【前端】跟【產品知識】很有興趣的【設計】,因為想更有架構的去形容事物。🗒這邊是我放讀書內容的重點筆記,平常都筆記在Notion裡,想說放在公開分享,有緣的人可以用到就好了🙌

No responses yet