使用html,css,javascript编写一个语文成绩表单网页。功能如下:一个大盒子里面使用label,一个div里面套一个input控件实现自动提交以及一个div小盒子来用来提示异常。最后那个小盒子使用Javascript来实现异常提醒包括,成绩栏输入为空是提醒成绩不能为空,成绩栏输入不是数字时提醒“”成绩只能输入数字,输入栏中的数字不在一百范围内时提醒输入方式不对“”
时间: 2024-03-05 20:54:04 浏览: 50
基于PHP+SQL公共课平时成绩查询系统的毕业设计(源代码+毕设文档+答辩PPT),使用了HTML、CSS和JavaScript
5星 · 资源好评率100%
好的,我可以为您提供一个简单的示例代码,您可以在此基础上进行修改和优化。以下是HTML、CSS和Javascript代码。
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>语文成绩表单</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<label for="score">成绩:</label>
<div class="input-box">
<input type="text" id="score" name="score">
<button type="button" id="submit-btn">提交</button>
</div>
<div id="error-msg"></div>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS代码:
```css
.container {
margin: 50px auto;
width: 400px;
text-align: center;
}
label {
display: inline-block;
margin-bottom: 10px;
}
.input-box {
display: inline-block;
}
input[type="text"] {
width: 200px;
height: 30px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
height: 30px;
padding: 0 10px;
margin-left: 10px;
background-color: #008CBA;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
#error-msg {
margin-top: 10px;
color: #FF0000;
font-size: 14px;
}
```
Javascript代码:
```javascript
window.onload = function() {
var submitBtn = document.getElementById("submit-btn");
var scoreInput = document.getElementById("score");
var errorMsg = document.getElementById("error-msg");
submitBtn.onclick = function() {
var score = scoreInput.value.trim();
if (score === "") {
errorMsg.innerHTML = "成绩不能为空";
return;
}
if (isNaN(score) || score < 0 || score > 100) {
errorMsg.innerHTML = "成绩只能输入数字且在0-100范围内";
return;
}
errorMsg.innerHTML = "";
// 在这里添加提交表单的代码
}
}
```
注意,这只是一个简单的示例代码,您需要根据自己的需求进行修改和优化。
阅读全文