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 ...
随机推荐
- 1897. tank 坦克游戏
传送门 显然考虑 $dp$,发现时间只和当前位置和攻击次数有关,设 $F[i][j][k]$ 表示当前位置为 $i,j$ ,攻击了 $k$ 次得到的最大分数 初始 $f[1][1][k]$ 为位置 $ ...
- [ASP.NET Core 3框架揭秘] 依赖注入：IoC模式
原文:[ASP.NET Core 3框架揭秘] 依赖注入:IoC模式 正如我们在<依赖注入:控制反转>提到过的,很多人将IoC理解为一种“面向对象的设计模式”,实际上IoC不仅与面向对象没 ...
- overflow的量两种模式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript 模块化简析
关于模块化,最直接的表现就是我们写的 require 和 import 关键字,如果查阅相关资料,就一定会遇到 CommonJS .CMD AMD 这些名词,以及 RequireJS.SeaJS 等陌 ...
- VUE：v-for获取列表前n个数据、中间范围数据、末尾n条数据的方法
说明: 1.开发使用的UI是mintUI, 要求: 1.获取6到13之间的数据:items.slice(6,13) <mt-cell v-for="(item,index) in it ...
- 微信小程序的短信接口
使用聚合数据 (网址) https://www.juhe.cn/docs? 注册部分略! 这是登录部分的. 一: 二.我的接口
- 数据写入到Excel，模板样式复杂
先整理好Excel模板,如: 接下来在程序获取上面整理好的Excel模板并替换关键字就可以了public ActionResult SummaryStatistics() public ActionR ...
- React-请求篇
请求方式: (1)后台API:HttpPost [FromForm] UserRetisterDTO dto 前端请求: { body:qs.stringify(dto), header ...
- C++宽字符串转字符串
这文章是更改别人代码 #include <string> #include <iostream> #include <stdlib.h> #include < ...
- MYSQL学习笔记——常用语句
1.检索数据 1.1.检索单个列:SELECT prod_name FROM products; 1.2.检索多个列:SELECT prod_id, prod_name, prod_price FRO ...