HTML5 基礎教程
HTML 介紹HTML 元素HTML 屬性HTML 文字樣式元素HTML 水平線HTML 清單元素HTML +CSSHTML +JavascriptHTML 超連結HTML 檔案路徑HTML <!-- 註解 -->HTML 特殊文字HTML 顏色HTML 區塊元素與佈局XHTMLHTML5 多媒體教程
HTML <table>表格HTML <iframe>線內框架HTML <img> 圖片HTML <video> 影片HTML <audio> 音樂HTML5 表單教程
HTML <form> 表單HTML 各種表單元素HTML <input>HTML <input>屬性HTML5
HTML5 介紹HTML5 支援HTML5 新元素HTML5 正確語法HTML5 Graphics
HTML5 CanvasHTML5 SVGHTML5 Google Maps注意
- 以下的程式碼皆是寫於<body>與</body>標籤之內。
- 程式碼的示範，已由本網站「樣式表自動修飾」，實際測試將依各家瀏覽器「預設樣式表不同而有差距」。
<input>標籤可利用不同的 type 屬性，製成不同功用的表單元件。
單行文字輸入 text
- 你的名字是？<input type="text"><br>
- <input type="text" placeholder="你的名字是？"><br>
- <input type="text" value="你的名字是？">
- 行2：placeholder屬性作為提示之用。
- 行3：value屬性直接設定<input>內的值。
密碼輸入 password
- 輸入密碼：<input input type="password">
- 行1：type="password" 使用於密碼輸入欄位，以防止偷窺。
表單送出 submit
- <form action="/html/form/ex-1.php" method="get">
- 哪個學校最棒？<br>
- <input type="radio" name="school" value="tfg">北一女中<br>
- <input type="radio" name="school" value="zsgh" checked>中山女中<br>
- <input type="radio" name="school" value="cmsgh">景美女中<br>
- <input type="submit" value="傳送">
- </form>
- 行1：action 值為執行程式，檔案路徑參考。method 值為傳送方法，有 get 及 post 兩種。
表單重置 reset
可將使用者輸入過資料，還原成預設值。
- <form>
- 哪個學校最棒？<br>
- <input type="text">
- <input type="reset" value="重置">
- </form>
單選圓鈕 radio
- 哪個學校最棒？<br>
- <input type="radio"name="school"value="tfg">北一女中<br>
- <input type="radio"name="school"value="zsgh"checked>中山女中<br>
- <input type="radio"name="school"value="cmsgh">景美女中
- 行1：同一組圓鈕，應使用同一個name值。value值用來給JS抓取，並不影響顯示。
- 行2：checked用來設定預設選取。其完整寫法為checked="checked"。
勾選按鈕 checkbox
- <form>
- 哪個學校最棒？<br>
- <input type="checkbox"name="school1"value="tfg">北一女中<br>
- <input type="checkbox"name="school2"value="zsgh"checked>中山女中<br>
- <input type="checkbox"name="school3"value="cmsgh">景美女中
- </form>
- 行3,4,5：checkbox name值不可相同，因為用name抓checkbox值時有多個選項，會無法抓取。與單選圓鈕radio不同。
HTML5 新增更多屬性值
以下所介紹的屬性值皆為 html5 新增，故尚無法支援所有瀏覽器。
顏色選取 color
此為 HTML5 新增的屬性值，支援主流瀏覽器。(IE11以前, Safari9.1 不支援)
此為 HTML5 新增的屬性值，可用以選擇日期。(firefox, IE11以前 不支援) 除了可以選擇日期外，HTML5 也有可同時選擇時間及日期的屬性值，但無法選擇時區。(firefox, IE12以前 不支援) HTML5 也有提供只選擇時間的屬性值，但無法選擇時區。(firefox, IE12以前 不支援) 另外 HTML5 也有提供選取月分的屬性值。(Firefox, IE11以前 不支援) 可選取年份及第幾週。(Firefox, IE11以前 不支援) 此為 HTML5 新增的屬性值，可用於自動判斷電郵地址是否符合正確格式。(Safari 不支援) 部分的智慧型手機會在認定這個元素後，鍵盤上會有".com"的字樣提供選擇。 此為 HTML5 新增的屬性值，可用於自動判斷網站地址是否符合正確格式。(IE9以前 不支援) 部分的智慧型手機會在認定這個元素後，鍵盤上會有".com"的字樣提供選擇。 此為 HTML5 新增的屬性值，可用於數字輸入區塊。(IE9以前 不支援) 也利用先前介紹的 max 和 min 屬性限制最大最小值。 此為 HTML5 新增的屬性值，可用於輸入那些正確值並不重要的數字(像是滑塊元件)，預設公差為 1。(IE9以前 不支援) 此為 HTML5 新增的屬性值，總之就是長的很像搜尋欄位。每種瀏覽器都有不同的預設樣式。 此為 HTML5 新增的屬性值。(只有 Safari8以後 支援) 常見「限制」屬性列表，有些是 HTML5 新增屬性： 以下用數字滑桿做試範。此區域可鍵入 0~87 並以 3 為公差選取顏色：<input type="color">
日期選取 date
選取日期：<input type="date">
選取 2017/05/20 之後的日期：
<br/>選取 2017/05/20 之前的日期：
日期-時間選取 datetime-local
<input type="datetime-local">
時間選取 datetime-local
<input type="time">
月分選取 month
梅花梅花幾月開：<input type="month">
星期選取 week
今天是今年的第幾週：<input type="week">
電郵地址 email
輸入電郵：<input type="email">
網站地址 url
輸入地址：<input type="url">
數字 number
可輸入0~87：<input type="number" max="87" min="0" style="width:50px;">
數字滑桿 range
<input type="range" max="87" min="0">
搜尋欄位 search
<input type="search">
電號號碼 tel
<input type="tel">
input「限制」屬性
屬性名稱 解釋 disabled 此屬性會讓元素無法被用戶使用 max 指定最大值 maxlength 指定最大字元數 min 指定最小值 pattern 指定正規表達式為屬性值，可過濾輸入內容。 readonly 此欄位只可讀而無法改變輸入值 required 此欄位必填 size 設定欄位寬度，值為「字元數」 step 可輸入範圍內，數字之間隔，可視為「公差」 value 設定此欄位的預設值 輸入數字：<input id="
值：<span id="
<script>
$(function(){
});
</script>