您的位置：首页 > Web前端 > HTML

HTML学习笔记2

2018-03-19 16:53 555 查看

现在正在使用Hbuilder完成javaEE课程的作业，题目为：设计一个调查问卷页面，并使用JS脚本验证表单输入的合法性。
主要难点在于如何验证表单输入的合法性以及各个选择框的语法。
完成界面如下：

背景图片下载自千库网。

在这个过程中，我所学到的知识点如下：
1.在<style></style>中使用body{----}来设置背景图片。未解决的问题：图片过大，出现横向拉条。设置背景图片的代码：<style>
body{
background:url(图片地址) no-repeat;
background-size:cover;
background-attachment:fixed;
}
</style>2.网页实现的是一个调查页面，调查页面有提交按钮。在用户点击提交的时候，触发<script>中的函数functioni check(form){---}去判断表单合法性。例如，在这个作业中，我设置了用户必须要填写姓名才可以提价。当用户没有填写姓名而点击了提交时，这行代码<input type = "submit" name = "submit" value = "提交" onclick = "return check(this.form)" style = "font-family:'微软雅黑';font-size:25px">将会根据check函数的返回值进行判断表单是否提交。函数定义如下：<script>
function check(form)
{
if(form.userId.value == "")
{
alert("姓名不能为空！");
form.userId.focus();
return false;
}
return true;
}
</script>注：form.userId.focus()的作用是将光标定位到姓名那一栏的文本框里。
当表单全部合法的时候，再次点击“提交”按钮将触发<form onsubmit = "return submit_sure()">中的submit_sure()函数，此函数会弹出一个对话框询问是否确认提交，若确认则弹出“提交成功”并返回true;反之则返回false.系统再根据这个函数的返回值确定是否提交表单。
函数定义如下：<script>
function submit_sure(){
var x= confirm("是否确认提交？")；
if（x == true）{
alert("提价成功！")；
return true;
}
return false;
}
</script>注：confirm方法用于显示一个带有指定消息的对话框。
3.表单制作：
单选：radio
复选：checkbox
下拉：select ; option
文本：textarea

本次作业的完整代码如下：<html>

<head>
<meta charset="utf-8" />
</head>

<script>
//*************************************验证表单合法***********************************
function check(form) {
if(form.userId.value == '') {
alert("姓名不能为空");
form.userId.focus();//光标定位到文本框中
return false;
}
return true;
}
//*************************************验证表单合法***********************************

//************************************表单提交确认消息********************************
function sumbit_sure() {
var x = confirm("确定要提交?");
if(x == true) {
alert("提交成功！")
return true;
} else {
return false;
}
}
//************************************表单提交确认消息********************************
</script>


<style>
body {
background: url(img/水墨桃花飘落.jpg) no-repeat;
background-size: cover;
background-attachment: fixed;
}
</style>


<body>

<h1 style="position: relative;font-size:30px;text-align: center;font-family: '微软雅黑';">
调查问卷
</h1><br /><br />



<div style="position: relative;font-size:25px;left: 600px;font-family: '微软雅黑';">


<form onsubmit="return sumbit_sure()">


姓名:
<input type="text" name="Username" id="userId">


<br/><br />


请选择您的性别:
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女


<br />
<br />


请选择您喜欢的课程（可多选）：
<input type="checkbox" name="course" value="语文" />语文
<input type="checkbox" name="course" value="数学" />数学
<input type="checkbox" name="course" value="英语" />英语


<br />
<br />


请简单介绍一下你自己：
<br />
<br />
<textarea rows="10" cols="60" style="" class="textarea"></textarea>


<br />
<br />


请选择您所在的大学：
<select name="university" style="font-family: '微软雅黑';font-size: 25px;">
<option value="集美大学">集美大学</option>
<option value="华侨大学">华侨大学</option>
<option value="厦门大学">厦门大学</option>
</select>


<br />
<br />


<input type=submit name="submit" value="提交" onclick="return check(this.form)" style="font-family :' 微软雅黑';font-size:25px;">


</form>
</div>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： HTML js

相关文章推荐

新的分享

章节导航