HTML5之表单创建以及音频播放等源码

啊窝额 发表于 2019-4-4 13:38

本帖最后由啊窝额于 2019-4-4 13:52 编辑

表单新增的属性
[*]placeholder 占位符
[*]autofocus 获取焦点
[*]multiple 文件上传多选或多个邮箱地址
[*]autocomplete 自动完成，用于表单元素，也可用于表单自身
[*]form 指定表单项属于哪个form，处理复杂表单时会需要
[*]novalidate 关闭验证，可用于<form>标签
[*]required 验证条件，必填项
[*]pattern 正则表达式验证表单

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\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 验证不通过时触发

<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>
新增表单元素和属性的案例

1.代码：

<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><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\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>
   
   <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.结构：
<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\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>
   
   <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 元素为 fieldset 元素定义标题（caption）。
多媒体
1.音频播放：audio标签的使用:属性：
[*]autoplay--->autoplay--->如果出现该属性，则音频在就绪后马上播放。
[*]controls--->controls---->如果出现该属性，则向用户显示控件，比如播放按钮。
[*]loop--->loop--->如果出现该属性，则每当音频结束时重新开始播放。
[*]preload--->preload如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
[*]src --->url --->要播放的音频的 URL。
示例：播放音频
<audio src="../mp3/See.mp3" controls autoplay></audio>
<audio src="../mp3/See.mp3" controls autoplay></audio>
说明：由于版权等原因，不同的浏览器可支持播放的格式是不一样的

AVenus 发表于 2019-4-4 13:59

好东西，正需要，正在学着前端开发

资料终结者 发表于 2019-4-4 14:15

优秀，我很喜欢

页: [1]

吾爱破解 - 52pojie.cn's Archiver

HTML5之表单创建以及音频播放等源码