html5的表单

来源：互联网发布：网络棋牌室记账功能编辑：程序博客网时间：2024/06/01 07:13

一.强大的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>

阅读全文

1 0

html5的表单

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

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

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