前端--表单提交案例

最新推荐文章于 2024-03-18 22:44:54 发布

暮光ジ青柠

最新推荐文章于 2024-03-18 22:44:54 发布

阅读量460

点赞数 1

分类专栏：前端案例文章标签：前端--form表单案例

本文链接：https://blog.csdn.net/weixin_44479992/article/details/103357971

版权

前端案例专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前端–表单提交案例（type属性）

表单边框

<fieldset>
        <legend>学生档案</legend>
 </fieldset>

成绩与水平连接

<label for="grade">入学成绩：</label>
        <input type="number" name="grade" id="grade" value="0" min="0" max="100">

        <label for="level">基础水平：</label>
        <meter id="level" low="60" high="90" max="100" min="0"></meter>

事件触动

<script>
    document.getElementById("grade").oninput=function () {
        document.getElementById("level").value=this.value;
    }
</script>

连接结果

在这里插入图片描述

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/form.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="eamil">邮箱地址：</label>
        <input type="email" name="email" id="eamil" required>

        <label for="subjects">所属学院：</label>
        <input type="text" name="subjects" id="subjects" list="select">
        <datalist id="select">
            <option value="经济与管理学院"></option>
            <option value="电子信息工程学院"></option>
            <option value="现代邮政学院"></option>
            <option value="通信学院"></option>
        </datalist>

        <label for="grade">入学成绩：</label>
        <input type="number" name="grade" id="grade" value="0" min="0" max="100">

        <label for="level">基础水平：</label>
        <meter id="level" low="60" high="90" max="100" min="0"></meter>

        <label for="data">入学日期：</label>
        <input type="date" name="data" id="data">

        <label for="cdata">毕业日期：</label>
        <input type="date" name="cdata" id="cdata">

        <input type="submit">
    </fieldset>

</form>

<script>
    document.getElementById("grade").oninput=function () {
        document.getElementById("level").value=this.value;
    }
</script>
</body>
</html>

结果

在这里插入图片描述

暮光ジ青柠

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端--表单提交案例

前端–表单案例表单边框<fieldset> <legend>学生档案</legend> </fieldset>成绩与水平连接<label for="grade">入学成绩：</label> <input type="number" name="grade" id="grade"...
复制链接

扫一扫