前端 HTML body標簽相關內容 常用標簽 表單標簽 form裏面的 input標簽介紹
阿新 • • 發佈：2019-04-02
meta itl 分享 ble png pat bubuko 單點 put
input標簽用於接收用戶輸入。可以利用input 可以做登錄頁面
input標簽是行內塊標簽
<input> 元素會根據不同的 type 屬性，變化為多種形態。
name屬性：表單點擊提交按鈕時，提交form表單時候，在url上顯示， 是一個key-value形式，註意和id的區別
| type屬性值 | 表現形式 | 對應代碼 |
|---|---|---|
| text | 單行輸入文本 | <input type=text" /> |
| password | 密碼輸入框 | <input type="password" /> |
| date | 日期輸入框 | <input type="date" /> |
| checkbox | 復選框 | <input type="checkbox" checked="checked" /> |
| radio | 單選框 | <input type="radio" /> |
| submit | 提交按鈕 | <input type="submit" value="提交" /> |
| reset | 重置按鈕 | <input type="reset" value="重置" /> |
| button | 普通按鈕 | <input type="button" value="普通按鈕" /> |
| hidden | 隱藏輸入框 | <input type="hidden" /> |
| file | 文本選擇框 | <input type="file" /> |
type屬性
text 文本輸入框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <metaname="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> </head> <body> <div> <form> <div> <input type="text"> </div> </form> </div> </body> </html>
在裏面輸入內容
password輸入密碼類型，可以輸入密碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> </head> <body> <div> <form> <div> <label for="user">用戶名:</label> <input id="user" name="username" type="text"> </div> <div> <label for="pwd">密碼:</label> <input id="pwd" name="password" type="password"> </div> </form> </div> </body> </html>
placeholder屬性 標簽上顯示內容
button是普通按鈕，只是一個按鈕裝飾用，需要配合Javascript使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> </head> <body> <div> <form> <div> <label for="user">用戶名:</label> <input id="user" name="username" type="text" placeholder="請輸入用戶名"> </div> <div> <label for="pwd">密碼 :</label> <input id="pwd" name="password" type="password" placeholder="請輸入密碼"> </div> <input type="button" value="提交"> </form> </div> </body> </html>
value 為按鈕加上文字
submit是提交按鈕,
可以把form表單提交到後臺或者指定url，提交form表單使用type="submit"按鈕
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> </head> <body> <div> <form> <div> <label for="user">用戶名:</label> <input id="user" name="username" type="text" placeholder="請輸入用戶名"> </div> <div> <label for="pwd">密碼 :</label> <input id="pwd" name="password" type="password" placeholder="請輸入密碼"> </div> <!-- submit是提交按鈕,可以把form表單提交到後臺或者指定url 提交form表單使用type=submit按鈕 --> <input type="submit" value="提交"> </form> </div> </body> </html>
前端 HTML body標簽相關內容 常用標簽 表單標簽 form裏面的 input標簽介紹