密碼文字輸入欄位和text 的差別是，使用者輸入的內容不會被明碼顯示在螢幕畫面中。
. 顯示結果：. 試著 ...
HTML語法教學HTML編輯器什麼是HTML標籤HTMLDOCTYPEHTMLHTML全域屬性HTML註解HTML
HTML
網頁標題HTML<meta>元資訊HTML<style>CSSHTML<link>HTML<script>JSHTML<noscript>HTML<base>HTML<body>HTML<p>段落HTML<br>換行HTML空白字元HTML<img>圖片HTML<a>超連結HTML<h1>-<h6>標題HTML項目列表清單HTML<table>表格HTML<form>表單HTML<input>表單元件HTML<textarea>HTML<select>下拉式選單HTML<button>表單按鈕HTML<label>HTML<fieldset><legend>HTML<div>HTML<span>HTML<strong>強調重要性HTML<em>對內容著重強調HTML<mark>突顯高亮文字HTML<hr>水平分隔線HTML<iframe>內嵌框架HTML<frame>框架HTML<embed>嵌入HTML<object>嵌入HTML<blockquote>區塊引用文字HTML<q>行內引用文字HTML<pre>預先格式化HTML<code>程式碼HTML<ins>插入的文字HTML<del>刪除的文字HTML<center>置中什麼是HTML5HTML<video>影片播放HTML<audio>音樂播放HTML語意結構區塊HTML<nav>導航連結區塊HTML<article>內容獨立完整的區塊HTML<section>群組區塊HTML<aside>側邊欄HTML<main>網頁主要區塊HTML<header>標頭/標題區塊HTML<footer>結尾/頁尾區塊HTML<datalist>輸入資料選擇清單HTML<figure><figcaption>HTML<hgroup>多級別標題群組HTML<canvas>繪圖畫布HTML<picture>響應式圖片HTML<output>HTML表單元件-<input>標籤(tag)<input>標籤可以說是表單<form>裡面最重要的標籤了，<input>可以用來建立非常多不同用途的表單控制元件(formcontrol)，主要是使用<input>上的type屬性來指明不同的用途功能，功能上例如可以用來做表單文字輸入欄位、表單核取方塊、表單送出按鈕等。<br><br><input>本身沒有內容是一個空元素，所以不需要closingtag。<br><br><input>標籤的屬性(attributes)name:欄位名稱<input>的name屬性用來指定送出去的該筆資料要用什麼名稱，目的是讓遠端伺服器才能透過明確定義好的名稱去取出對應的欄位值。<br><br><inputname="myfield">
可以想像當表單送出時，這個欄位會以類似"myfield=輸入內容"的形式傳給遠端伺服器。<br><br>value:指定初始值(defaultvalue)<inputvalue="我的初始值">
結果：disabled:將元件設定為禁用狀態<inputdisabled>
結果：試試點上面輸入框，應該會沒反應。<br><br>readonly:將元件設為唯獨不可更改內容的狀態<inputvalue="點我看看可否編輯"readonly>
結果：autocomplete:是否啟用瀏覽器自動完成功能值有on和off，預設是on。<br><br><inputautocomplete="off">
autofocus:當頁面載入後，自動聚焦在此欄位上如果有設定autofocus，當頁面載入後，瀏覽器會自動將畫面聚焦(focus)在該欄位上，但要注意，整個頁面所有的表單元件中只能有一個autofocus而已喔。<br><br><inputautofocus>
required:指定為必填欄位當送出表單時，如果聲明為required的欄位內容沒有填寫，會被瀏覽器提醒必填。<br><br><inputrequired>
<input>的type屬性:建立不同類型的表單元件<inputtype="text">文字輸入欄位<inputtype="text">
<input>的type預設上就是text，所以也可以省略不寫，沒type時其實就是text：<input>
顯示結果：輸入類型的input欄位還有這些屬性可以運用：maxlength:指定最多能輸入多少字minlength:指定最少需要輸入多少字size:一個數字指定欄位顯示寬度(characterswide)textinput的placeholder屬性:輸入的提示訊息<inputplaceholder="請輸入帳號">
顯示結果：<inputtype="password">密碼輸入欄位密碼文字輸入欄位和text的差別是，使用者輸入的內容不會被明碼顯示在螢幕畫面中。<br><br><inputtype="password">
顯示結果：試著輸入文字看看。<br><br><inputtype="checkbox">核取方塊核取方塊(checkbox/tickbox)用來讓使用者勾選某個選項是否成立，可以再搭配value屬性(預設值是"on")來指定當使用者勾選此方塊時要傳送給遠端伺服器什麼值。<br><br><inputtype="checkbox"name="subscribe"value="html-newsletter">SubscribetoHTMLnewsletter?<br>
<inputtype="checkbox"name="subscribe"value="js-newsletter">SubscribetoJavaScriptnewsletter?
顯示結果：SubscribetoHTMLnewsletter?SubscribetoJavaScriptnewsletter?當使用者勾選時，就會隨著表單送出像是"subscribe=newsletter"的資料；相反的，如果checkbox沒有被勾選，就不會有任何資料被送出。<br><br>對於不同的checkbox你可以用一樣的name也可以用不一樣，一樣的話，會送出像是"subscribe=html-newsletter&subscribe=js-newsletter"格式的資料。<br><br><inputtype="radio">選項按鈕radio(radiobutton)是選項按鈕，用來處理表單中有多選一時的情況，搭配value屬性(預設值是"on")來指定當使用者選取此選項時要傳送給遠端伺服器什麼值。<br><br>同一組radiobutton的選項，需要都是一樣的name。<br><br>請選擇你最喜歡的顏色：<br>
<inputtype="radio"name="color"value="red">red<br>
<inputtype="radio"name="color"value="green">green<br>
<inputtype="radio"name="color"value="blue">blue
顯示結果：請選擇你最喜歡的顏色：redgreenbluecheckbox和radio的checked屬性:預設勾選checked可以將該checkbox/radio的初始狀態設定為已選取。<br><br><inputtype="checkbox"checked>Subscribetonewsletter?
顯示結果：Subscribetonewsletter?<inputtype="submit">表單的送出按鈕(submitbutton)當使用者點了submitbutton就會送出表單給遠端的伺服器，用value屬性可以設定按鈕名稱。<br><br><inputtype="submit"value="SendRequest">
顯示結果：<inputtype="reset">重設表單狀態reset用來讓使用者點了可以重設表單內容回到初始狀態，而value屬性可以設定reset按鈕的名稱。<br><br><inputtype="reset"value="Reset">
<inputtype="hidden">隱藏資料欄位hidden是用來當你想傳送一些值回遠端server，但你不想或不需要讓使用者看見這些內容。<br><br><inputname="itemid"type="hidden"value="fwoxla">
<inputtype="image">圖片送出按鈕送出按鈕除了可以用前面提到的文字按鈕，也可以是圖片按鈕。<br><br>圖片按鈕可以搭配這些屬性使用：src:指定圖片位址alt:指定當圖片下載失敗時的替代文字width:指定圖片顯示寬度height:指定圖片顯示高度<inputtype="image"
src="/media/examples/login-button.png"
alt="Login"
width="100"height="30">
顯示結果：圖片送出按鈕還有一個特性是當送出表單時，會同時送出座標點(coordinates)(x,y)的額外資訊，表示使用者點擊了圖片中的哪個位置，座標軸是以圖片的左上角為(0,0)。<br><br>送出的資料格式會像是"x=52&y=55"，如果你有設定name名稱，例如name="position"，則送出去的資料格式會像是"position.x=52&position.y=55"。<br><br><inputtype="file">檔案上傳(fileupload)type="file"用來讓使用者可以從本機端選擇檔案上傳。<br><br>搭配accept屬性可以限制允許上傳的檔案類型(filetype)，可以用逗點分隔開多種允許類型，accept可以設定的值有：.檔案類型:例如.jpg,.pdf,.doc明確指定MIMEtype:例如image/jpeg,image/pngaudio/*:指任何聲音檔video/*:指任何影片檔image/*:指任何圖檔舉個例子：<inputtype="file"accept="image/*,.pdf">
顯示結果：搭配multiple屬性，一次可同時選多個檔案上傳：<inputtype="file"accept="image/*,.pdf"multiple>
顯示結果：搭配capture屬性，可以用來開啟使用手機的照相機鏡頭：<inputtype="file"capture>
再搭配accept使用會有不同效果：拍照上傳
<inputtype="file"accept="image/*"capture>
拍影片上傳
<inputtype="file"accept="video/*"capture>
用麥克風錄音上傳
<inputtype="file"accept="audio/*"capture>
還可以指定要開啟手機的前鏡頭或後鏡頭，設定capture的屬性值：user:指定要開啟前鏡頭environment:指定要開啟後鏡頭front(user)-前鏡頭
<inputtype="file"accept="video/*"capture="user">
back(environment)-後鏡頭
<inputtype="file"accept="video/*"capture="environment">
<inputtype="button">表單按鈕button通常用來搭配JavaScript來動態操作表單內容。<br><br><inputtype="button"value="ClickMe">
顯示結果：<inputtype="search">搜尋欄位搜尋的文字輸入框，和type="text"主要的差異是欄位用途在語意上更明確，有些瀏覽器可能也會針對搜尋框顯示不同的樣式。<br><br><inputtype="search"name="q">
<inputtype="tel">電話號碼輸入欄位type="tel"和type="text"主要的差異是欄位用途在語意上更明確，且在特定的device像是手機上會顯示針對電話號碼輸入的界面。<br><br><inputtype="tel">
<inputtype="url">網址輸入欄位type="url"和type="text"主要的差異是欄位用途在語意上更明確，且在送出表單之前，有支援的瀏覽器也會自動驗證(validate)使用者輸入的內容是不是合法的URL。<br><br><inputtype="url">
<inputtype="email">電子郵件輸入欄位type="email"和type="text"主要的差異是欄位用途在語意上更明確，且在送出表單之前，有支援的瀏覽器也會自動驗證(validate)使用者輸入的內容是不是合法的email。<br><br><inputtype="email">
multiple屬性用來聲明此欄位可以用逗號,分開輸入多組email：<inputtype="email"multiple>
<inputtype="date">日期輸入欄位type="date"用來建立一個日期輸入欄位，日期的格式為yyyy-mm-dd。<br><br>可以再搭配這些屬性使用：max:可以輸入的最晚日期min:可以輸入的最早日期step:設定一個數字，用來控制日期元件一次跳動的幅度；或在送出表單之前，瀏覽器會對日期欄位做驗證，日期需要符合step設定的跳動區間例子：<inputtype="date"
value="2020-04-20"
min="2020-04-01"
max="2022-04-30"
step="5">
顯示結果：<inputtype="time">時間輸入欄位type="time"用來建立一個時間輸入欄位，時間的格式為24小時制的hh:mm。<br><br>可以再搭配這些屬性使用：max:可以輸入的最晚時間min:可以輸入的最早時間step:設定一個數字，用來控制時間元件一次跳動的幅度；或在送出表單之前，瀏覽器會對時間欄位做驗證，時間需要符合step設定的跳動區間例子：<inputtype="time"
value="06:00"
min="02:00"
max="22:00"
step="5">
顯示結果：<inputtype="number">數字輸入欄位數字輸入欄位只允許輸入數字。<br><br>可以再搭配這些屬性使用：max:可以輸入的最大值min:可以輸入的最小值step:設定一個數字，用來控制數字元件一次跳動的幅度；或在送出表單之前，瀏覽器會對欄位做驗證，數字需要符合step設定的跳動區間例子：<inputtype="number"
step="10"
min="0"
max="1000">
顯示結果：number欄位在預設上，只能輸入整數，如果你想要能夠輸入小數點需要去調整step的屬性值，例如設定step="0.1"表示能輸入到小數點第一位；step="0.01"表示能輸入到小數點第二位，依此類推；step="any"則是用來表示可以輸入任何數字。<br><br><inputtype="range">數字範圍滑動選取欄位type="range"可以讓使用者用滑動的方式在一個數字區間內選擇出一個值，可以應用在對數字精準度要求不高的場景，像是調整音量大小。<br><br>可以再搭配這些屬性使用：max:範圍中可選的最大值min:範圍中可選的最小值step:設定一個數字，用來控制元件數字一次跳動的幅度；或在送出表單之前，瀏覽器會對欄位做驗證，數字需要符合step設定的跳動區間例子：<inputtype="range"min="-10"max="10">
顯示結果：<inputtype="color">顏色選擇器(colorpicker)type="color"用來讓使用者挑選顏色，顏色的格式為#rrggbb。<br><br>範例：<inputtype="color"value="#ff0000">
顯示結果：表單欄位驗證(patternvalidation)-pattern屬性text,date,search,url,tel,email和password等輸入欄位可以利用pattern屬性搭配正規表達式(regularexpression)來做表單欄位驗證。<br><br>語法：<inputpattern="正規表達式">
範例：<inputtype="text"pattern="[a-z]{4,8}">
<inputtype="time"pattern="[0-9]{2}:[0-9]{2}">
<inputtype="email"pattern=".+@beststartupever.com">
如果使用者輸入的內容不符合pattern，在表單送出去之前就會被瀏覽器驗證錯誤而擋下。<br><br></style>
Input type