---
# System prepended metadata

title: HTML input 簡介
tags: ['HTML, CSS']

---

# HTML input 簡介
---
tags: HTML CSS relate
---

###### tags: `HTML, CSS`


![](https://i.imgur.com/IGJ3UAk.png)



--------------------



submit這是用來製作「按鈕」的，只需要在html當中輸入
 `<input type="提交">` 
就會有相對應的按鈕產生了

類似長這樣:
![](https://i.imgur.com/z5IlyUX.png)


value="需要修改的文字" 就可以修改裡面文字，像是我把它改成「確認」，只需要輸入

 `<input type="submit" value="確認">`


按鍵就會變成:

![](https://i.imgur.com/Z6wcmb1.png)


----------------------


text這個指令，也就是建立一個文字框
`<input type="text">`


就會出現如下的文字框:

![](https://i.imgur.com/SN4BO8Z.png)


placeholder則可以增加說明文字：

`<input type="text" placeholder="輸入文字" >`

我們的文字框當中就會填入placehoder等號後面的文字，一旦點選，這些文字就會不見

![](https://i.imgur.com/atLLvOu.png)

---------------


password 密碼欄位範例:

```
<form>
密碼欄位：<input type="password" name="密碼欄位">
</form>
```
呈現結果如:

![](https://i.imgur.com/goq7oo4.png)


-------

checkbox 勾選欄位製作 通常會搭配lable使用

 `<input type="checkbox">`
 
 
 呈現結果:
 
<input type="checkbox" id="cbox1" value="first_checkbox">