11. Table & Form

HaiyueNovember 11, 2023About 1 min

Table

如果表格没有使用tbody而有tr，那么浏览器会自动创建一个tbody，而tr全部放置与tbody中
默认所有td元素为垂直居中
将元素设置为单元格td

display: table-cell;

Form

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="./reset.css">
    <style>
    </style>
  </head>
  <body>
    <!-- 注意：数据提交至服务器中，必须为元素指定一个name属性 -->
    <form action="target.html">
      <!-- autocomplete=off关闭自动补全功能 -->
      <input type="text" name="name" autocomplete="off">
      <!-- 禁用：数据不会提交 -->
      <input type="text" name="name" disabled>
      <!-- 只读：数据会提交 -->
      <input type="text" name="name" readonly>
      <!-- 自动获取焦点 -->
      <input type="text" name="name" autofocus>

      <!-- 
        单选框: 选择框必须指定一个value属性，作为最终提交的数据值
        checked可以将其设置为默认选择项
       -->
      <input type="radio" name="xxxx" value="1">
      <input type="radio" name="xxxx" value="2">
      <input type="radio" name="xxxx" value="3">
      <input type="radio" name="xxxx" value="4">


      <!-- 
        多选框: 选择框必须指定一个value属性，作为最终提交的数据值
        checked可以将其设置为默认选择项
       -->
       <input type="checkbox" name="xx1x" value="12">
       <input type="checkbox" name="xx1x" value="22">
       <input type="checkbox" name="xx1x" value="32">
       <input type="checkbox" name="xx1x" value="42">
 
       <!-- 下拉列表
       -->
       <select name="hello" id="">
        <option value="i">选项1</option>
        <option value="i1" selected>选项2</option>
        <option value="i2">选项3</option>
       </select>
      <input type="submit" value="登录">
      <input type="reset" value="重置">
      <input type="button" value="按钮">
      
      <!-- color 兼容性不好 -->
      <input type="color" name="" id="">
      
      <button type="submit" value="登录">登录</button>
      <button type="reset" value="重置">重置</button>
      <button type="button" value="按钮">按钮</button>

    </form>
  </body>
</html>