iT邦幫忙

2022 iThome 鐵人賽

DAY 17
0
<form action="/formprocess.php" method="post">

    <p>Name:</p>
    <p><input type="text" name="name" value="你的名字"></p>

    <p>Email:</p>
    <p><input name="species" type="text"></p>

    <p>Comments: </p>
    <p><textarea name="comments" rows="5" cols="20">你的留言</textarea></p>

    <p>請問你最有興趣學習的技術:</p>
    <p><input type="radio" name="interest" value="html"> HTML</p>
    <p><input type="radio" name="interest" value="css"> CSS</p>
    <p><input type="radio" name="interest" value="js"> JavaScript</p>

    <p><input type="submit" value="送出資料"></p>
    <select>
    <option>請選擇你最愛的寵物</option>
    <option>Dog</option>
    <option>Cat</option>
    <option>Hamster</option>
    <option>Parrot</option>
    <option>Spider</option>
    <option>Goldfish</option>
</select>
    

</form>
  • action: 用來指定一個位址 (URL),這個位址是告訴瀏覽器 (browser) 當 user 按送出表單後,要將表格的內容送去哪邊。
  • method: 用來指定資料傳輸時用的 HTTP 協議,最常用的是 get 或 post:
  • get: 會將表單資料放在 form action 請求的位址 URL 網址參數列 (URL GET parameters) 上面送出。get 通常用在資料量較小或非敏感的資料,因為資料會被放在網址中直接傳出,容易被直接看到資料。
  • post: 會將表單資料放在 HTTP 傳輸封包 body 中送出。post 通常用在表單資料量比較大、有夾帶檔案上傳 (file upload) 或隱私性考量的資料。
  • input type text 輸入文字
  • input type button 輸入按鈕
  • input type comments 留言方塊
  • input type radio 單選選單
  • input type submit 送出
  • input type e-mail 電子郵件
  • option選項
  • value 選項

上一篇
Day16 HTML表格
下一篇
Day18 HTML 額外標示
系列文
從筆記語法帶入網頁設計20
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言