Educoder -- Web程序设计基础2021秋--构建web表单_根据需要创建“教育背景”的原型对象;完善addedubg函数,实现添加教育背景功能,教-CSDN博客

本文链接：https://blog.csdn.net/hannah2233/article/details/121733809

Educoder – Web程序设计基础2021秋 --实训作业全总结
 web程序设计基础R实验报告 2021年 —太原理工大学
持续更新呦！！！推荐收藏

文章目录

一、对表单进行验证
二、创建文本区域
- - 第1关：textarea控件相关概念
  - 第2关：创建文本域
三、表单的结构
- - 第1关：表单的基本概念
  - 第2关：学会设置action和method属性
四、创建输入控件
五、创建下拉元素
六、对表单元素分组
- - 第1关：分组元素相关的概念
  - 第2关对表单元素分组
七、给表单组件添加说明

一、对表单进行验证

第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、标签中的for属性取值为（）
C、
要绑定的表单控件的id属性值

3、标签中的form属性取值为（）
A、所属表单的id值

第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>