<!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的更多相关文章

  1. 基于HTML5手机登录注册表单代码

    分享一款基于HTML5手机登录注册表单代码.这是一款鼠标点击注册登录按钮弹出表单,适合移动端使用.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&qu ...

  2. CSS3制作分步注册表单

    这个DEMO是使用CSS3制作的一个分步注册表单,每个input对应的是每一步,在表单得到焦点时,对应的step也会进行对应的改变.不过这个效果是使用js代码来实现,但整个表单的外观是由CSS3来完成 ...

  3. Html注册表单示例

    注册表单示例,出自<网页开发手记:Html,CSS,JavaScript实战详解>.   <html>   <head>   <title>注册表单&l ...

  4. 免费 PSD 下载： 20个精美的登录和注册表单

    注册表单有许多不同的形状和尺寸,有的只是单个的输入框,有的则需要多个步骤.登录表单的设计将定义网站的性质,因此它应进行针对性的设计.下面的列表提供了20个醒目的登录和注册表单设计为您提供灵感. 您可能 ...

  5. HTML5 智能表单

    HTML5 智能表单 1.表单新增属性  ☀ autofocus 属性 <input type="text" autofocus/>设置 autofocus 属性,使文 ...

  6. HTML5智能表单

    HTML5 智能表单 1.表单新增属性  ☀ autofocus 属性 <input type="text" autofocus/>设置 autofocus 属性,使文 ...

  7. UX设计秘诀之注册表单设计，细节决定成败

    以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器. 说实话,现实生活中,又有多少人会真正喜欢填写表格?显然,并不多.因为填写表单这样的网页或App服务,并非 ...

  8. HTML5新表单新功能解析

    HTML5新增了很多属性功能.但是有兼容性问题,因为这些表单功能新增的.我这里做了一个简单的练习,方便参考.如果完全兼容的话,那我们写表单的时候就省了很多代码以及各种判断. <!DOCTYPE ...

  9. layui模板注册表单

    今天晚上用layui模板做了一个简单的注册表单,功能主要有可以js验证密码重复,可以验证手机号码. 这是界面 下面是我的html文件代码 <!DOCTYPE html> <html ...

随机推荐

  1. 09-js定时器、函数

    # js定时器 通过使用 JavaScript,我们有能力作到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行.我们称之为计时事件. **定时器在javascript中的作用** 1. ...

  2. linux下查看Apache的访问日志及ip

    linux下查看Apache的实时访问日志:tail -f  /etc/httpd/logs/access_log 查看有哪些ip访问过:cat access_log |awk '{print $1} ...

  3. 行人重识别(ReID) ——概述

    什么是Re-ID? 行人重识别(Person re-identification,简称Re-ID)也称行人再识别,是利用计算机视觉技术判断图像或者视频序列中是否存在特定行人的技术.广泛被认为是一个图像 ...

  4. 在centOS7.2上编译gcc4.4.7

    1.前置 首先,可以参考我的上篇文章,在centOS7.2上编译gcc4.1.2,过程基本一致,这里只对可能遇到的错误情况进行说明. 2.安装texinfo4.8 我的centos7.2版本,自带的是 ...

  5. android 打卡 虚拟定位 sqlite

    1.使用android5.1模拟器 android5.1模拟器使用数据库管理参数文件,6.0及以后的版本使用xml文件管理 2.使用sqlite修改配置文件 3.修改secure库中的android_ ...

  6. bzoj4448 [Scoi2015]情报传递 主席树+树上差分

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=4448 题解 练习一下主席树的基础练习题找回感觉. 对于每一次询问,第一问显然随便做. 第二问的 ...

  7. 6.dockerfile

    一.概述 自制镜像的目的不是为了解决配置更新的问题,而是为了定制化应用服务. 镜像的制作:基于容器制作:dockerfile dockerfile的格式:注释信息+指令(约定俗成使用大写)及其参数 d ...

  8. D0g3_Trash_Pwn_Writeup

    Trash Pwn 下载文件 1 首先使用checksec查看有什么保护 可以发现,有canary保护(Stack),堆栈不可执行(NX),地址随机化没有开启(PIE) 2 使用IDA打开看看 mai ...

  9. hdu 1693 : Eat the Trees 【插头dp 入门】

    题目链接 题意: 给出一个n*m大小的01矩阵,在其中画线连成封闭图形,其中对每一个值为1的方格,线要恰好穿入穿出共两次,对每一个值为0的方格,所画线不能经过. 参考资料: <基于连通性状态压缩 ...

  10. libopencv_imgcodecs3.so.3.3.1: undefined reference to `TIFFReadDirectory@LIBTIFF_4.0

    ubundu 编译 C++工程时遇到的: 解决方案: https://blog.csdn.net/qq_29572513/article/details/88742652