专栏首页eadelaHTML5-注册表单案例fieldset

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;
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jQuery基础--插件

    官方API:http://api.jqueryui.com/category/all/

    eadela
  • jQuery基础--CSS操作、class操作、attr操作、prop操作

    eadela
  • vuejs基础-v-for用法

    在组件中,使用v-for循环的时候,或者在一些特殊情况中,如果v-for有问题,必须使用v-for的同时,指定唯一的字符串/数字类型:key值

    eadela
  • Label和input实现纯CSS切换

    打开之后点击label,你会发现焦点会聚焦到for对应的id上面,正因为这个关系,我们可以纯CSS实现tab切换。

    wade
  • poi读取Excel时日期为数字 的解决方法

    我们期望这个日期解析出来是:2015/8/21,而结果却是42237.什么原因呢?这个数字是什么呢?是以1900年为原点,到2015年8月21日,之间经过的天数...

    IT云清
  • django-debug-toolbar的配置以及使用

    django,web开中,用django-debug-toolbar来调试请求的接口,无疑是完美至极。   可能本人,见识博浅,才说完美至极, 大神,表喷,抱拳...

    Wyc
  • django-debug-toolbar安装配置及使用

    django-debug-toolbar是一个非常方便的工具,可以深入了解代码的工作以及它花费多少时间。特别是它可以显示你的页面生成的所有SQL查询,以及每个人...

    菲宇
  • 纯CSS换肤

    老规矩,先把代码给大家,拿去粘贴直接用,无需引用,不好用评论底下随便喷,我一条一条看。

    我不是费圆
  • 每个开发者都应该了解的一些C++特性

    当然,这些改变不是一夜之间发生的。曾几何时,C++缺乏活力,导致人们不太喜欢这门语言。

    机器之心
  • 单链路性能测试实践

    链路这个词其实不如路径通俗易懂,跟产品沟通这个比较有效率。具体的操作路径,产品会给一份出来,但是这都是基于UI和产品思维的文档,跟接口测试区别还是很大的,只能提...

    FunTester

扫码关注云+社区

领取腾讯云代金券