html5的表单

最新推荐文章于 2024-10-04 22:08:48 发布

沐梓沐囡

最新推荐文章于 2024-10-04 22:08:48 发布

阅读量1.6k

点赞数 1

分类专栏： html5 文章标签： html5 form表单 html5

本文链接：https://blog.youkuaiyun.com/yy_9_aa/article/details/78144656

版权

html5 专栏收录该内容

2 篇文章

订阅专栏

一.强大的html5的表单验证功能，不需要我们再写入大量的javascript代码就可以完成我们想要的表单验证功能。
效果截图如下:

源码如下:

<body>
   <form  action="#">
       <fieldset>
           <legend>表单属性</legend>
           <label for=""></label>
           email:<input   type="email"   name="email"   />
           <label for=""></label>
           url:<input   type="url"   name="url"   />
           <label for=""></label>
           number:<input   type="number"   name="number"  step="3" />
           <label for=""></label>
           tel:<input   type="tel"   name="tel"   />
           <label for=""></label>
           search:<input   type="search"   name="search"   />
           <label for=""></label>
           range:<input   type="range"   name="range" value="100" min="0" max="300"  />
           <label for=""></label>
           color:<input   type="color"   name="color"   />
           <label for=""></label>
           time:<input   type="time"   name="time"   />
           <label for=""></label>
           date:<input   type="date"   name="date"   />
           <label for=""></label>
           month:<input   type="month"   name="month"   />
           <label for=""></label>
           week:<input   type="week"   name="week"   />
           <label for=""></label>
          <input   type="submit"   value="提交" />
       </fieldset>

   </form>

</body>

二.但是提示的比较直白，有点不友好，如果想换成自己需要的验证提示语，可引入少量的js源码如下:

<script>
        window.onload=function(){
            var txt1=document.getElementById("txt1");
            var txt2=document.getElementById("txt2");
            var num=0;
            txt1.oninput=function(){
                num++;
                txt2.value=num;
            }
            txt1.oninvalid=function(){
                this.setCustomValidity("对不起，请检查您的邮箱号。");
            }
        }
    </script>
</head>
<body>
   <form   action="">
       <fieldset>
           <legend>表单事件</legend>
           <label  for="">
              email:<input  type="email"   id="txt1" />
           </label>
           <label  for="">
               password:<input  type="text"  id="txt2" />
           </label>
           <input type="submit" />
       </fieldset>
   </form>
</body>

三.h5中的<datalist></datalist>与<select></select>类似，但是有别于它，可以输入框自行输入文字。

源码:

<body>
    <div  id="wrap">
        <div  id="box1">
            <select>
                <option>鲜花</option>
                <option>玫瑰</option>
                <option>牡丹</option>
            </select>
            <p>我不可以自行输入文字</p>
        </div>
        <div  id="box2">
            <input      type="text"  list="car">
            <datalist     id="car">
                <option>鲜花</option>
                <option>玫瑰</option>
                <option>牡丹</option>
            </datalist>
            <p>我可以自行输入文字</p>
        </div>
    </div>
</body>