--- title: 前端程式筆記-HTML-表單+From2.0+html5新功能 tags: 程式筆記 --- 前一篇是https://hackmd.io/@sSA6NW2ZToCxgSaVETWNCg/SyKmuh76I 開工~表單-先建立一個form.html ![](https://i.imgur.com/mtj0mp7.jpg) 設定是password大出來的字就是**** ![](https://i.imgur.com/NvC2dtp.png) 標準的登入介面: ![](https://i.imgur.com/vdUi2OQ.jpg) 程式碼: https://gist.github.com/jzs2home/47bc4a34eca074d3ebb0e5fa81ffbb6c --- 加入name=帳號+密碼顯示在網址上有? ![](https://i.imgur.com/EM1P8VQ.jpg) KEY完就會自動顯示在上面(後面會有隱藏版的) ![](https://i.imgur.com/LeHBb7L.jpg) --- 1.選是男生還是女生(radio是圓形的按紐) ![](https://i.imgur.com/9A9krap.png) 結果 ![](https://i.imgur.com/0PDO0rW.jpg) 2.請幫我記住密碼 checkbox是V盒子 ![](https://i.imgur.com/4nmjOFz.jpg) 結果 ![](https://i.imgur.com/XW0dn6N.jpg) 3.留言欄 ![](https://i.imgur.com/ChmqX8i.jpg) 結果 ![](https://i.imgur.com/Im4t9FT.jpg) 要變大=增加行數+列數 ![](https://i.imgur.com/fDgmVmT.jpg) 結果 ![](https://i.imgur.com/G2dR4Do.jpg) --- 4.選擇(有的瀏覽器會看不到)-第一行不是顯示name 名稱 ![](https://i.imgur.com/E8GHoDm.jpg) 結果 ![](https://i.imgur.com/FB7sjJx.png) --- 5.選擇日期max顯示最大日(用在GOOGLE看的到) ![](https://i.imgur.com/nF3Lh7T.jpg) 結果-日期一定要打2020-06-16的格式 ![](https://i.imgur.com/hWiBNc0.png) --- html4和5的差別在<!doctype html>這句 doctype要變大寫<!DOCTYPE html> css的部分變少只剩: ![](https://i.imgur.com/2AOYYA6.jpg) 比IE9低的瀏覽器版本需增加代碼:https://kknews.cc/zh-tw/code/pp5opap.html html5有把網頁分區塊:http://mepopedia.com/forum/read.php?804,45304 --- From2.0 1.在框框打第一個字就有出現提示字+有箭頭可以下拉 ![](https://i.imgur.com/8kVMmrm.png) 2.顏色-可以自己選 ![](https://i.imgur.com/BQF0Db5.png) 3.日期 ![](https://i.imgur.com/Uyvisdt.png) 4.打EMAIL時沒有@就會反紅 ![](https://i.imgur.com/3uzzPbF.png) 5.限定數字最大-最小 ![](https://i.imgur.com/hXRmB4b.jpg) 程式碼: ![](https://i.imgur.com/Yb7ufUE.png) --- 確認檔案都放入html的資料夾 ![](https://i.imgur.com/kKEYGX7.jpg) 1.HTML5放入聲音(mp3檔/mpeg的地方也可以改成ogg) 2.HTML5放入影片(mp4檔) ![](https://i.imgur.com/PFsSaaT.jpg) 程式碼: ![](https://i.imgur.com/72obbXB.png) --- HTML的作品集放在:https://medium.com/@hopeful_beige_reindeer_774/%E7%A8%8B%E5%BC%8F%E7%AD%86%E8%A8%98-%E7%AC%AC34%E9%80%B1-5f4c27717b09