HTML5 - 智能表单

智能表单

<!doctype html>
<html lang="zh-CN"><head><meta charset="utf-8" /><title>智能表单</title><style>body{ line-height:25px;}</style><script>//对用户提交的表单进行校验function checkInput(){var flag=false;var username=$("username").value;var pwd=$("pwd").value;var email=$("email").value;if(username==""){alert("用户名不能为空！");}else if(username.length<3){alert("用户名长度必须大于3！");}else if(pwd.length<6||pwd.length>14){alert("密码长度必须在6-14之间！");}else if(email.indexOf("@")==-1){alert("邮箱格式不正确！");}else{flag=true;}return flag;}function $(id){return document.getElementById(id);}</script><head><body><form action="login.html" method="post" id="register"></form>用户名：<input type="text" name="username" form="register" id="username" placeholder="请输入用户名" pattern="u\d{4}" autocomplete="off"/><br/>密码：<input type="password" name="pwd" form="register" id="pwd"/><br/>邮箱：<input type="email" name="email" form="register" id="email" required /><br/>URL：<input type="url" name="url" form="register" /><br/>日期：<input type="date" name="date" form="register" /><br/>时间：<input type="time" name="time" form="register" /><br/>月份：<input type="month" name="month" form="register" /><br/>星期：<input type="week" name="week" form="register" /><br/>数字：<input type="number" name="number" min="1" max="10" step="2" form="register" autofocus/><br/>滚动条：<input type="range" name="range" min="1" max="10" form="register"/><br/>搜索：<input type="search" name="search" results="n" form="register" /><br/>颜色：<input type="color" name="color" form="register"/><br/>学历：<input type="text" name="degree" form="register" list="degree"/><br/><datalist id="degree"><option>大专</option><option>本科</option><option>研究生</option></datalist><input type="submit" value="登陆" form="register" /></body>
</html>

HTML5 - 智能表单相关推荐

html 表单自动数值,web前端学习技术之对HTML5 智能表单的理解
原标题:web前端学习技术之对HTML5 智能表单的理解 Html5新增input的form属性,用于指向特定form表单的id,实现input无需放在form标签之中,即可通过表单进行提交. - t ...
html5 智能表单验证
<!DOCTYPE html> <head> <meta charset=utf-8> <title>HTML5智能表单</title> & ...
html5 智能表单介绍
智能表单介绍 1.XHTML中需要放在form之中的诸如inpu/button/select/textarea等标签元素,在HTML5中完全可以放在页面任何位置,然后通过新增的form属性指向元素所属 ...
知识梳理，HTML5智能表单
☀ autofocus 属性 <input type="text" autofocus/>设置 autofocus 属性,使文本框自动获得焦点注意:一个页面中最多只能 ...
html5 智能表单
HTML5中新增的表单元素[智能表单]
[HTML5 智能表单] H5新增input的form属性,用于指向特定form表单的id,实现input无需放在form标签之中,即可通过表单进行提交. <FORM id=foo> - ...
HTML5基础智能表单
语义化标签:主要用于移动端低版本浏览器不可用 section:页面中的一个内容区块与div作用一样 header:页面中一个内容区块或整个页面的标题 nav:页面导航链接部 ...
html5表单新增的输入类型,HTML5之表单新增类型介绍
1.html5的input标签的type类型新增介绍: 2.表单新增属性介绍: 3.代码示例: 1970 1980 1990 默认值: form="register" /> ...
html5下拉智能,HTML5新增标签 + 智能表单
一.HTML5的新增语义标签 1. 全新语义化标签 :用来定义文档或应用程序中的区域或章节. :用来定义文档的主导航区域,其中的链接指向其他页面或当前页面的某些区域. 用来包裹独立的内容片段,通常用来 ...

HTML5 - 智能表单

智能表单

HTML5 - 智能表单相关推荐

最新文章

热门文章