在HTML網頁可使用輸入元素(Input element)<input>來定義輸入介面，讓使用者可以輸入資料。
<input>的樣式決定於type屬性的值，例如最常看到的輸入類型就是文字輸入欄位(Text field)，type="text"。
<input type="text"/>
在HTML顯示如下。
上面就是文字輸入欄位的type="text"的效果，這也是<input>的預設類型。
另外注意<input>屬於不用結尾標籤的元素，又稱空元素(Void elements)。
type值除了文字輸入text外，還有其他類型表列如下：
| type | 類型 | 效果 |
|---|---|---|
hidden |
隱藏欄位 | |
text(default) |
文字輸入欄位 | |
search |
搜尋欄位 | |
tel |
電話輸入欄位 | |
url |
URL輸入欄位 | |
email |
Email輸入欄位 | |
password |
密碼輸入欄位 | |
date |
日期輸入欄位 | |
month |
月份輸入欄位 | |
week |
星期輸入欄位 | |
time |
時間輸入欄位 | |
datetime-local |
日期時間輸入欄位 | |
number |
數字輸入欄位 | |
range |
範圍輸入滑桿 | |
color |
顏色輸入，色環表 | |
checkbox |
複選框 | |
radio |
選擇按鈕，單選框 | |
file |
檔案上傳按鈕 | |
submit |
提交按鈕 | |
image |
圖片按鈕 | |
reset |
重置按鈕 | |
button |
普通按鈕 |
除了type屬性，<input>元素還有很多其他屬性(attributes)（如name，value）以及方法(methods)等。不過有些屬性是某些type才有，在此就不一一表列。
通常<input>元素會放在<form>元素中一起使用，做為表單的資料輸入。當表單提交時，所屬的<input>的內容會一起被送出。
<input>預設的CSS如下，顯示方式為inline-block。
input {
-webkit-writing-mode: horizontal-tb !important;
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
cursor: text;
margin: 0em;
font: 400 13.3333px Arial;
padding: 1px 0px;
border-width: 2px;
border-style: inset;
border-color: initial;
border-image: initial
}
參考：
沒有留言:
張貼留言