input元素的各种type属性
submit、button、reset：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form>
名字： <input type="text" ><br><br>
邮箱： <input type="text" ><br><br>
<input type="submit" value="提交">
<input type="reset" value="重写">
<input type="button" onclick="msg()" value="点我！">
</form>
<script>
function msg(){
alert("你点什么！");
}
</script>
</body>
</html>
单选框：redio
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form>
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="male">女
</form>
</body>
</html>
如果两个input的name不同的话，那么单选框不会复制
复选框 checkbox：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form>
<input type="checkbox" name="darksoulsHero" value="太阳骑士">太阳骑士
<input type="checkbox" name="darksoulsHero" value="洋葱骑士">洋葱骑士
<input type="checkbox" name="darksoulsHero" value="金闪闪">金闪闪
</form>
</body>
</html>
时间和日期：
time：获取时间
date：获取日期
month：获取年月
week：获取星期
datetime-local：获取本地的日期和时间
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form>
<label>时间： <input type="time" name="time"></label>
<br><br>
<label>日期：<input type="date" name="date"></label>
<br><br>
<label>年月：<input type="month" name="month"></label>
<br><br>
<label>星期：<input type="week" name="week"></label>
<br><br>
<label>本地日期和时间：<input type="datetime-local" name="datatime-local"></label>
</form>
</body>
</html>
百分号编码：
也叫url编码，url中有些字符会引起歧义，所以需要制定规范来避免歧义，比如#3A代表冒号。
搜索框：search
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form>
<label>要搜索的<input type="search" ></label>
</body>
</html>
颜色选择框：color
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form>
<label>选颜色<input type="color"></label>
</body>
</html>
图像按钮：image
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form>
<label>点我<input type="image" src="img/a.png" alt="图片"></label>
</form>
</body>
</html>
将input元素隐藏起来：hidden
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form>
<label>傻子看不到后面的东西--》 <input type="hidden" ></label>
</from>
</body>
</html>
上传文件：file属性：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form method="post" enctype="multipart/form-data">
<label>上传文件： <input type="file" name="file"></label>
</from>
</body>
</html>
要设置下form的enctype，另外，需要注意以下几点：
- 指定上传的文件类型，用input元素的accept属性实现，比如accept=".jpg, .html"，不同类型间用逗号隔开，如果想表示所有的音频文件可以使用accept="audio/*",表示所有的视频文件用accept="video/ *"，表示所有的图像文件用accept="image/ *",还可以使用用mime类型。，但accept属性并不能严格的阻止用户上传其他类型的文件，用户还是可以上传其他类型的文件的。
- 如果想上传多个文件，需要用到input的multiple属性
限制数字输入：number
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form method="post">
<label>输入数字： <input type="number"></label>
</from>
</body>
</html>
限定数字输入范围：min、max和step
min限定最小值
max限定最大值
step限定增长步值
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form method="post">
<label>输入数字： <input type="number" min="10" max="50" step="3"></label>
</from>
</body>
</html>
数值滚动条：range
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form method="post">
<input type="range" value="1" min="1" max="100" step="10">
</from>
</body>
</html>
邮箱、电话、网址：e'mail、tel、url
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form method="post">
邮箱： <input type="email">
<br><br>
电话： <input type="tel">
<br><br>
网址： <input type="url">
<br><br>
<input type="submit" value="提交">
</from>
</body>
</html>
placeholder属性：
占位提示信息，
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form method="post">
邮箱: <input type="email" placeholder="只能填qq邮箱">
</from>
</body>
</html>
required属性：
指示该输入框必须填
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form method="post">
邮箱: <input type="email" placeholder="只能填qq邮箱" required>
<br><br>
<input type="submit">
</from>
</body>
</html>
size属性：
设置输入框的长度
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form method="post">
邮箱: <input type="email" placeholder="只能填qq邮箱" required size=10>
<br><br>
<input type="submit">
</from>
</body>
</html>
maxlength属性：
指定输入框可以输入的最多字符数
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form method="post">
邮箱: <input type="email" placeholder="只能填qq邮箱" required size=10 maxlength=5>
<br><br>
<input type="submit">
</from>
</body>
</html>
list属性和datalist元素：
用于实现数据列表，
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form method="post">
邮箱: <input type="email" placeholder="只能填qq邮箱" required size=20 maxlength=100 list="KB">
<br><br>
<input type="submit">
</from>
<datalist id="KB">
<option value="123456@qq.com">哈哈哈</option>
<option value="abcdef@11.com">嘻嘻嘻</option>
</datalist>
</body>
</html>
