智能表单

最新推荐文章于 2023-08-21 16:34:37 发布

维克多噗噗

最新推荐文章于 2023-08-21 16:34:37 发布

阅读量364

点赞数

分类专栏： HTML

HTML 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

新增type

email url number range

    email:定义用于email地址的文本(有@ ,符合基本邮件格式)
    url:正确的地址
    number:数字
        属性:
            max:最大值
            min:最小值
            step:合法的数字间隔
            value:规定默认值
    range:滑块
        属性:
            max:最大值
            min:最小值
            step:合法的数字间隔
            value:规定默认值
    required ：不能为空，若为空提交时会有提示（值：required/不写）
    accept 属性只能与 <input type="file"> 配合使用。它规定能够通过文件上传进行提交的文件类型。
    placeholder ：文字提示
    pattern ：直接规定正则规则，无需使用js（值：正则表达式）

<!DOCTYPE html>
<html>
 <head>
 <!--声明当前页面的编码集：charset=gbk,gb2312(中文编码)，utf-8国际编码-->
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--当前页面的三要素-->
    <title>05_h5新增type类型</title>

    <meta name="author" content="P+老师" />
    <style type="text/css">


    </style>

 </head>
 <body>
    <form action="" id="form">
        <h3>1.email</h3>
        <input type="email">
        <input type="submit">

        <h3>2.url</h3>
        <input type="url">
        <input type="submit">

        <h3>3.number</h3>
        <input type="number" value="0" max="100" min="0" step="2" name="num">
        <input type="submit">

        <h3>4.range</h3>
        <input type="range" name="ran" value="0" max="100" min="0" step="2">
        <input type="file" accept="image/gif" >
        <h3>required</h3>
        <input type="text" required>

        <br>
        <h3>pattern</h3>
        <input type="text" pattern="([a-z][A-Z]){3}" title="输入名字三个首字母">
        <hr>
        <input type="submit">
    </form>
    <script>
        (function(){
            var oF = document.getElementById("form");
            var oN = oF.num;
            var oR = oF.ran;
            var value = oN.value;

            oN.onchange = function(){
                oR.value = this.value;
            }
            // oN.onblur = function(e){
            //  var max = this.max;
            //  var min = this.min;
            //  this.value = Math.min( max , this.value-0 );
            //  this.value = Math.max( min , this.value-0 );
            // };
            oR.onmousedown = function(e){
                oN.value = this.value;
                // var  This = this;
                document.onmousemove = function(){
                    oN.value = this.value;
                }.bind(this);
                document.onmouseup = function(){
                    this.onmousemove = null;
                    this.nomouseup = null;
                }
            };
        })();
    </script>
 </body>
</html>

表单属性list ：配合datalist一起使用，值指向datalist的ID

<!DOCTYPE html>
<html>
 <head>
 <!--声明当前页面的编码集：charset=gbk,gb2312(中文编码)，utf-8国际编码-->
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--当前页面的三要素-->
    <title>09_datalist</title>
    <meta name="author" content="P+老师" />
    <style type="text/css">
    </style>

 </head>
 <body>

    <input type="text" list="daList">
    <datalist id="daList">
        <option >P+</option>
        <option value="hahah">美丽</option>

        <option >P+美丽</option>

        <option >P+善良</option>

        <option >P+大方</option>

<!--    标签里面不写值是可以的 value里面必须写
     -->    
    </datalist>

 </body>
</html>

其他

定义元素进行缩放css

resize : 定义元素进行缩放(加上overflow:auto)
        both:水平垂直都可以缩放
        none:不能进行缩放
        horizontal:仅水平缩放
        vertical:仅竖直缩放

<!DOCTYPE html>
<html>
 <head>
 <!--声明当前页面的编码集：charset=gbk,gb2312(中文编码)，utf-8国际编码-->
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--当前页面的三要素-->
    <title>01_缩放</title>

    <meta name="author" content="P+老师" />
    <style type="text/css">
        .box{
            width:200px;
            height:200px;
            background:lime;
            resize:vertical;
            overflow:auto;
        }
    </style>
 </head>
 <body>
    <div class="box"></div>
 </body>
</html>

多列布局 (ie(9+)

            -webkit-
            -moz-
            columns:width count;
                最小宽度 列数;
            column-gap:列之间的间隔
            column-rule:简写的 分隔线的宽度 样式 颜色

<!DOCTYPE html>
<html>
 <head>
 <!--声明当前页面的编码集：charset=gbk,gb2312(中文编码)，utf-8国际编码-->
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--当前页面的三要素-->
    <title>03_多列布局</title>

    <meta name="author" content="P+老师" />
    <style type="text/css">

    p{
        -webkit-columns:200px 3;
        -webkit-column-gap:100px;
        -webkit-column-rule:10px inset aqua;
    }
    </style>

 </head>
 <body>
    <p>
    欢欢,晓希,明天,董事长,执情,合衬
    欢欢,晓希,明天,董事长,执情,合衬
    欢欢,晓希,明天,董事长,执情,合衬
    欢欢,晓希,明天,董事长,执情,合衬
    欢欢,晓希,明天,董事长,执情,合衬
    欢欢,晓希,明天,董事长,执情,合衬
    欢欢,晓希,明天,董事长,执情,合衬
    欢欢,晓希,明天,董事长,执情,合衬
    欢欢,晓希,明天,董事长,执情,合衬
    欢欢,晓希,明天,董事长,执情,合衬
    欢欢,晓希,明天,董事长,执情,合衬
    欢欢,晓希,明天,董事长,执情,合衬
    欢欢,晓希,明天,董事长,执情,合衬
    欢欢,晓希,明天,董事长,执情,合衬
    欢欢,晓希,明天,董事长,执情,合衬
    </p>
 </body>
</html>

怪异盒模型

    标准盒模型宽高=content+padding+border(width,height内容)

<!DOCTYPE html>
<html>
 <head>
 <!--声明当前页面的编码集：charset=gbk,gb2312(中文编码)，utf-8国际编码-->
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--当前页面的三要素-->
    <title>04_怪异盒模型</title>

    <meta name="author" content="P+老师" />
    <style type="text/css">
        div{
            width:200px;
            height:200px;
            background:yellow;
            box-sizing:border-box;
            padding:20px;
            border:20px solid #ddd;
        }
        /*
            怪异盒模型 : box-sizing: border-box;
            box-sizing:content-box:标准
        */

    </style>

 </head>
 <body>
    <div>我是怪异的</div>
 </body>    
</html>

维克多噗噗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
智能表单

新增type email url number range email:定义用于email地址的文本(有@ ,符合基本邮件格式) url:正确的地址 number:数字属性: max:最大值 min:最小值 step:合法的数字间隔 value:规定默认值
复制链接

扫一扫