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）

原文链接：https://blog.csdn.net/qq_44023710/article/details/114945112