第二课：表格、列表、表单的应用

表格

<table>
      <caption>
        表头部分
      </caption>
      <thead>
        <tr>
          <th>项目</th>
          <th>项目</th>
          <th>项目</th>
          <th>项目</th>
        </tr>
      </thead>
      <thead>
        <tr>
          <td colspan="2">内容</td>
          <td rowspan="2">内容</td>
          <td>内容</td>
        </tr>
        <tr>
          <td>内容</td>
          <td>内容</td>
          <td>内容</td>
        </tr>
      </thead>
    </table>

<caption>是表头部分，只可用有一个。每一行得写在<thead>里，一行在一个，th(会自动加粗)和td是格子得写在th里。colspan是向右合并单元格，rowspan是向下合并单元格。

列表

无须列表

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

前面有个小点

2.有序列表

<ol>
    <li></li>
    <li></li>
</ol>

前面带有数字从1向下写，会自动排列

3.自定义列表

<dl>
    <dt>名字：</dt>
    <dd>name</dd>
</dl>

一般用于写网站的地址名称什么的，dd会换行到下一行并且空两格

表单

1.label用于连接文字和表单，其中for得与表单中ID的内容一样
2.表格中name是提交数据库的名称，必须写；value是写提升信息；placeholder也是写提升信息的，不过写的是不可别编辑并是灰色的，用这个不能用value；required是必填项。
3.form中action是提交数据的地址，method是提交数据的方式，enctype是传输数据的编码方式

<form action="1.php" method="POST" enctype="">
    <label for="name">账号：</label>
    <input type="text" id="name" name="name" value="" placeholder="账号" required>
    <label for="mima">密码：</label>
    <input type="password" id="mima" placeholder="不少于5位" name="mima" required>
    <label for="email">邮箱：</label>
    <input type="email" id="emaid">
    <label for="secret">性别:</label>
    <input type="radio" name="gender" id="nan"><label for="nan">男</label>
    <input type="radio" name="gender" id="nv"><label for="nv">女</label>
    <label for="#">兴趣:</label>
    <input type="checkbox" name="hobby[]" value="game" id="game" checked /> <label for="game">游戏</label>
    <input type="checkbox" name="hobby[]" value="shoot" id="shoot" /> <label for="shoot">摄影</label>
    <label for="edu">学历:</label>
        <select name="edu" id="edu">
            <option value="1">初中</option>
            <option value="2">高中</option>
            <option value="3" selected>本科</option>
            <option value="4">研究生</option>
        </select>
    <label for="user-pic">头像:</label>
    <input type="hidden" name="MAX_FILE_SIZE" value="80000" />
    <input type="file" name="user_pic" id="user-pic" />
    <label for="comment">备注:</label>
    <textarea name="comment" id="comment" cols="30" rows="5"></textarea>
    <button>提交</button>
</form>

所以的表单要写在form里面。单选的name要一样；
多选的name要用数字的格式来写（后面加上中括号）；
下拉框得写在select里面，每一个option是一个选项；selected是默认选项
隐藏域的value是来规定上传文件的大小；
文件上传的上传方式要是post；
多行文本中cols是一行写几个字，rows是规定显示几行；
提交按钮要写在表格中，不然不管用

表格

列表

表单

相关文章