HTML5-注册表单案例fieldset
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../css/formCss.css">
</head>
<body>
<form action="">
<fieldset>
<legend>学生档案</legend>
<label for="userName">姓名:</label>
<input type="text" name="userName" id="userName" placeholder="请输入用户名">
<label for="userPhone">手机号码:</label>
<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$">
<label for="email">邮箱地址:</label>
<input type="email" required name="email" id="email">
<label for="collage">所属学院:</label>
<input type="text" name="collage" id="collage" list="cList" placeholder="请选择">
<datalist id="cList">
<option value="前端与移动开发学院"></option>
<option value="java学院"></option>
<option value="c++学院"></option>
</datalist>
<label for="score">入学成绩:</label>
<input type="number" max="100" min="0" value="0" id="score">
<label for="level">基础水平:</label>
<meter id="level" max="100" min="0" low="59" high="90"></meter>
<label for="inTime">入学日期:</label>
<input type="date" id="inTime" name="inTime">
<label for="leaveTime">毕业日期:</label>
<input type="date" id="leaveTime" name="leaveTime">
<input type="submit">
</fieldset>
</form>
<script>
document.getElementById("score").oninput=function(){
document.getElementById("level").value=this.value;
}
</script>
</body>
</html>
css
*{
padding: 0;
margin: 0;
}
form{
width: 600px;
margin:20px auto;
}
form > fieldset{
padding: 10px;
}
form > fieldset > meter,
form > fieldset > input{
width: 100%;
height: 40px;
line-height: 40px;
margin:10px 0;
border: none;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
padding-left:5px;
/*width=内容+padding+border*/
box-sizing: border-box;
}
form > fieldset > meter{
padding-left:0px;
}
HTML5-注册表单案例fieldset的更多相关文章
- 基于HTML5手机登录注册表单代码
分享一款基于HTML5手机登录注册表单代码.这是一款鼠标点击注册登录按钮弹出表单,适合移动端使用.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&qu ...
- CSS3制作分步注册表单
这个DEMO是使用CSS3制作的一个分步注册表单,每个input对应的是每一步,在表单得到焦点时,对应的step也会进行对应的改变.不过这个效果是使用js代码来实现,但整个表单的外观是由CSS3来完成 ...
- Html注册表单示例
注册表单示例,出自<网页开发手记:Html,CSS,JavaScript实战详解>. <html> <head> <title>注册表单&l ...
- 免费 PSD 下载： 20个精美的登录和注册表单
注册表单有许多不同的形状和尺寸,有的只是单个的输入框,有的则需要多个步骤.登录表单的设计将定义网站的性质,因此它应进行针对性的设计.下面的列表提供了20个醒目的登录和注册表单设计为您提供灵感. 您可能 ...
- HTML5 智能表单
HTML5 智能表单 1.表单新增属性 ☀ autofocus 属性 <input type="text" autofocus/>设置 autofocus 属性,使文 ...
- HTML5智能表单
HTML5 智能表单 1.表单新增属性 ☀ autofocus 属性 <input type="text" autofocus/>设置 autofocus 属性,使文 ...
- UX设计秘诀之注册表单设计，细节决定成败
以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器. 说实话,现实生活中,又有多少人会真正喜欢填写表格?显然,并不多.因为填写表单这样的网页或App服务,并非 ...
- HTML5新表单新功能解析
HTML5新增了很多属性功能.但是有兼容性问题,因为这些表单功能新增的.我这里做了一个简单的练习,方便参考.如果完全兼容的话,那我们写表单的时候就省了很多代码以及各种判断. <!DOCTYPE ...
- layui模板注册表单
今天晚上用layui模板做了一个简单的注册表单,功能主要有可以js验证密码重复,可以验证手机号码. 这是界面 下面是我的html文件代码 <!DOCTYPE html> <html ...
随机推荐
- Keyboarding （bfs+预处理+判重优化）
# #10030. 「一本通 1.4 练习 2」Keyboarding [题目描述] 给定一个 $r$ 行 $c$ 列的在电视上的"虚拟键盘",通过「上,下,左,右,选择」共 $5 ...
- python字符串学习总结
python字符串是不可变类型 所以没有添加和删除操作,更改元素,不会更改元素本身,可以用id(str) 测试,只有从新赋值新的对象才有效果.
- IIS环境下PHP版本过低无法Sql查询的解决
需求:帝国后台添加个后台框,输入地址,原页面重写成所指链接页面 重点:当输入框输入地址,提交到后台后,打开原链接,该页面会读取php文件GetUrlPage.php <?php header(& ...
- tomcat闪屏是jdk JAVA_HOEM环境变量配置问题
JAVA_HOME=D:\jdk.18
- 为什么需要bootloader
本文链接:https://blog.csdn.net/u012351051/article/details/50557899 受单片机和ARM7等小型CPU设备编程思维的影响,开始对嵌入式linux和 ...
- golang test模块
1 创建文件夹testing101 2 被测试程序 package testing101 func Sum(numbers []int) int { sum :=0 for _,n :=range n ...
- windows2008R2双网卡设置(一内网,一外网)
非安装路由角色 修改注册表 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\Tcpip\Parameters\Interfaces 下的二网卡 ...
- 关于memset
memset填充的是一个字节,比方下面的一段程序: #include <cstdio> #include <cstring> using namespace std; ]; i ...
- RPC的解释以及RPC和Restful、RPC和RMI的区别
如何科学的解释RPC 说起RPC,就不能不提到分布式,这个促使RPC诞生的领域. 假设你有一个计算器接口,Calculator,以及它的实现类CalculatorImpl,那么在系统还是单体应用时,你 ...
- 关于VS调试
环境配置始终是我的弱项,碰到关于环境配置的问题就各种束手无策.但是这种事情,不能总凑合着,尤其你进不去环境或者没法调试的时候,代码写的多漂亮都没用.下面就来说一下最近关于调试的了解. 首先我们现在的项 ...