前端--表单提交案例
程序员文章站
2022-04-29 17:20:12
...
前端–表单提交案例（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>