4.HTML_4
1. input标签：一堆type
- text:文本输入框， 默认
- value属性：值
- maxlength: 最大输入个数
- size: 显示的个数（超级不准）
- placeholder: 默认显示灰色的 HTML5
<input maxlength="20" size="10" placeholder="。。。请输入" />
- submit: 提交按钮: value是文本
<button>也能提交， 内容就是按钮的文本
- password: 密码输入框
<form action="afa">
<input name="aaa" />
<input type="password" name="psd" />
<a href="javascirpt:void(0)" onclick="abc(this)"><img src="../imgs/a19e20d7.bmp.bmp" width="50px" height="50px" /></a>
男女：
<input type="radio" name="sex" value="男" />
<input type="radio" name="sex" value="2" checked />女
喜好
<input type="checkbox" name="like" value="LOL" checked />LOL
<input type="checkbox" name="like" value="2" checked />DNF
<input type="checkbox" name="like" value="CSGO" />CSGO
<input type="submit" />
<button>提交</button>
<input type="reset" value="重置1s" />
<input type="button" value="按钮" />
</form>
<script>
var flg = false;
function abc(ele) {
// debugger
if (flg) {
ele.children[0].src="../imgs/a19e20d7.bmp.bmp"
// byName返回数组
document.getElementsByName("psd")[0].type="password"
} else {
ele.children[0].src="../imgs/eye.svg"
document.getElementsByName("psd")[0].type="text"
}
flg = !flg;
}
</script>
-
button: 普通按钮
-
reset: 重置按钮
-
radio: 单选
-
必须有name才是一组
-
必须有value才能区分提交的参数
男女： <input type="radio" name="sex" value="男" /> <input type="radio" name="sex" value="2" />女
-
-
checkbox:多选
- 必须有name是一组
- 必须有value才能区分提交的参数（服务拿数组来接收）
checked 默认选中
<input type="checkbox" name="like" value="LOL" checked />LOL <input type="checkbox" name="like" value="2" checked />DNF <input type="checkbox" name="like" value="CSGO" />CSGO <input type="submit" />
<form action="afa"> <input name="aaa" /> <input type="password" name="psd" /> <input type="submit" value="提交" /> <button>提交</button> <input type="reset" value="重置" /> <input type="button" value="按钮" /> </form> -
file： 文件上传
–一堆HTML5的,有很多浏览器不支持。多数引入第三方插件来做
- color: 选色卡
- range： 范围
- number; 数值
- email：邮箱
- .Date…： 日期
- search ： 有关闭的输入框
- process: 进度条
<!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.0">
<title>Document</title>
</head>
<body>
<form action="aa">
<input type="file" name= />
<button id="aaa1">随便坐的</button>
<input type="color" value="#FF0000" onchange="colorchange(this)" />
0
<input type="range" min=0 max="100" step="2" name="a2" value="100" onchange="rangechange(this)" />
<input type="submit" onclick="return addni()" value="+" />
<progress min="0" max="100" value="50"></progress>
<input type="number" min="0" max="100" step="10" />
<input type="email" />
<input type="date" />
<input type="url" />
<input type="search" value="查询" />
<!-- -->
<script src="../datepicker/WdatePicker.js"></script>
<link rel="stylesheet" href="../datepicker/skin/WdatePicker.css" >
<input type="text" class="Wdate" onclick="WdatePicker()" />
<!-- -->
<span id="a3">100</span>
</form>
<script>
var n = 0;
var interesting = setInterval(progressloading , 300);
function progressloading() {
document.getElementsByTagName("progress")[0].value = ( n =n + parseInt(Math.random() * 10)) % 100
if (n >= 100) {
n = 100;
// alert("加载完成");
clearInterval(interesting)
}
}
// 内容改变的时候触发
function colorchange(ele) {
// document.body.style.backgroundColor=ele.value
// 根据ID获取元素
document.getElementById("aaa1").st bor=ele.value
// document.getElementById("aaa1").style= "background-color: " + ele.value;
}
function rangechange(ele) {
document.getElementById("a3").innerHTML = ele.value;
// opacity透明度 0-1
document.getElementById("aaa1").style.opacity=ele.value / 100
}
function addni() {
document.getElementsByName('a2')[0].value = parseInt(document.getElementsByName('a2')[0].value) + 2;
document.getElementById("a3").innerHTML = document.getElementsByName('a2')[0].value;
return false;
}
</script>
</body>
</html>
