html5表单注册应用

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>员工信息</title>
<style>.container{max-width: 400px;margin: 20px auto;}input,textarea{width: 300px;margin: 5px 0;border: 1px solid #999;padding: 0.5em 1em;vertical-align: middle;}input[type="search"], select{width: 330px;margin: 5px 0;border: 1px solid #999;padding: 0.5em 1em;vertical-align: middle;}/*必填*/input:required,textarea:required{border-right: 3px solid red;}input:required:valid,textarea:required:valid{border-right: 3px solid green;border-color: green;}input:required:focus:valid,textarea:required:focus:valid{border-right: 3px solid green;box-shadow: 0 0 5px green;border-color: green;}/*选填*/input:optional,select:optional{border-right: 3px solid #999;}input:required::after{content: '*';}input:optional::after {content: '';}/*浏览器默认focus的时候没有边框*/input:focus,select:focus,textarea:focus{outline: 0;}/*focus的时候加自定义边框*/input:required:focus,textarea:required:focus{box-shadow: 0 0 3px 1px red;}input:optional:focus,textarea:optional:focus{box-shadow: 0 0 3px 1px #999;}input[type="submit"]{background-color: #F53044;border: 2px solid red;padding: 10px 0px;color: #ffffff;width: 380px;}input[type="submit"]:hover{background-color: red;}.label-vertical {writing-mode: vertical-lr; margin-right: 18px;letter-spacing: 5px;/*text-decoration: underline;  transform: rotate(180deg);*/}</style>
</head>
<body>
<div class="container">    <center><h1>员工信息</h1></center><form action="#"><label for="name">姓名 </label><input id="name" type="search" title="请输入姓名" placeholder="输入姓名" autofocus required pattern=".{2,5}" oninvalid="setCustomValidity('2至5位数')" oninput="setCustomValidity('')"><br><label for="age">年龄 </label><input id="age" type="text" title="请输入年龄" placeholder="输入年龄" pattern="\d{1,3}" required oninvalid="setCustomValidity('1至3位数')" oninput="setCustomValidity('')"><br><label for="birthday">生日 </label><input id="birthday" type="date" title="请输入出生日期" placeholder="输入出生日期" value="2017-03-01" required oninvalid="setCustomValidity('请输入出生日期')" oninput="setCustomValidity('')"><br><label for="email">邮箱 </label><input id="email" type="email" title="请输入邮箱" placeholder="输入邮箱" required oninvalid="setCustomValidity('请输入合法邮箱')" oninput="setCustomValidity('')"><br><label for="tel">手机 </label><input type="tel" id="tel" title="请输入手机" placeholder="输入手机号"><br><label for="tel">网址 </label><input type="url" id="url" title="请输入网址" placeholder="输入网址"><br><label for="tel">爱好 </label><select id="interesting"><option value="1">足球</option><option value="2">篮球</option><option value="3">排球</option><option value="4">乒乓球</option></select><br>      <label for="self" class="label-vertical">自我评价 </label><textarea id="self" cols="30" rows="10" required title="请输入留言" placeholder="输入留言"></textarea><br/><input type="submit" value="提交表单"/></form>
</div>
</body>
</html>

最终效果如下

html5表单注册应用相关推荐

实现跨浏览器html5表单验证
html5表单添加了很多类型的表单,而且还自带验证的功能.在移动端,手机等设备能够根据不同的input类型弹出不同的键盘,例如iphone弹的键盘 <input type="email ...
jQuery html5Validate基于HTML5表单验证插件
更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...
html5-5 HTML5表单元素和内嵌框架
html5-5 HTML5表单元素和内嵌框架一.总结一句话总结:单选框和多选框选的时候外面加label就可以实现选后面文字也可以选中了 1.html5如何实现文件上传? 必须加上enctype ...
【HTML5】Web前端——第三课：HTML5 表单相关元素和属性
知识点:原有的表单元素及表单控件.HTML5 表单新增功能类型.HTML5 表单控件新增的属性推荐阅读:HTML+CSS第四课:表单标签的使用-制作注册表单 1.原有的表单元素及表单控件表单,是页 ...
html5表单验证没有效果,HTML5表单验证特性(知识点小结)
前台提交信息到后台一般两种常见提交方式: Form表单提交和 Ajax无刷新页面提交 placeholder 不是所有的input都支持,比如input date就不支持解决方案: 可以在date ...
HTML5表单的创建及与PHP的交互
2019独角兽企业重金招聘Python工程师标准>>> Html5表单 <!DOCTYPE html> <html> <head lang=" ...
验证码的编写——本质：图片目的：防止恶意表单注册
验证码 1. 本质:图片 2. 目的:防止恶意表单注册 CheckCodeServlet.java package cn.itcast.web.servlet;impo ...
html5表单新增的输入类型,HTML5之表单新增类型介绍
1.html5的input标签的type类型新增介绍: 2.表单新增属性介绍: 3.代码示例: 1970 1980 1990 默认值: form="register" /> ...
html5表单实现简单计算器
html5表单实现简单计算器 <!DOCTYPE html><html><head> <title>this is a html page</ti ...

html5表单注册应用

html5表单注册应用相关推荐

最新文章

热门文章