吾爱破解 - LCG - LSG |安卓破解|病毒分析|www.52pojie.cn

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 3050|回复: 2
收起左侧

[其他转载] HTML5之表单创建以及音频播放等源码

[复制链接]
啊窝额 发表于 2019-4-4 13:38
本帖最后由 啊窝额 于 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>
[/mw_shl_code][/mw_shl_code]
表单的输入类型
  • 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>

说明:由于版权等原因,不同的浏览器可支持播放的格式是不一样的
321.jpg

发帖前要善用论坛搜索功能,那里可能会有你要找的答案或者已经有人发布过相同内容了,请勿重复发帖。

AVenus 发表于 2019-4-4 13:59
好东西,正需要,正在学着前端开发
资料终结者 发表于 2019-4-4 14:15
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则 警告:本版块禁止灌水或回复与主题无关内容,违者重罚!

快速回复 收藏帖子 返回列表 搜索

RSS订阅|小黑屋|处罚记录|联系我们|吾爱破解 - LCG - LSG ( 京ICP备16042023号 | 京公网安备 11010502030087号 )

GMT+8, 2024-3-29 22:34

Powered by Discuz!

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表