iT邦幫忙

2025 iThome 鐵人賽

DAY 13
0

有些網站可能需要使用者提供資料,html裡是用form來實現,前面提過的select和button,text-area都可以看做表單的一員

<form action="#" method="post"></form>

當表單提交後,action就決定提交後的表單要送到甚麼位址
method,決定了資料提交的方式,主要用get和post兩種,get用在資料小且不重要的,post用在資料大或重要資訊

<form action="#" method="dialog">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <label for="age">Age:</label>
    <input type="number" id="age" name="age" required>
    
        <input type="radio" id="male" name="gender" value="male" required multiple>
    <label for="male">Male</label>
        <input type="radio" id="female" name="gender" value="female" required>
    <label for="female">Female</label>

    <input type="submit" value="Submit">
</form>

label當作補充input的標籤,label裡的for與要補充的input id需要一致
input type="":決定input能輸入什麼屬性,text文字
password:輸入文字,但是內容不可見
https://ithelp.ithome.com.tw/upload/images/20250927/20178696xGWl7lkaDz.png

email:信箱
number數字
submit產生能提交表單的按鈕
radio選擇按鈕,被選擇後的按鈕呈現藍色
checkbox確認框
https://ithelp.ithome.com.tw/upload/images/20250927/201786962n01ybWgGl.png

input最後的required表示此物件必填,如果不輸入直接提交表單會出現提示,value在input裡面像是表達該資料的值,提交後才能知道提交的資料有什麼意義,基本上form內的物件都需要用到value,文字輸入框如果有給value,那麼value的內容就會是input的默認文字,
https://ithelp.ithome.com.tw/upload/images/20250927/20178696hRTGZHGiaC.png


上一篇
DAY12CSS選擇
下一篇
day14Html背景
系列文
HTML&CSS30天修煉14
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言