html5写简易表单信息今日复习（整理比较乱，自己能懂就行）

最新推荐文章于 2024-08-03 16:11:42 发布

Luejim

最新推荐文章于 2024-08-03 16:11:42 发布

阅读量205

点赞数

文章标签： html html5 css

本文链接：https://blog.csdn.net/Luejim/article/details/108188163

版权

用html5写简易表单信息

在这里插入图片描述

html部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>信息表</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<form action="">
    <fieldset>
        <legend>学生信息</legend>
        <label for="userName">姓名</label>
        <input type="text" id="userName" name="userName"
               placeholder="请输入姓名">
        <label for="telNum">手机号</label>
        <input type="tel" id="telNum" name="telNum" required
               pattern="^((\d2,3)|(\d{3}\-))?13\d{9}$">
        <label for="email">邮箱地址</label>
        <input type="email" id="email" name="email">
        <label for="list">所属院系</label>
        <input type="text" list="select" id="list" name="list">
        <datalist id="select">
            <option value="java" ></option>
            <option value="c++"></option>
            <option value="pathon"></option>
        </datalist>
        <label for="score">入学成绩</label>
        <input type="number" id="score" name="score" max="100"
               min="0" value="0">
        <label for="level">基础水平</label>
        <meter value="" max="100" min="0" high="90" low="59" 
               id="level"></meter>
        <label for="intime">入学时间</label>
        <input type="date" id="intime" name="intime">
        <label for="outtime">毕业时间</label>
        <input type="date" id="outtime" name="outtime">
        <input type="submit">
    </fieldset>

</form>
<script>
    document.getElementById("score").oninput=function () {
        /*将当前level中的值=score中的值*/
        document.getElementById("level").value=this.value;
    }
    /*设置默认信息*/
    document.getElementById("telNum").oninvalid=function () {
        this.setCustomValidity("请填写手机号");
    }

</script>
</body>
</html>

样式部分：

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
form{
    width: 600px;
    margin: 10px auto;
}
form > fieldset{
    padding: 8px;
}
form  fieldset meter,
form  fieldset input{
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-radius: 5px;
    border: none;
    border: 1px solid #cccccc;
    margin: 10px auto;
    padding-left:10px;
    font-size: 16px;
}
form  fieldset meter{
    padding: 0;
}

总结：

datalist 标签：
优点：既可以输入又可以选择；
缺点：某些浏览器不兼容，例如：Firefox
日期时间：
datatime：大多浏览器不支持，但是Safari支持；
可以用datatime-local表示日期时间。
meter：度量器。衡量当前进度值

事件：
oninvalid 当登录不通过时触发；
setcustomvalidity可以修改设置默认提示信息。

Luejim

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5写简易表单信息今日复习（整理比较乱，自己能懂就行）

用html5写简易表单信息html部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>信息表</title> <link rel="stylesheet" href="style.css"></head><body><form action=""> &l
复制链接

扫一扫