入门HTML (二)实战！制作行与列的合并的课程表（带Emment语法），制作注册表单

入门HTML（二）表格与表单

内容

• 制作行与列的合并的课程表
• 制作注册表单

  一、制作行与列的合并的课程表

  

    <!--
        <table>是复合元素: 需要多个标签进行描述
        1. table: 表格容器
        2. caption: 表格标题(可选)
        3. tr: 表格中的行
        4. td/th: 单元格(列),数据容器,必须写到<tr>内部
           th与td区别在于多了"加粗和居中"样式,学用在thead中
    -->
<table border="1" width="400">
      <caption>
        <h2>课程表</h2>
      </caption>
      <!-- 表头 thead>tr>th -->
      <thead>
        <tr>
          <th>课程/星期</th>
          <th>星期一</th>
          <th>星期二</th>
          <th>星期三</th>
          <th>星期四</th>
          <th>星期五</th>
        </tr>
      </thead>
      <tbody>
    <!-- 表体  -->
      <!-- tr*8>td{x}*6 -->
        <tr>
          <!-- 垂直合并 rowspan-->
          <th rowspan="4">上午</th>
          <td>数学</td>
          <td>语文</td>
          <td>英语</td>
          <td>数学</td>
          <td>语文</td>
        </tr>
        <tr>
        <!-- 第2行第1列 -->
        <!-- <td>x</td> -->
          <td>语文</td>
          <td>数学</td>
          <td>语文</td>
          <td>语文</td>
          <td>数学</td>
        </tr>
        <tr>
        <!-- 第3行第1列 -->
        <!-- <td>x</td> -->
          <td>音乐</td>
          <td>英语</td>
          <td>科学</td>
          <td>英语</td>
          <td>英语</td>
        </tr>
        <tr>
        <!-- 第4行第1列 -->
        <!-- <td>x</td> -->
          <td>历史</td>
          <td>体育</td>
          <td>体活</td>
          <td>电脑</td>
          <td>道德</td>
        </tr>   
        <!-- 从第6行第1列开始,合并6列 -->
        <!-- 水平方向 colspan-->
        <!-- 将合并属性必须添加到第一个th中,并使用第1个th中的数据 -->
        <tr>
          <th bgcolor="lightblue" colspan="6">午休</th>
      </tr>   
        <tr>
          <th rowspan="2">下午</th>
          <td>英语</td>
          <td>地理</td>
          <td>数学</td>
          <td>生物</td>
          <td>历史</td>
        </tr>
        <tr>
          <td>班会</td>
          <td>电脑</td>
          <td>音乐</td>
          <td>体育</td>
          <td>地理</td>
        </tr>
        <!-- 表尾 -->
        <tfoot>
            <tr>
                <th>晚上</th>
                <th colspan="5">作业</th>
            </tr>
        </tfoot>
      </tbody>
    </table>

二、制作注册表单

<!--
    表单: 复合元素,用多个标签描述
    1. form: 表单控件的容器
    2. fieldset: 表单控件分组容器
    3. label: 控件标签名称
    4. input: 输入控件,类型由type属性决定
    5. select+option: 预定义列表框
    6. input+datalist+option: 预定义与自定义列表框
    7. textarea: 文本域(多行文本框)
    8. button: 按钮,默认同步提交(type="submit")
 -->
<!-- 注册表单 -->
<!--
  1. form.action: 后端处理表单的脚本,如 'register.php'
  2. form.method: 表单数据提交方式,默认为GET
    (1) GET: 数据以键值对方式,添加到url中,适合数量少且可公开的数据,如页码
    (2) POST: 数据在请求体中, url不可见,适合大量或敏感的数据,如密码,文件上传
  3. enctype: 表单数据编码方案
    (1) application/x-www-form-urlencoded: 默认对值对的编码方案
    (2) multipart/form-data: 分块,原始数据,适用文件上传
  4. target: _self(默认),_blank,和a.target相同
  5. id: 表单引用
  6. onsubmit: 表单提交事件,返回false,可拦截提交请求
 -->
<form action="register.php" method="POST">
  <fieldset style="display: inline-grid; gap: 1em">
    <legend>用户注册</legend>
    <!-- 单行文本框 -->
    <div class="username">
      <label for="uname">用户名:</label>
      <input type="text" name="username" placeholder="username" id="uname" autofocus />
    </div>
    <div class="my-email">
      <label for="my-email">邮箱:</label>
      <input type="email" name="my_email" id="my-email" placeholder="username@email.com" required />
    </div>
    <div class="psw">
      <label for="psw">密码:</label>
      <input
        type="password"
        name="password"
        id="psw"
        placeholder="******"
        required
        onkeydown="this.nextElementSibling.disabled=false"
      />
      <button type="button" disabled onclick="showPsw(this,this.form)">显示</button>
    </div>
    <!-- 数值类控件 -->
    <div class="age">
      <label for="age">年龄:</label>
      <input type="number" name="age" id="age" value="20" min="20" max="70" step="5" />
    </div>
    <!-- 日期控件 -->
    <div class="birthday">
      <label for="birthday">生日:</label>
      <input type="date" name="birthday" id="birthday" value="1990-01-01" min="1949-10-01" max="2003-01-01" />
      <!-- <input type="month" />
      <input type="week" />
      <input type="time" />
      <input type="datetime-local" name="" id="" /> -->
    </div>
    <!-- 其它常用控件简介 -->
    <!-- url控件 -->
    <div class="url">
      <label for="blog">博客:</label>
      <input type="url" name="url" id="blog" placeholder="http://" />
    </div>
    <!-- 拾色器 -->
    <div class="color">
      <label for="color">背景:</label>
      <input type="color" name="bgcolor" id="color" value="#ffff00" onchange="setBgColor(this,this.form)" />
    </div>
    <!-- 搜索框,和文本框相比,多一个清空按钮 -->
    <div class="search">
      <label for="keywords">搜索:</label>
      <input type="search" name="keywords" id="search" placeholder="输入关键字" />
    </div>
    <!-- 文件上传 -->
    <div class="upload">
      <label for="upload">头像:</label>
      <input type="file" name="user_pic" id="upload" accept="image/jpeg,image/png" />
      <button type="button" onclick="fileUploads(this.form)">上传</button>
    </div>
    <!-- 单选按钮 -->
    <div class="gender">
      <!-- 推荐与默认值的input.id绑定 -->
      <label for="secret">性别:</label>
      <!-- name="male",将这个键值对,做为变量与值,提交到后端脚本中处理 -->
      <!-- name: 必须相同,以保住唯一性 -->
      <input type="radio" name="gender" value="male" id="male" /><label for="male">男</label>
      <input type="radio" name="gender" value="female" id="female" /><label for="female">女</label>
      <!-- checked: 布尔属性, 默认选项 -->
      <input type="radio" name="gender" value="secret" id="secret" checked /><label for="secret">保密</label>
    </div>
    <!-- 重选框 -->
    <div class="hobby">
      <label>爱好:</label>
      <!--
        * 1. name: hobby[], 数组的语法形式,用于保存一个或多个值,这样后端处理脚本就可以获取到多个值
        * 2. input.value <=> input.id <=> label.for,其实只需要input.id <==> label.for
        * 3. checked: 默认选项
       -->
      <input type="checkbox" name="hobby[]" value="game" id="game" checked /><label for="game">游戏</label>
      <input type="checkbox" name="hobby[]" value="trave" id="trave" /><label for="trave">旅游</label>
      <input type="checkbox" name="hobby[]" value="shoot" id="shoot" /><label for="shoot">摄影</label>
      <input type="checkbox" name="hobby[]" value="program" id="program" checked /><label for="program">编程</label>
    </div>
    <!-- 下拉列表框 -->
    <div class="edu">
      <label for="edu">学历:</label>
      <!--
        * 1. name与value: 名值,分布在二个标签中,select.name , option.value
        * 2. selected: 默认选择
        * 3. 选择过多,且有规律,建议分组展示: optgroup
        * 4. 为select加提示: selected + disabled, 加到第一项之前
        * 5. multiple: 支持多选
       -->
      <!-- 下拉列表框, 将键与值所在的标签进行分离 -->
      <!-- select.name = select>option.value  -->
      <!-- select.form="指向当前表单元素" -->
      <select name="edu" id="edu" form="">
        <!-- <select name="edu" id="edu" multiple> -->
        <!-- select 标签不能加提示, 想加怎么办 -->
        <!-- 加提示 -->
        <option value="" selected disabled>--请选择--</option>
        <option value="0">文盲</option>
        <!-- 下拉选项分组: 同类组合在一起 -->
        <optgroup label="义务教育">
          <option value="1">小学</option>
          <option value="2">初中</option>
          <option value="3">高中</option>
        </optgroup>
        <optgroup label="高等教育">
          <option value="4">专科</option>
          <option value="5">本科</option>
          <option value="6">硕士</option>
          <option value="7">博士</option>
        </optgroup>
      </select>
    </div>
    <!-- 预定义列表框 -->
    <div class="like">
      <label for="keyword">语言: </label>
      <input type="search" name="language" list="details" id="keyword" />
      <!-- 预置值列表 -->
      <!-- ? input.list <==> datalist.id 进行绑定 -->
      <datalist id="details">
        <option value="html">html</option>
        <option value="css">css</option>
        <option value="js">js</option>
        <option value="php">php</option>
        <option value="vue">vue</option>
        <option value="node">node</option>
      </datalist>
    </div>
    <!-- 文本框: 多行文本框 -->
    <div>
      <label for="comment">备注:</label>
      <!-- ? textarea: 没有 value 属性,它的值位于textarea标签之间 -->
      <!-- ? maxlength: 最大长度  -->
      <textarea name="comment" id="comment" cols="30" rows="5" maxlength="200" style="resize: none">
        Hello world
      </textarea>
    </div>
    <button type="submit">登录</button>
  </fieldset>
</form>
<script>
  function showPsw(ele, form) {
    const psw = form.password
    if (psw.type === 'password') {
      psw.type = 'text'
      ele.textContent = '隐藏'
    } else if (psw.type === 'text') {
      psw.type = 'password'
      ele.textContent = '显示'
    } else {
      return false
    }
  }
  // 设置表单背景
  function setBgColor(ele, form) {
    form.firstElementChild.style.backgroundColor = ele.value
  }
  // 文件上传
  function fileUploads(form) {
    let tips = ''
    if (form.user_pic.value.length === 0) {
      tips += '文件不能为空'
    } else {
      tips += '上传成功'
    }
    alert(tips)
  }
</script>