Educoder – Web程序设计基础2021秋 --实训作业全总结
web程序设计基础R实验报告 2021年 —太原理工大学
持续更新呦!!!推荐收藏
一、对表单进行验证
第1关:表单验证相关的概念
1、下列选项中,对表单控件的值进行非空验证的属性为( )
A、required
2、在input控件的类型中,下列选项中对输入有校验功能的是( )
C、email
3、关于输入字符数的限定,下列代码中,设置正确的是( )。
D、<input type="text" maxlength="6"/>
4、匹配1个或多个在它前面的元字符是( )。
B、+
5、若限定用户输入6位数字,下列的代码正确的是( )。
C、<input type="text" pattern="^([0-9]{6})$">
第2关 非空校验
1、 编程要求
根据提示,在右侧编辑器补充代码,在右侧编辑器中的Begin - End区域内补充代码,具体要求是:
- 在form>中创建一个1个不超过6位的密码输入框。
- 要求用户必须填写密码。
- 用户鼠标悬停在密码框上时,显示提示文字“请输入不超过6位的密码!”。
运行效果如下:
2、 代码展示
<html>
<head>
<meta charset="utf-8"/>
<title>设置非空校验</title>
</head>
<body>
<form>
密码:
<!-- ********* Begin ******* -->
<input type="password" required="required" title="请输入不超过6位的密码!" maxlength="6" >
<!-- ********* End ********* -->
<input type="submit" value="提交"/>
</form>
</body>
</html>
第3关: 邮箱验证
1、 编程要求
根据提示,在右侧编辑器补充代码,在右侧编辑器中的Begin - End区域内补充代码,具体要求是:
- 在form>中创建一个1个电子邮箱的输入框。
- 要求用户必须填写电子邮箱。
- 电子邮箱输入框中显示输入格式的提示信息,提示文字“输入格式:xxx@xxx”。
2、 代码展示
<html>
<head>
<meta charset="utf-8"/>
<title>设置邮箱校验</title>
</head>
<body>
<form>
密码:
<input type="password" required="required" title="请输入6位密码!" maxLength="6"/><br/>
邮箱:
<!-- ********* Begin ******* -->
<input type="email" required="required" placeholder="输入格式:xxx@xxx"></input>
<!-- ********* End ********* -->
<br/> <input type="submit" value="提交"/>
</form>
</body>
</html>
第4关:pattern验证
1、 编程要求
根据提示,在右侧编辑器补充代码,在右侧编辑器中的Begin - End区域内补充代码,具体要求是:
- 在form>中创建一个1个年龄的输入框。
- 要求用户必须填写年龄框。
- 年龄输入框中只能输入0-99的数字。
2、 代码展示
<html>
<head>
<meta charset="utf-8"/>
<title>设置年龄校验</title>
</head>
<body>
<form>
密码:
<input type="password" required="required" title="请输入6位密码!" maxLength="6"/><br/>
邮箱:
<input type="email" required="required" placeholder="输入格式:xxx@xxx"/><br/>
年龄:
<!-- ********* Begin ******* -->
<input type="text" required="required" pattern="^[1-9]?[0-9]$"/><br/>
<!-- ********* End ********* -->
<br/> <input type="submit" value="提交"/>
</form>
</body>
</html>
二、创建文本区域
第1关:textarea控件相关概念
1、若将文本区域设置为显示10行,每行显示50个字符,正确选项是( )
C、<textarea rows="10" cols="50">
2、若将文本区域设置为只读的,可在textarea标签中添加( )属性。
B、readonly
3、在表单提交时使textarea 中的文本换行,正确的选项是( )
D、<textarea name="mm" rows="5" cols="50" wrap="hard">
4、textarea标签的属性不包括( )
A、width
5、textarea文本区域的宽度可用size属性来设置。
B、错误
第2关:创建文本域
1、 编程要求
请在右侧编辑器中的Begin - End区域内补充代码,具体要求是:
- 创建一个文本域
- 文本域的名称为“reason"
- 文本域中可见行数为为6,每行50个字符
- 文本域内容必须填写
- 表单提交时,文本显示区中的文本在行尾要自动换行
2、 代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>设置文本域</title>
</head>
<body>
<form action="" method="post">
请输入你选择本专业的理由:<br/>
<!-- ********* Begin ********* -->
<textarea name="reason" rows="6" cols="50" required="required" wrap="hard"></textarea>
<!-- ********* End ********* -->
<br/>
<input type="reset" value="重置">
<input type="submit" value="提交">
</body>
</html>
三、 表单的结构
第1关:表单的基本概念
1、下列选项中,不属于表单标记的常用属性的是( )。
D、size
2、在HTML中,,method属性表示( )。
A、提交方式
3、在HTML中,( )标签用于在网页中创建表单。
C、<form>
4、在表单提交方式中,get方式的保密性好,并且无数据量的限制。`
B、错误
5、在HTML中,要创建一个名为“myform”的表单,以get方式向服务器发送,表单提交后,执行程序的地址为passwodl.jsp,下面创建表单的代码中,正确的是( )。
C、<form name="myform" method="get" action="passwodl.jsp">...</form>
第2关:学会设置action和method属性
1、 编程要求
根据提示,在右侧编辑器补充代码,在右侧编辑器中的Begin - End区域内补充代码,具体要求是:
- 创建一个带有下列选择的表单,表单名为"selectForm"
- 表单提交方式为post
- 表单提交后,执行程序"myselect.jsp"。
2、 代码展示
<!DOCTYPE html>
<html>
<body>
<!-- ********* Begin ********* -->
<form name="selectForm" method="post" action="myselect.jsp">
<!-- ********* End ********* -->
<select size="1">
<option value="JZ">橘子</option>
<option value="PG">苹果</option>
<option value="XJ">香蕉</option>
</select>
</form>
</body>
</html>
四、创建输入控件
第1关:input控件相关概念
1、在表单中插入单选按钮的HTML代码是( )。
C、< input type="reset" >
2、HTML代码表示( )。
B、创建一个单行文本输入区域
3、对于标签,如果希望实现密码框效果,* 值是( )。
C、password
4、下列选项中,用于设置input控件在首次加载时为禁用的属性是( )。
A、disabled
5、设置表单中密码框的最大长度为15正确的属性设置是( )
D、maxlength=15
第2关:创建文本框
1、 编程要求
请在右侧编辑器中的Begin - End区域内补充代码,具体要求是:
- 创建一个单行文本框
- 文本框的名称为“yourname"
- 文本框的宽度为15
- 文本框中最多输入字符数为5
2、 代码展示
<html>
<head>
<meta charset="utf-8"/>
<title>设置单行文本框</title>
</head>
<body>
<form>
姓名:
<!-- ********* Begin ******* -->
<input type="text" name="yourname" size="15" maxlength="5">
<!-- ********* End ********* -->
</form>
</body>
</html>
第3关:创建密码框
1、 代码展示
<html>
<head>
<meta charset="utf-8"/>
<title>设置密码框</title>
</head>
<body>
<form>
姓名:
<input type="text" name="yourname" size="15" maxlength="5"/>
<br>
密码:
<!-- ********* Begin ******* -->
<input type="password" name="yourpassword" size="15" value="12345">
<!-- ********* End ********* -->
</form>
</body>
</html>
第4关:创建单选按钮
1、 代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>设置单行文本框</title>
</head>
<body>
<form action=""method="post">
姓名:<input type="text" name="yourname" size="15" maxlength="5"/><br/>
密码:<input type="password" name="password" size="15" value="12345"/><br/>
国庆期间你最喜欢看的电影?<br/>
<!-- ********* Begin ********* -->
<input type="radio" name="Film" value="Film1">冠
<input type="radio" name="Film" value="Film2">我和我的祖国
<input type="radio" name="Film" value="Film3">姜子牙
<!-- ********* End ********* -->
</form>
</body>
</html>
第5关:创建复选框
1、 代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>设置单行文本框</title>
</head>
<body>
<form action=""method="post">
姓名:<input type="text" name="yourname" size="15" maxlength="5"/><br/>
密码:<input type="password" name="password" size="15" value="12345"/><br/>
国庆期间你最喜欢看的电影?<br/>
<input name="Film" type="radio" value="Film1"/>夺冠
<input name="Film" type="radio" value="Film2"/>我和我的祖国
<input name="Film" type="radio" value="Film3"/>姜子牙<br/>
你喜欢的运动是?<br/>
<!-- ********* Begin ********* -->
<input type="checkbox" name="Sports" value="sport1" checked="checked">打篮球
<input type="checkbox" name="Sports" value="sport2">打排球
<input type="checkbox" name="Sports" value="sport3">踢足球
<input type="checkbox" name="Sports" value="sport4">其他
<!-- ********* End ********* -->
</form>
</body>
</html>
第6关:重置与提交按钮
1、 代码展示
<!DOCTYPE html>
<html>
<body>
<head>
<meta charset="utf-8"/>
<title>设置单行文本框</title>
</head>
<body>
<form action="" method="post">
姓名:<input type="text" name="yourname" size="15" maxlength="5"/><br/>
密码:<input type="password" name="password" size="15" value="12345"/><br/>
国庆期间你最喜欢看的电影?<br/>
<input name="Film" type="radio" value="Film1"/>夺冠
<input name="Film" type="radio" value="Film2"/>我和我的祖国
<input name="Film" type="radio" value="Film3"/>姜子牙<br/>
你喜欢的运动是?<br/>
<input name="Sports" type="checkbox" value="sport1" checked="checked"/>打篮球
<input name="Sports" type="checkbox" value="sport2"/>打排球
<input name="Sports" type="checkbox" value="sport3"/>踢足球
<input name="Sports" type="checkbox" value="sport4"/>其他 <br/>
<!--********* Begin ********* -->
<input type="reset" value="重置"/>
<input type="submit" value="提交"/>
<!-- ********* End ********* -->
</form>
</body>
</html>
五、 创建下拉元素
第1关:下拉列表控件相关概念
1、<select>
标签用于创建( )
D、下拉列表选框
2、<select>
用于在表单中插入一个下拉列表框,它需要与哪个标签配合使用( )
C、<option>
3、设置下拉列表框中某项被默认选中的属性是( )。
C、selected
4、若设置下拉列表为多选,可在select标签中添加( )属性。
B、multiple
5、下拉列表设置 表明( )
A、可以看到3个下拉列表选项
第2关:创建下拉列表
1、 代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>创建下拉列表</title>
</head>
<body>
<form action="" method="get">
<!-- ********* Begin ******* -->
<select size="2">
<option>玩游戏
<option>看电影
<option>听音乐
</select>
<!-- ********* End ********* -->
</form>
</body>
</html>
第3关:设置多选和默认选项
1、 代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>创建多选和默认选项</title>
</head>
<body>
<form action="" method="get" >
<!-- ********* Begin ******* -->
<select multiple="multiple">
<option selected="selected">猫</option>
<option>狗</option>
<option>鸟</option>
<option >鸭子</option>
</select>
<!-- ********* End ********* -->
</form>
</body>
</html>
六、 对表单元素分组
第1关:分组元素相关的概念
1、fieldset标签用于定义( )
C、
表单的一个子容器
2、表单的分组标题可以用( )设置。
D、
legend标签
3、下列选项中,( )不属于fieldset标签的属性。
A、size
4、下列关于表单分组的设置代码,正确的是( )
B、
<fieldset>
<legend>请选择个人爱好</legend>
<input type="radio" name="user"/>打篮球
<input type="radio" name="user"/>打排球
</fieldset>
第2关 对表单元素分组
1、编程要求
仿照上面的示例,在右侧编辑器中的Begin - End区域内补充代码,具体要求是:
- 在之间添加legend标签为表单的分组添加题目;
- 在之间添加边框标题的设置,标题文字为“请选择个人爱好”;
- 在legend之后添加3个复选框。其name属性统一设置为“hobby”
2、代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单分组</title>
</head>
<body>
<form>
<!-- ********* Begin ********* -->
<fieldset>
<legend>请选择个人爱好</legend>
<input type="checkbox" name="hobby">音乐
<input type="checkbox" name="hobby">体育
<input type="checkbox" name="hobby">其他
</fieldset>
<!-- ********* End ********* -->
</form>
</body>
</html>
七、给表单组件添加说明
第1关:label标签相关概念
1、为了给单行文本框绑定文本标注,以便于用户单击该关联文本时可以使文本框获得焦点,可采用( )标签定义文本。
B、
label
2、
3、
第2关:给表单组件添加说明__单选框
1、编程要求
编程要求
根据提示,在右侧编辑器补充代码,在右侧编辑器中的Begin - End区域内补充代码,具体要求是:
- 创建一个三选一的选择区
- 单选的名称为“Film"
- 第一个选项的value值为“Film1”,提示文字为"夺冠"
- 第二个选项的value值为“Film2”,id值也设置为“Film2”,提示文字为"我和我的祖国",并将该提示文字用显式的方法与这个单选控件绑定。
- 第三个选项的value值为“Film3”,提示文字为"姜子牙"并将该提示文字用隐式的方法与这个单选控件绑定。
2、代码展示
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>为表单的单选控件添加说明</title>
</head>
<body>
<form>
国庆期间你最喜欢看的电影?<br/>
<!-- ********* Begin ******* -->
<input name="Film" type="radio" value="Film1">夺冠<br>
<input name="Film" type="radio" value="Film2" id="Film2"><label for="Film2">我和我的祖国</label>
<label><input type="radio" name="Film" value="Film3">姜子牙</label>
<!-- ********* End ********* -->
</form>
</body>
</html>
第3关:给表单组件添加说明——多选框
1、 编程要求
在右侧编辑器中的Begin - End区域内补充代码,具体要求是:
- 创建一个有4个选项的多项选择区
- 多选的名称为“Sports"
- 第一个选项的value值为“sport1”,设置为默认选中,提示文字为"打篮球"
- 第二个选项的value值为“sport2”,id值也设置为“sport2”,提示文字为"打排球",并将该提示文字用显式的方法与这个复选控件绑定。
- 第三个选项的value值为“sport3”,提示文字为"踢足球"并将该提示文字用隐式的方法与这个单选控件绑定。
- 第四个选项的value值为“sport4”,提示文字为"其他。
2、代码展示
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>为表单的复选控件添加说明</title>
</head>
<body>
<form>
你喜欢的运动是?<br/>
<!-- ********* Begin ******* -->
<input type="checkbox" name="Sports" checked="checked" value="sport1">打篮球
<input type="checkbox" name="Sports" id="sport2" value="sport2"><label for="sport2">打排球</label>
<label><input type="checkbox" name="Sports" value="sport3">踢足球</label>
<input type="checkbox" name="Sports" value="sport4">其他
<!-- ********* End ********* -->
</form>
</body>
</html>
第4关:给表单组件添加说明-文本框和文本域
1、编程要求
本关任务:创建包含一个单选框和一个文本域的表单,并为该文本框和文本域控件绑定标注文字。实现的效果如下:
2、代码展示
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>为文本域控件添加说明</title>
</head>
<body>
<form>
推荐人:
<!-- ********* Begin ******* -->
<input type="text" autofocus="autofocus"><br>
<label for="reason">推荐理由:</label><br>
<textarea cols="60" rows="6" id="reason" wrap="hard" required="required"></textarea>
<!-- ********* End ********* -->
</form>
</body>
</html>