使用html,css,javascript编写一个语文成绩表单网页。功能如下:一个大盒子里面使用label,一个div里面套一个input控件实现自动提交以及一个div小盒子来用来提示异常。这个小盒子位于提交按钮之后,最后那个小盒子使用Javascript来实现异常提醒包括,成绩栏输入为空是提醒成绩不能为空,成绩栏输入不是数字时提醒“”成绩只能输入数字,输入栏中的数字不在一百范围内时提醒输入方式不对“”,输入的方式符合要求是,提示提交成功。
时间: 2024-03-05 21:55:01 浏览: 56
好的,这是一个比较详细的需求,我可以帮你解释一下具体的实现步骤。
首先,我们需要创建一个HTML页面,包括一个大盒子和几个小盒子。HTML代码可以像这样:
```html
<div class="container">
<form>
<label for="score">语文成绩:</label>
<div>
<input type="text" id="score" name="score">
<button type="submit">提交</button>
</div>
<div id="error-message"></div>
</form>
</div>
```
接着,我们需要添加一些CSS样式,使页面看起来更美观。你可以根据自己的喜好进行调整,这里只提供一个简单的样式:
```css
.container {
width: 500px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
form {
display: flex;
flex-direction: column;
}
label {
margin-bottom: 10px;
}
input[type="text"] {
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
button[type="submit"] {
margin-top: 10px;
padding: 5px 10px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: #fff;
cursor: pointer;
}
#error-message {
margin-top: 10px;
color: red;
}
```
现在页面看起来已经很不错了,接下来我们需要添加一些JavaScript代码来实现异常提醒。首先我们需要为表单添加一个提交事件监听器,当用户点击提交按钮时,我们需要检查输入的成绩是否符合要求。代码如下:
```javascript
const form = document.querySelector('form');
const scoreInput = document.querySelector('#score');
const errorMessage = document.querySelector('#error-message');
form.addEventListener('submit', function(event) {
event.preventDefault();
const score = scoreInput.value.trim();
if (score === '') {
errorMessage.textContent = '成绩不能为空';
} else if (!/^\d+$/.test(score)) {
errorMessage.textContent = '成绩只能输入数字';
} else if (score < 0 || score > 100) {
errorMessage.textContent = '成绩必须在0到100之间';
} else {
errorMessage.textContent = '提交成功';
form.submit();
}
});
```
这段代码首先获取了表单元素、成绩输入框和错误提示框的DOM元素,然后为表单添加了一个submit事件监听器。当用户点击提交按钮时,我们首先取消默认的表单提交行为,然后获取输入框中的成绩,使用正则表达式判断成绩是否只包含数字,再判断成绩是否在0到100之间。最后根据判断结果,更新错误提示框的内容,并在输入符合要求时提交表单。
至此,一个简单的语文成绩表单网页就完成了,你可以将代码复制到一个HTML文件中,然后在浏览器中打开查看效果。
阅读全文