HTML5新增表单控件及一些html5废弃的一些标签

1.下拉菜单

 1.下拉菜单  比之前多了联想功能
      添加搜索框 
         <input list="browsers" name="mybrowser"> 
    <!-- 搜索内容 -->
         <datalist id="browsers">
            <option value='jack'></option>
            <option value='Rose'></option>
            <option value='Bob'></option>
            <option value='Pater'></option>
             <option value='jerry'></option>
        </datalist> 

2.必填字段   required

3正则

           3.正则  
           patter='[限制的内容]{数量}' a-z表示范围 数量 如果是5-10之间,中间用,隔开
            年龄
           <input type="text" name="" id="" pattern='[0-9]'{3}>
           只能输入字母
           <input type="text" name="" id="" pattern='[A-Za-z]{1,3}'>
           电话号码
           <input type="text" name="" id=""pattern='1[3-9][0-9]{9}'> 
            pattern="1[3-9][0-9]{9}"
             第一位是1,第二位取值在3-9之间,剩余9位在0-9中

4.数字类型

 4.数字类型
             type="number"  min最小值 max最大值 value默认值step间隔值-->
             <!-- <input type="number" min="1" max="10" value="1" step='1'> 

5.时间字段

 5.时间字段 step 时间间隔(s秒) 
  <input type="time" step="1800"> 

6.进度条

6.进度条 progress 
           <progress value="69" max="100"></progress>

7.提交到不同页面

 7.提交到不同页面  get显示提交  post 隐藏提交
         <form action="demo.php" method="get" formaction 表示提交地址>
            first name: <input type="text" name='fname'>
            last name: <input type="text" name='lname'>
            <input type="submit" value='注册' formaction="register.php">
            <input type="submit" value='登陆' formaction="login.php">
            <input type="submit" value='post方式提交' formmethod="post" 
              formaction="login.php">
        </form> 

8.取消表单验证

 8.取消表单验证 
 <!-- 方法一 -->
   直接给form加novalidate='novalidate form里的input都不用验证
<form action="demo.php" novalidate='novalidate'></form>
<!-- 方法二 -->
  加到相应的input则该input不用验证 
  <input type="text formnovalidate='formnovalidate ">
   给submit加 formnovalidate 所有都不验证 
<input type="submit" formnovalidate='formnovalidate'/>

9音频

<audio src="文件路径"></audio>
    audio 音频元素;用于嵌入一个 音频文件
    src 音频文件的路径地址
    controls 显示播放控件
    autopaly 表示自动播放
    preload 预先载入音频文件数据

10 视频

<!-- 视频 -->
     <video src=""></video>
        video 视频播放元素
        src 视频资源的URL
        controls 表示显示播放控件
        autoplay 自动播放,目前不能使用
        muted 表示静音
        poster 指定视频载入时显示的图片封面
        loop 反复播放
        preload 预先加载

废弃标签

被废弃的标签                 替代的标签
<bgsound>                   <audio>

<marquee>                   js代码实现

<applet>                        <embed>和<object>

<rb>                               <ruby>

<acronym>                    <abbr>

<dir>                              <ul>

<isindex>                       <form>和<input>集合

<listing>                        <pre>

<xmp>                          <code>

<nextid>                       GUIDS

<plaintext>                   "text/plain" MIME 类型

<basefont>Applet是采用Java编程语言编写的小应用程序

<big>大号字体效果

<center>居中

<font>规定文本字体、大小和颜色

<frame>框架

<frameset>框架集

<noframes>noframes

<strike>可定义加删除线

<tt>呈现类似打字机或者等宽的文本效果

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值