1、带箭头加减的输入框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单控件 ——带箭头加减的输入框</title>
</head>
<body>
<form action="http:www.baidu.com">
<input type="number" name="number" value="" /><br /><br />
<input type="submit">
</form>
</body>
</html>
2、颜色选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="http://www.baidu.com">
<input type="color" name="color" value="" /><br /><br />
<input type="submit">
</form>
</body>
</html>
3、进度条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单控件——滚动条</title>
<script>
window.onload = function(){
var oText = document.getElementById('txt1');
var oSpan = document.getElementById('s1');
oText.onchange = function(){
oSpan.innerHTML = this.value;
}
}
</script>
</head>
<body>
<form action="http://www.baidu.com">
<input id="txt1" type="range" max="80" min="20" step="10" name="range" value="" /> <span id="s1">0</span><br /><br />
<input type="submit">
</form>
</body>
</html>
4、时间选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时间选择器</title>
</head>
<body>
<form action="http://www.baidu.com">
<input type="date" name="date" value="" /><br /><br />
<input type="week" name="week" value="" /><br /><br />
<input type="time" name="time" value="" /><br /><br />
<input type="submit">
</form>
</body>
</html>
5、email地址判断表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="httP://www.baidu.com">
<input type="email" name="email" value="" />
<br /><br />
<input type="submit" />
</form>
</body>
</html>
6、网站判断表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="http://www.baidu.com">
<input type="url" name="url" value=""><br /><br />
<input type="submit" />
</form>
</body>
</html>
7、表单使用正则表达式验证QQ号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="http://www.baidu.com">
<input type="text" pattern="[1-9]\d{4,12}" required name="qq" value="" />
<input type="submit" />
</form>
</body>
</html>
8、输入框提示文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="http://www.baidu.com">
<input type="text" pattern="[1-9]\d{4-12}" autofocus placeholder="提示文字" required name="qq" value="" />
<br /><br />
<input type="submit" />
</form>
</body>
</html>
9、带删除X的搜索框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="http://www.baidu.com/" novalidate>
<input type="search" name="search" value="" />
<br /><br />
<input type="submit" />
</form>
</body>
</html>