用表格制作课程表和表单元素 - html

首页 > 博客列表 > 用表格制作课程表和表单元素

博主信息

博文 41

粉丝 0

访问量 41672

专题推荐

更多>

陈昕怡的课程表

表格元素

<caption> 标签来为表格设置标题
<table> 表示表格，表格的所有内容需要写在 <table> 和 </table> 之间。
<tr> 表示表格的行。
<td> 表示表格的单元格
<th> 表示表格的表头。大多数的浏览器会把表头显示为粗体居中的文本
border-collapse:collapse 可以使表格的双边框变为单边框
rowspan：表示跨行合并;n 是一个整数，表示要合并的行数或者列数。

<td rowspan="n">单元格内容</td>

colspan：表示跨列合并;n 是一个整数，表示要合并的行数或者列数。

<td colspan="n">单元格内容</td>

代码部分

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <table border="1">
      <caption>
        陈欣怡的课程表
      </caption>
      <thead>
        <tr>
          <th colspan="2"></th>
          <th>星期一</th>
          <th>星期二</th>
          <th>星期三</th>
          <th>星期四</th>
          <th>星期五</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td rowspan="4">上午</td>
          <td>1</td>
          <td>语文</td>
          <td>数学</td>
          <td>英语</td>
          <td>化学</td>
          <td>物理</td>
        </tr>
        <tr>
          <td>2</td>
          <td>语文</td>
          <td>数学</td>
          <td>英语</td>
          <td>化学</td>
          <td>物理</td>
        </tr>
        <tr>
          <td>3</td>
          <td>语文</td>
          <td>数学</td>
          <td>英语</td>
          <td>化学</td>
          <td>物理</td>
        </tr>
        <tr>
          <td>4</td>
          <td>语文</td>
          <td>数学</td>
          <td>英语</td>
          <td>化学</td>
          <td>物理</td>
        </tr>
        <tr>
          <td colspan="7">下午</td>
        </tr>
        <tr>
          <td rowspan="4">上午</td>
          <td>5</td>
          <td>语文</td>
          <td>数学</td>
          <td>英语</td>
          <td>化学</td>
          <td>物理</td>
        </tr>
        <tr>
          <td>6</td>
          <td>语文</td>
          <td>数学</td>
          <td>英语</td>
          <td>化学</td>
          <td>物理</td>
        </tr>
        <tr>
          <td>7</td>
          <td>活动</td>
          <td colspan="4">自由组织</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

表单元素

form控件

所有表单元素都应该写到form控件中

<form action="" method="POST" enctype="multipart/form-data">
<input type="text" id="" name="">
</form>

如果表单元素在form控件外，应该增加属性form=”formid”

<form action="" method="POST" enctype="multipart/form-data">
<input type="text" id="" name="" form="formid">
</form>

form控件属性说明
- action 用于填写表单处理文件地址
- method 数据提交请求方式
  - GET Get方式在通过URL提交数据，数据在URL中可以看到
  - POST POST方式，数据放置在HTML HEADER内提交，如果有文件上传需选择。
- enctype 表单数据发送到服务器之前如何对其进行编码
  - 默认application/x-www-form-urlencoded
  - 如果有文件上传需选择multipart/form-data

文本框 input

input 用于收集用户信息，根据type的不同可以分为以下几种形式

text 文本类型

<input type="text" name="" id="">

mail 类型

<input type="text" name="" id="">

password 密码类型

<input type="password" name="" id="">

radio 单选类型:单选框name必须相同

<input type="radio" name="gender" id="">
<input type="radio" name="gender" id="">

hidden 隐藏域类型:用于隐藏提交数据，前台不显示
- 默认选用用checked ，只能一个

<input type="radio" name="gender" id="" checked>
<input type="radio" name="gender" id="">

checkbox 复选框类型
- 默认选用用checked ，可以多个

<input type="checkbox" name="" id="" checked>
<input type="checkbox" name="" id="" checked>
<input type="checkbox" name="" id="">

文件域用来提交文件

<input type="file" name="file" id="file" />

下拉列表 select

select元素可创建单选或多选菜单
select元素中的 <option> 标签用于定义列表中的可用选项
默认选中增加属性selected
label属性值优先级大于option文本

<select name="" id="">
    <option value="" selected></option>
    <option value="" label=""></option>
</select>

文本域

文本域用于多文本输入

<textarea name="" id="" cols="30" rows="10"></textarea>

提交按钮

提交按钮 botton

<button type=""></button>

代码部分

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <form action="" method="POST" enctype="multipart/form-data">
      <label for="username">用户名：</label>
      <input type="text" name="username" id="username" />
      <label for="email">邮箱：</label>
      <input type="email" name="email" id="email" />
      <label for="password">密码：</label>
      <input type="password" name="passrword" id="password" />
      <label for="gender">性别：</label>
      <input type="radio" name="gender" id="male" checked /><label for="male">男</label> <input type="radio" name="gender" id="female" /><label for="female">女</label>
      <input type="hidden" />
      <label for="edu">学历：</label>
      <select name="edu" id="edu">
        <option value="1">初中</option>
        <option value="1" selected>高中</option>
        <option value="1">大专</option>
        <option value="1">本科</option>
      </select>
      <label for="#">兴趣爱好</label>
      <textarea name="" id="" cols="30" rows="10"></textarea>
      <label for="file">头像</label>
      <input type="file" name="file" id="file" />
      <button type="submit">提交</button>
    </form>
  </body>
</html>

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

第一次作业---html标签及元素

2020-12-09 11:29:36