1、
Bash
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--给下面range加个js效果试试-->
<script type="text/javascript">
window.onload = function(){
var ttyy =
document.getElementById("ttyy");
// 给滑块加鼠标移动事件
ttyy.onmousemove = function(){
// 获得滑块的值,写入到title中：拉动浏览器上方会显示值的数字
document.title = ttyy.value;
}
// 给颜色面板绑定onchange事件
document.getElementById("yanse").onchange = function(){
alert(this.value);
}
}
</script>
</head>
<body>
<!--表单放在form里面的-->
<form action="hd.php">
用户名：<input type="text" />
<br /><br />
密码：<input type="password" />
<br /><br />
<!--html5新加的邮箱-->
邮箱：<input type="email" />
<br /><br />
网址：<input type="url" />
<br /><br />
<!--类似购物加商量数量的东西，number数量; 号码; 数字;-->
<!--限制min最小是1，max最大20， step每次数字变化是3 value默认值是1开始-->
<input type="number" min="1" max="20" step="3" value="1"/>
<br /><br />
<!--范围; 排列-->
<input type="range" min="0" max="20" step="2" value="4" id="ttyy"/>
<br /><br />
<input type="date" />
<br /><br />
<!--search这是html5语义化的标签 搜索框的新写法-->
<input type="search" />
<br /><br />
<!--选择颜色面版-->
<!--用上面的js来捉颜色-->
<input type="color" id="yanse"/>
<br /><br />
<input type="submit" />
</form>
</body>
</html>上面代码效果图片：
2、
Bash
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--类似百度搜索框输入的效果-->
<!--意思是这个input标签要关联ID是dduu这个列表-->
<input type="text" list="dduu"/>
<!--datalist标签 加入这个在输入列表的时候有一个字相同(相关的关联词)就有提示作用-->
<!--加个id="dduu"和列表相关起来-->
<datalist id="dduu">
<option value="肇庆市">肇庆市</option>
<option value="端州区">端州区</option>
<option value="鼎湖区">鼎湖区</option>
<option value="广宁县">广宁县</option>
<option value="怀集县">怀集县</option>
</datalist>
<br /><br />
<!--autofocus 字面解释：自动聚集的，自动对光的;-->
<!--autofocus标签 自动获取焦点（打开网页鼠标光标会自动出现在哪里的意思）-->
<input type="text" />
<!--我想要光标自动在第二个input上显示，加个autofocus标签 来实现-->
<!--autofocus="autofocus"这样也行 直接autofocus-->
<input type="text" autofocus="autofocus" />
<br /><br />
<!--form属性 提交form标签外的表单-->
<form action="" id="yyuu">
用户名：<input type="text" />
密码：<input type="password" />
<input type="submit" />
</form>
<!--举例上面这个form以外的表单-->
<!--上面的id="yyuu" 和下面的 form="yyuu" 相关联起来// 把下面的input指定属于上面的form表单的-->
邮箱：<input type="email" form="yyuu"/>
<br /><br />
<!--传统的上传只能一次上传一个文件-->
<input type="file" />
<br /><br />
<!--multiple 多重的; 多个的; 设置multiple后可以设置多个文件-->
多文件上传multiple属性
<input type="file" multiple/>
<br /><br />
表单提示placeholder
<!--placeholder就是提示文字-->
<input type="text" placeholder="请输入内容"/>
<br />
<br />
<br />
<br />
<!--pattern 模式;花样-->
通过正则表达式验证表单 表单验证pattern属性
<form action="">
<!--required 必须的， 需要; 要求-->
<input type="text" placeholder="表单内容不能为空" required/>
<br /><br />
<input type="text" pattern="\d\d\d\d" />
<br /><br />
<!--pattern="\d\d\d\d"必须要有4个数字才能提交-->
<input type="submit" />
</form>
</body>
</html>上面代码效果图片：
原文链接：https://www.qiquanji.com/post/7692.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知