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"> <meta name="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>
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>