[Back To Basic] HTML5 - Form Elements

<input>

屬性(attributes) - type

可以讓input用不同的方式顯示，預設是"text"

元素(elements) - <select>和<option>

兩個元素相互搭配可以定義出一個下拉清單

• <option>屬性(attributes) - selected

<option>是可以被選擇的選項，在有多個選項時，預設第一個選項會被選取。

也可用selected指定選取特定的選項。

• <select>屬性(attributes) - size 

可以設定同時可以看到的選項數量

• <select>屬性(attributes) - multiple

可以讓下拉選單"多選"

元素(elements) - <textarea>

可以設定多行的<input>

*.寬和高可以用HTML或CSS設定

• HTML - 屬性(attributes) - rows&cols

rows: 高度

cols:寬度

• CSS - width&height

rows <=> width

cols <=>height

元素(elements) - <button>

可以點擊的按鈕；type永遠要設為 type="button"，不同的瀏覽器可能會使用不同的預設type

瀏覽器不會顯示未知的元素(elements)，所以使用瀏覽器看不懂的元素並不會造成網頁毀損

HTML新元素(elements) - <datalist>

• <datalist>可以預先定義一組選項，再用下面這個規則設定input和datalist的關聯。
• <input>屬性(attributes) - list要等於<datalist>屬性(attributes) - id。

HTML新元素(elements) - <output>

可以做為計算的結果

• 給定output name屬性: <output name="x"></output>
• 藉由<form>屬性(attributes) - oninput 來將結果呈現在output
• 演算法寫在oninput上

source code