本帖最后由 啊窝额 于 2019-4-4 13:52 编辑
表单新增的属性- placeholder 占位符
- autofocus 获取焦点
- multiple 文件上传多选或多个邮箱地址
- autocomplete 自动完成，用于表单元素，也可用于表单自身
- form 指定表单项属于哪个form，处理复杂表单时会需要
- novalIDAte 关闭验证，可用于<form>标签
- required 验证条件，必填项
- pattern 正则表达式 验证表单
[HTML] 纯文本查看 复制代码 [mw_shl_code=html,true][mw_shl_code=asm,true]
autocomplete:属性规定表单是否应该启用自动完成功能。autocomplete 属性适用于 <form>，以及下面的 input 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。<br>
<form action="" autocomplete="on">
autofocus定位文本框焦点：<input type="text" autofocus> <br>
placeholder设置文本框默认提示：<input type="text" placeholder="请输入***"><br>
email邮件类型自带验证和提示：<input type="email"> <br>
required属性设置非空特性：<input type="tel" required><br>
pattern设置验证规则：<input type="tel" name="tel" required pattern="^(\+86)?1[358]\d{5}$"><br>
multiple多文件选择：<input type="file" multiple><br>
<input type="submit" value="提交"/></form>
表单的输入类型- email： 输入email格式
- tel： 手机号码
- url： 只能输入url格式
- number： 只能输入数字
- search： 搜索框
- range： 范围，可以进行拖动，通过value进行取值
- color ：拾色器，通过value进行取值
- time ：时间
- date： 日期 不是绝对的
- datetime： 时间日期
- month： 月份
- week： 星期
说明：部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用。表单新增的事件：- oninput 用户输入内容时触发，可用于移动端输入字数统计
- oninvalid 验证不通过时触发
[HTML] 纯文本查看 复制代码 [mw_shl_code=html,true]
<script>
/*oninput可以监听用户的每一次输入*/
document.getElementById("name").oninput=function(){
console.log(this.value);
}
/*监听键盘弹起，每一个键盘弹出触发一次*/
document.getElementById("name").onkeyup=function(){
console.log("---"+this.value);
}
/*当指定表单元素验证不通过时触发*/
document.getElementById("phone").oninvalid=function(){
console.log("验证不通过");
}
</script>
新增表单元素和属性的案例
[attach]1465901[/attach]
1.代码：
[mw_shl_code=html,true][mw_shl_code=html,true]
<style>
*{
margin: 0;
padding: 0;
}
body{
max-width:600px;
margin: 0 auto;
}
form{
width:100%;
}
form fieldset{
padding:20px 20px 10px;
}
form fieldset label{
font-weight:bold;
line-height:20px;
}
form input,
form meter{
width:100%;
margin:10px 0;
display: block;
height:30px;
border: 1px solid #ccc;
padding-left:5px;
}
form meter{
width:100%;
border: none;
padding-left:0;
}
.btn{
width:100%;
height: 40px;
margin-top: 20px;
}
</style>[mw_shl_code=html,true]<body><form action="">
<fieldset>
<legend>学生档案</legend>
<label for="userName">姓名:</label>
<input type="text" name="userName" id="userName" placeholder="请输入姓名" required>
<label for="phone">手机号码：</label>
<input type="tel" name="phone" id="phone" pattern="^(\+86)?1[358]\d{9}$">
<label for="email">邮箱地址：</label>
<input type="email" name="email" id="email">
所属学院：
<input type="text" list="school" name="college" id="college" placeholder="请选择">
<datalist id="school">
<option>移动与前端开发学院</option>
<option>IOS</option>
<option>andriod</option>
<option>c++</option>
</datalist>
<label for="score">入学成绩:</label>
<input type="number" max="100" min="0" step="1" name="score" id="score" value="0">
<label for="level">基础水平</label>
<!--通过low/high的值来设置meter的颜色-->
<meter name="level" id="level" value="0" max="100" min="0" low="59" high="90"></meter>
<label for="inTime">入学日期</label>
<input type="date" name="inTime" id="inTime">
<label for="leaveTime">毕业日期</label>
<input type="date" name="leaveTime" id="leaveTime">
<input type="submit" name="submit" id="submit" class="btn">
</fieldset></form><script>
/*通过score成绩的输入，动态修改meter的颜色*/
document.getElementById("score").oninput=function(){
document.getElementById("level").value=this.value;
}
</script>
</body>
2.结构：
[mw_shl_code=html,true]<body><form action="">
<fieldset>
<legend>学生档案</legend>
<label for="userName">姓名:</label>
<input type="text" name="userName" id="userName" placeholder="请输入姓名" required>
<label for="phone">手机号码：</label>
<input type="tel" name="phone" id="phone" pattern="^(\+86)?1[358]\d{9}$">
<label for="email">邮箱地址：</label>
<input type="email" name="email" id="email">
所属学院：
<input type="text" list="school" name="college" id="college" placeholder="请选择">
<datalist id="school">
<option>移动与前端开发学院</option>
<option>IOS</option>
<option>andriod</option>
<option>c++</option>
</datalist>
<label for="score">入学成绩:</label>
<input type="number" max="100" min="0" step="1" name="score" id="score" value="0">
<label for="level">基础水平</label>
<!--通过low/high的值来设置meter的颜色-->
<meter name="level" id="level" value="0" max="100" min="0" low="59" high="90"></meter>
<label for="inTime">入学日期</label>
<input type="date" name="inTime" id="inTime">
<label for="leaveTime">毕业日期</label>
<input type="date" name="leaveTime" id="leaveTime">
<input type="submit" name="submit" id="submit" class="btn">
</fieldset></form><script>
/*通过score成绩的输入，动态修改meter的颜色*/
document.getElementById("score").oninput=function(){
document.getElementById("level").value=this.value;
}
</script>
</body>
说明：
1.<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。
2. legend 元素为 [color=inherit]fieldset 元素[/color]定义标题（caption）。
[b]多媒体[/b]
1.音频播放：audio标签的使用:属性：[list]
[*][color=inherit]autoplay[/color]--->autoplay--->如果出现该属性，则音频在就绪后马上播放。
[*][color=inherit]controls[/color]--->controls---->如果出现该属性，则向用户显示控件，比如播放按钮。
[*][color=inherit]loop[/color]--->loop--->如果出现该属性，则每当音频结束时重新开始播放。
[*][color=inherit]preload[/color]--->preload如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
[*][color=inherit]src[/color] --->[i]url[/i] --->要播放的音频的 URL。
[/list]示例：播放音频
[mw_shl_code=html,true]<audio src="../mp3/See.mp3" controls autoplay></audio>
<audio src="../mp3/See.mp3" controls autoplay></audio>
说明：由于版权等原因，不同的浏览器可支持播放的格式是不一样的
| 
发表于 2019-4-4 13:38
