二级Web基础操作题练习（2）——表单表格结合类

kukuwawu

已于 2024-06-09 20:47:41 修改

阅读量243

点赞数 5

分类专栏：计算机二级Web 文章标签： html 前端学习 web 笔记

于 2024-06-06 09:30:00 首次发布

本文链接：https://blog.csdn.net/weixin_68085527/article/details/139470935

版权

计算机二级Web 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

-----要求-----

实现如下页面：

-----代码示例-----

分析：网页数据收集类，本案例中，先定义表格，保证格式整齐和大致范围，再嵌套表单。表单中，前5项文字由<th></th>定义，最后的“选择你喜欢的颜色”用<td></td>定义,以及“提交”和“重置”按钮前保留了第一个空格。

两者关系：

<form> 元素包含了整个表单，用于收集用户输入的信息，并将其发送到服务器进行处理。
<table> 元素用来创建表格布局，用于布局和组织表单元素，使得表单看起来更有条理。

<!doctype html>          <!-- 文档类型声明，指定了该文档遵循的 HTML 版本 -->
<html>
<head>
<meta charset="utf-8">   <!-- meta 指定网页的字符编码方式为 utf-8 -->
<title>信息表</title>     <!-- title 定义页面标题 -->
</head>

<body>
<h2>学生爱好信息</h2>     <!-- 标题标签，显示为二级标题 -->
<hr/>                    <!-- 在页面上插入一条水平线 -->
<table width="500" border="0" cellpadding="2" cellspacing="0">  
<!-- table 定义了一个表格，其中，width设置表格宽度为500像素，表格边框为0像素，即无边框，cellpadding设置单元格内边距为2像素，cellspacing设置的单元格之间的间距为0像素 -->
  <form action="server.php" method="post">  
 <!-- form 定义了一个表单，其中 action 属性指定了表单数据提交的处理页面，method 属性指定了使用 POST 方法提交表单数据 -->
  <tr> 
    <th>姓名：</th>       <!-- 定义了表格中的表头单元格 -->
    <td ><input type="text" name="username" size="20" /></td>  
<!-- input定义了输入格式为 文本框域 ，name定义名称，size定义了输入框的可见字符数 -->
  </tr>  
  <tr>     
     <th>性别：</th>  
     <td>  
       <input type="radio" name="sex" value="1" checked="checked" />男 
       <input type="radio" name="sex" value="2" />女  
<!-- radio 表示使用 单选按钮域 ，定义性别输入框，name定义按钮名称，value定义按钮的值，即被选中时，提交到服务器的值，checked表示默认状态下此栏被选中 -->  
      </td>  
  </tr>  
  <tr>  <!--  使用 下拉列表域 定义学历输入框  -->  
     <th>学历：</th>  
     <td>  
       <select name="edu">  
         <option>--请选择--</option>  
<!--  下拉菜单的默认选项，但它不会被视为有效的选择，因为它只是一个提示或占位符  --> 
         <option value="1">大专</option>  
         <option value="2">本科</option>  
         <option value="3">研究生</option>  
         <option value="4">其他</option>  
       </select>  
      </td>  
   </tr>  
   <tr>  <!-- 使用 复选框按钮域 定义选修课程输入框 -->  
     <th>选修课程：</th>  
     <td>  
       <input type="checkbox" name="course[]" value="4">Linux  
       <input type="checkbox" name="course[]" value="5">Apache  
       <input type="checkbox" name="course[]" value="6">Mysql  
       <input type="checkbox" name="course[]" value="7">PHP  
     </td>  
   </tr>  
   <tr>  <!-- 使用 多行输入框 定义自我评价输入框 -->  
     <th>自我评价：</th>  
     <td><textarea name="eval" rows="4" cols="40"></textarea></td>  
   </tr>  
   <tr>  <!--  定义提交和重置两个按钮--> 
     <td></td> 
     <td>  
       <input type="submit" name="sm" value="提交">  
      <input type="reset" name="rs" value="重置">  
     </td>  
   </tr> 
   <tr><td>选择您喜欢的颜色：</td>
   <td><input type="color" value="#00ff00" name="LC"/></td>
<!--  这是一个颜色选择器，用于选择学生喜欢的颜色-->
   </tr>
  </form>  
</table>  
</body>
</html>

-----HTML表单、表格常用元素及属性总结-----

http://t.csdnimg.cn/Vaqtjhttp://t.csdnimg.cn/Vaqtj