1209列表\表格\表单

1.列表
列表的主要作用是用来做容器,装其他标签内容;
一个标签不够需要其他标签来帮忙的,引申复合标签配套使用;
2.表格
表格由表头\表身\表尾组成;
每一行都是tr打头,td/th是单元格装东西;
表格支持横纵合并;
3.表单
表单的任务是收集用户数据;
概况起来说,用户需要看到有意义的提示,然后输入合法的信息;
form 是大哥,小弟都进来;大哥把数据打包决定以post还是get的方式把数据发给服务器的某某某;小弟的身份以name区分,小弟要说啥用value表示;在用户这边小弟以type=xxx显得不同
label标签一是可以用文本提示用户要输入什么,二是可以做个id简单跳转;
input是输入控件,完成实际采集工作,文本类就是text\password\email,
单选radio多选checkbox,多选时name要用数组来收集
列表select+option
隐藏域hidden悄悄给服务器传递信息;
文件域file的特别之处是form的method要为post,enctype也要选带form的;

form表单和输入控件也可以通过控件的form属性指向表单的id以实现关联。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>课程表练习</title>
    <style>
      table,
      th,
      td {
        border: 1px solid black;
        border-collapse: collapse;
      }
    </style>
  </head>
  <body>
    <!-- 1.列表练习 -->
    <ul>
      <li>苹果</li>
      <li>香蕉</li>
      <li>菠萝</li>
    </ul>
    <ol>
      <li>先学HTML</li>
      <li>再学CSS</li>
      <li>最后学PHP</li>
    </ol>
    <dl>
      <dt>地址</dt>
      <dd>光明村88号</dd>
      <dt>电话</dt>
      <dd>12316</dd>
    </dl>
    <!-- 2.表格练习:课程表 -->
    <table>
      <caption>
        我的课程表
      </caption>
      <thead>
        <tr>
          <td>时间</td>
          <td>序号</td>
          <td>星期一</td>
          <td>星期二</td>
          <td>星期三</td>
          <td>星期四</td>
          <td>星期五</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td rowspan="4">上午</td>
          <td>1</td>
          <td>语文</td>
          <td>数学</td>
          <td>英语</td>
          <td>化学</td>
          <td>地理</td>
        </tr>
        <tr>
          <!-- <td></td> -->
          <td>2</td>
          <td>语文</td>
          <td>数学</td>
          <td>英语</td>
          <td>化学</td>
          <td>地理</td>
        </tr>
        <tr>
          <!-- <td></td> -->
          <td>3</td>
          <td>语文</td>
          <td>数学</td>
          <td>英语</td>
          <td>化学</td>
          <td>地理</td>
        </tr>
        <tr>
          <!-- <td></td> -->
          <td>4</td>
          <td>语文</td>
          <td>数学</td>
          <td>英语</td>
          <td>化学</td>
          <td>地理</td>
        </tr>
        <tr>
          <td colspan="7" style="text-align: center">中午休息</td>
        </tr>
        <tr>
          <td rowspan="3">下午</td>
          <td>1</td>
          <td>语文</td>
          <td>数学</td>
          <td>英语</td>
          <td>化学</td>
          <td rowspan="3">课外活动</td>
        </tr>
        <tr>
          <!-- <td></td> -->
          <td>2</td>
          <td>语文</td>
          <td>数学</td>
          <td>英语</td>
          <td>化学</td>
          <!-- <td>地理</td> -->
        </tr>
        <tr>
          <!-- <td></td> -->
          <td>3</td>
          <td>语文</td>
          <td>数学</td>
          <td>英语</td>
          <td>化学</td>
          <!-- <td>地理</td> -->
        </tr>
      </tbody>
    </table>
    <!-- 3.表单填写 -->
    <h3>用户注册</h3>
    <form action="" method="POST" enctype="multipart/form-data">
      <!-- 单行文本框输入 -->
      <label for="username">用户名:</label>
      <input
        type="text"
        name="username"
        value=""
        id="username"
        placeholder="请输入用户名"
        required
      />
      <br />
      <label for="password">密码:</label>
      <input
        type="password"
        name="password"
        value=""
        id="password"
        placeholder="请输入密码"
        required
      />
      <br />
      <label for="email">邮箱:</label>
      <input
        type="email"
        name="email"
        value=""
        id="email"
        placeholder="abc@qq.com"
        required
      />
      <!-- 单选和复选框 -->
      <div>
        <label for="secret">性别:</label>
        <input type="radio" name="sex" value="男" id="male" /><label for="male"
          >男</label
        >
        <input type="radio" name="sex" value="女" id="female" /><label
          for="female"
          >女</label
        >
        <input type="radio" name="sex" value="保密" id="secret" checked /><label
          for="secret"
          >保密</label
        >
      </div>
      <div>
        <label for="">爱好:</label>
        <input
          type="checkbox"
          name="hobby[]"
          value="program"
          id="program"
        /><label for="program">编程</label>
        <input type="checkbox" name="hobby[]" value="sleep" id="sleep" /><label
          for="sleep"
          >睡觉</label
        ><input type="checkbox" name="hobby[]" value="majo" id="majo" /><label
          for="majo"
          >打麻将</label
        >
      </div>
      <!-- 下拉列表 -->
      <label for="edu">学历:</label>
      <select name="edu" id="edu" multiple size="3">
        <option value="1">初中</option>
        <option value="2">高中</option>
        <option value="3" label="大学1">大学</option>
      </select>
      <!-- 文件域/隐藏域 -->
      <br />
      <input type="hidden" name="filesize" value="300000" />
      <input type="file" name="fileselect" id="fileselect" />
      <!-- 文本域 -->
      <div>
        <label for="explain">说明</label>
        <textarea
          name="explain"
          id="explain"
          cols="20"
          rows="3"
          placeholder="内容不超过60个字"
        ></textarea>
      </div>
      <button>提交</button>
    </form>
  </body>
</html>

相关文章