HTML5实现学生档案

简单的一个form表单，用HTML5实现学生档案

首先看看效果：

代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>学生档案</title>
</head><body><form><fieldset><legend><h3>学生档案</h3></legend>学生姓名：<br><input type="text" placeholder="请输入学生姓名(必填)" required><br>手机号：<br><input type="tel" placeholder="请输入手机号码(必填)" pattern="[0-9]{11}" maxlength="11" required><br>邮箱：<br><input type="email" placeholder="请输入电子邮箱地址" required><br>所属学院：<br><input type="text" placeholder="请选择学院(必填)" list="insiitute"><br><datalist id="insiitute"><option value="软件学院"></option><option value="管理学院"></option><option value="物联网学院"></option><option value="大数据学院"></option><option value="计算机学院"></option></datalist>入学成绩：<br><input type="text" placeholder="请输入入学成绩(必填)" required><br>入学日期：<br><input type="date"><br>毕业日期：<br><input type="date"><br><input type="submit" value="保存"></fieldset></form>
</body>
<style>body{width: 300px;}input{width: 260px;margin-top: 5px;}
</style></html>

新学到一个标签fieldset ，W3School中定义如下：

如果表单周围没有边框，说明您的浏览器太老了。

各种新增的input标签：

最后总结：
输入类型验证：number，email，url
必填字段验证：required
字符长度验证：minlength，maxlength
设置数值范围：min， max
设置步长：step
正则表达式：pattern
禁用表单验证：novalidate, formnovalidate
require属性是boolean属性，表单提交时输入不能为空，是所有input元素共有的属性（但不包括type为submit,button和reset）

HTML5实现学生档案相关推荐

学生档案复习前面HTML5新增标签/属性/input属性
根据所学HTML5新增的标签.属性.input属性,把学生的姓名.手机.邮箱.职业.出生日期.成绩写出来代码如下: <!DOCTYPE html> <html lang=" ...
基于java实现的学生档案管理系统毕业论文（可下载）
目录摘要学生档案管理系统是当今互联网时代下的趋势和不可缺少的一部分,他可以高效快速的完成和解决信息的查询和录入.随着计算机的快速发展和普及,越来越多的办公离不开电脑. 本系统采用B/S模式 ...
前端学习（1364）:学生档案信息管理6
service.js //引入http模块 const http = require('http'); //创建网站服务器 const app = http.createServer();const ...
前端学习（1363）:学生档案信息管理5
service.js //引入http模块 const http = require('http'); //创建网站服务器 const app = http.createServer(); //引入路 ...
前端学习（1362）:学生档案信息管理4
service.js //引入http模块 const http = require('http'); //创建网站服务器 const app = http.createServer(); //引入路 ...
前端学习（1361）:学生档案信息管理3
service.js //引入http模块 const http = require('http'); //创建网站服务器 const app = http.createServer(); //引入路 ...
jsp mysql电子档案管理系统_学生档案管理系统的设计与实现(JSP,MySQL)(含录像)
学生档案管理系统的设计与实现(,MySQL)(含录像)(开题报告,毕业论文12100字,程序代码,MySQL数据库,答辩PPT) 本文主要工作内容是梳理学生档案管理系统工作的流程,吸收.借鉴先进的指导 ...
java 档案管理系统论文_基于JAVA学生档案管理系统论文.doc
学生档案管理系统 PAGE II 学生档案管理系统摘要学生档案管理系统是一个教育单位不可缺少的部分,它能够为用户提供充足的信息和快捷的查询手段.随着计算机技术的发展,其强大的功能已为人们深刻认识 ...
基于html5的学生管理系统,基于HTML5的学生信息管理系统的设计与实现
[摘要] 目前学校依然使用人工对学生信息进行管理,没有相关的学生信息管理系统,虽然学校硬件和网络设施已经提高,但对网络的利用最多也就是用QQ来传送文件及信息,效率低下,这种状态急需改变. 基于这种现状 ...

HTML5实现学生档案

简单的一个form表单，用HTML5实现学生档案

HTML5实现学生档案相关推荐

最新文章

热门文章