HTML5+CSS：02用户注册表单
先，先上我们敲的表单样式（如下）：<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/User.css"/>
</head>
<body οnlοad="show()">
<form action="server.html" method="post" name="f1" id="f1" οninput="out.innerHTML=age2.value" target="_blank" enctype="multipart/form-data">
<fieldset>
<legend>用户注册</legend>
<p>
<label for="name1">姓名：</label>
<input type="text" required="required" placeholder="输入名字..." name="name1" id="user"/><label>*</label>
</p>
<p>
<label for="pwd">密码：</label>
<input type="password" required="required" name="pwd" id="pwd" placeholder="输入密码..."/><label>*</label>
</p>
<p>
<label for="sex">性别：</label>
<input type="radio" name="sex" id="sex1" value="M" />男
<input type="radio" name="sex" id="sex2" value="F" checked/>女
</p>
<p>
<label for="date1">出生日期：</label>
<input type="date" name="date1" id="date1" min="1998-01-01" max="2000-12-30" required="required"><label>*</label>
</p>
<p>
<label for="zy">职业：</label>
<select name="zy" id="zy" size="1">
<option value="学生" selected>学生</option>
<option value="教师" disabled>教师</option>
<option value="军人" label="军人"></option>
<option value="医生" >医生</option>
<option value="工人">工人</option>
</select>
<label for="zj">祖籍：</label>
<select name="zj" id="zj">
<optgroup label="广东省">
<option value="广州" label="广州"></option>
<option value="深圳" label="深圳" selected></option>
<option value="珠海" label="珠海"></option>
</optgroup>
<optgroup label="湖南省">
<option value="长沙">长沙</option>
<option value="湘潭">湘潭</option>
<option value="岳阳">岳阳</option>
<option value="衡阳">衡阳</option>
</optgroup>
<optgroup label="浙江省">
<option value="温州">温州</option>
<option value="杭州">杭州</option>
<option value="宁波">宁波</option>
</optgroup>
<optgroup label="江西省">
<option value="南昌">南昌</option>
<option value="景德镇">景德镇</option>
<option value="宜春">宜春</option>
</optgroup>
</select>
</p>
<p>
<label for="hobby">爱好：</label>
<input type="checkbox" name="hobby" id="hobby1" value="音乐" checked/>音乐
<input type="checkbox" name="hobby" id="hobby2" value="编程" checked/>编程
<input type="checkbox" name="hobby" id="hobby3" value="游泳"/>游泳
<input type="checkbox" name="hobby" id="hobby4" value="购物"/>购物
</p>
<p>
<label for="phone">电话：</label>
<input type="tel" name="phone" id="phone" title="请输入11位数字...." pattern="13\d{9}"/>
</p>
<p>
<label for="myemail">邮箱：</label>
<input type="email" multiple="multiple" autofocus name="myemail" id="myemail" title="请输入邮箱地址...."/>
</p>
<p>
<label for="weburl">主页：</label>
<input type="url" name="weburl" id="weburl" title="请输入url地址...."/>
</p>
<p>
<label for="num1">100内奇数：</label>
<input type="number" name="num1" id="num1" min="1" max="100" value="1" step="2"/>
<label for="num2">100内偶数：</label>
<input type="number" name="num2" id="num2" min="2" max="100" value="2" step="2"/>
</p>
<p>
<label for="age2">年龄范围：</label>
<input type="range" name="age2" id="age2" min="15" max="35" /><output id="out" name="out" form="f1" for="age2">20</output>岁
</p>
<datalist id="dlist">
<option label="1" value="计算机">计算机</option>
<option label="2">电子商务</option>
<option label="3">C语言</option>
<option>办公软件</option>
<option>数字处理</option>
<option>视频剪辑</option>
</datalist>
<p>
<label for="search">搜索：</label>
<input type="search" name="search" id="search" list="dlist"/>
<input type="button" value="go" class="bt1"/>
</p>
<p>
<label for="col">备注背景：</label>
<input type="color" name="col" id="col" value="#ff0000"/>
<input type="button" value="更改背景" class="bt" οnclick="changecol()"/>
</p>
<script>
function show()
{
document.getElementById("sp1").innerHTML=document.getElementById("age").value
}
function changecol()
{
document.getElementById("bz").style.backgroundColor=document.getElementById("col").value;
}
</script>
<p style="border: 0;">
<label for="pic">备注：</label>
<textarea id="bz" name="bz" rows="10" cols="28" placeholder="请输入备注..."></textarea>
</p>
<p style="text-align: center;border: 0;">
<input type="submit" value="发送" class="bt"/>
<input type="reset" class="bt"/>
<input type="button" value="单击" class="bt" οnclick="alert('hello!')"/>
</p>
</fieldset>
</form>
<p></p>
</body>
</html>
border: 10px #800 outset;
width: 325px;
margin: 0 auto;
padding: 25px;
font-size: 12px;
color: #666;
background:aliceblue ;
}
fieldset{
border: 1px dotted #800;
padding: 10px;
border-radius: 10px;
}
legend{
font-size: 16px;
color: #800;
font-weight: bold;
text-align: center
}
#user,#pwd,#sw{
border: 0;
border-radius: 5px 5px 0px 0px;
width: 90px;
text-align: center;
margin-right: 15px;
}
#phone,#myemail,#weburl,#date1,#search{
border: 0;
border-radius: 5px 5px 0px 0px;
width: 150px;
text-align: center;
margin-right: 15px;
}
#num1,#num2,#col{
border: 0;
border-radius: 5px 5px 0px 0px;
width: 30px;
text-align: center;
margin-right: 15px;
}
#sp1,#out{
color: #880000;
font-weight: bold;
margin: 0 10px;
}
#zy,#zj{
border: 0;
border-radius: 5px 5px 0px 0px;
width: 60px;
text-align: center;
margin-right: 15px;
font-size: 12px;
}
#zj optgroup{
color: #800;
}
#zj option{
color: #333;
}
#pic{
width: 200px;
}
p{
border-bottom: 1px #800 dotted;
padding: 5px 0;
margin: 0 10px;
line-height: 1;
}
p:hover{
background:;
}
.bt{
width: 70px;
height: 20px;
border: 0;
color: #800;
font-size: 12px;
border-radius: 5px 5px 0 0;
margin: 0 7px;
}
.bt1{
width: 40px;
height: 20px;
border: 0;
color: #800;
font-size: 12px;
border-radius: 20px;
margin: 0 7px;
}
label{
color: #880000;
font-weight: bold;
font-size: 14px;
font-family: "宋体";
}
label:hover{
color: #333;
}
.bt:hover,.bt1:hover{
background:azure;
color: #000;
}
#bz{
border-radius: 5px 5px 0 0;
padding: 5px;
border: 1px dotted #ccc;
}
#sw:hover,#bz:hover,#user:hover,#pwd:hover,#pic:hover{
background:azure;
}
HTML5+CSS：02用户注册表单的更多相关文章
- HTML5 学习总结（二）——HTML5新增属性与表单元素
一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...
- HTML5初步——新的表单元素和属性
HTML5初步--新的表单元素和属性 HTML5初步--新的表单元素和属性 <!DOCTYPE html> <html> <head> <meta chars ...
- 开始使用HTML5和CSS3验证表单
使用HTML5和CSS3验证表单 客户端验证是网页客户端程序最常用的功能之一,我们之前使用了各种各样的js库来进行表单的验证.HTML5其实早已为我们提供了表单验证的功能.至于为啥没有流行起来估计是兼 ...
- 12种炫酷HTML5 SVG和CSS3表单浮动标签特效
这是一组效果非常炫酷的HTML5 SVG和CSS3表单浮动标签特效.这组浮动标签特效共12种效果,使用SVG和CSS3来制作完成.这些浮动标签效果部分在元素的伪元素上使用CSS transitions ...
- 9款大气实用的HTML5/CSS3注册登录表单
1.HTML5/CSS3仿Facebook登录表单 利用CSS3制作的登录表单的确很漂亮,我们在html5tricks网站上也分享过几款了,比如CSS3密码强度验证表单可以显示密码的强度,这款纯CSS ...
- 基于HTML5手机登录注册表单代码
分享一款基于HTML5手机登录注册表单代码.这是一款鼠标点击注册登录按钮弹出表单,适合移动端使用.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&qu ...
- Html5学习进阶四 表单元素和表单属性
HTML5 的新的表单元素: HTML5 拥有若干涉及表单的元素和属性. 本章介绍以下新的表单元素: datalist keygen output 浏览器支持 Input type IE Firefo ...
- 【HTML5】增强的表单
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- HTML5 学习笔记（二）——HTML5新增属性与表单元素
目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...
随机推荐
- Python Excel操作——xlrd、xlwd
读取 1.导入模块 import xlrd 2.打开Excel文件读取数据 data = xlrd.open_workbook('excel.xls') 3.获取一个工作表 1 table = dat ...
- Nebula Graph 技术总监陈恒：图数据库怎么和深度学习框架进行结合？
引子 Nebula Graph 的技术总监在 09.24 - 09.30 期间同开源中国·高手问答的小伙伴们以「图数据库的设计和实践」为切入点展开讨论,包括:「图数据库的存储设计」.「图数据库的计算设 ...
- Thinkphp5.0第五篇
原样输出 使用literal标签防止模板标签被解析 例如 {literal} {$name}<br/> {/literal} 模板单行注释 {//注释内容} 多行注释 {/*注释内容*/} ...
- HTML块元素与内联元素嵌套规则
HTML存在许多种类型的标签,有的标签下面只允许特定的标签存在,这就叫HTML嵌套规则.不按HTML嵌套规则写,浏览器就不会正确解析,会将不符合嵌套规则的节点放到目标节点的下面,或者变成纯文本.关于H ...
- LeetCode_232-Implement Queue using Stacks
题意是使用栈实现队列:队列是先进先出,后进后出. class MyQueue { public: /** Initialize your data structure here. */ MyQueue ...
- Java读源码之LockSupport
前言 JDK版本: 1.8 作用 LockSupport类主要提供了park和unpark两个native方法,用于阻塞和唤醒线程.注释中有这么一段: 这个类是为拥有更高级别抽象的并发类服务的,开发中 ...
- Django+小程序技术打造微信小程序助手 ✌✌
Django+小程序技术打造微信小程序助手 (一个人学习或许会很枯燥,但是寻找更多志同道合的朋友一起,学习将会变得更加有意义✌✌) 从零到一的完整项目开发实战过程,项目开发聚焦重要知识点,先原理后实战 ...
- Mac部署hadoop3(伪分布式)
环境信息 操作系统:macOS Mojave 10.14.6 JDK:1.8.0_211 (安装位置:/Library/Java/JavaVirtualMachines/jdk1.8.0_211.jd ...
- 实验吧之【简单的sql注入 1、2、3】
实验吧的三道sql注入(感觉实验吧大部分web都是注入) 简单的SQL注入 地址:http://ctf5.shiyanbar.com/423/web/ 这道题也是sql注入,输入1,页面显示正常,输出 ...
- msf之hash攻击
使用hashdump抓取密码(需要系统管理权限) 另外一个更强大的模块 smart_hashdump 如果目标是win7 就需要先绕过UAC 还可以使用msf内置的mimikatz抓取hash msv ...