列表，表格与表单

首页 > 博客列表 > 列表，表格与表单

博主信息

博文 16

粉丝 0

访问量 18325

专题推荐

更多>

列表

列表分为：无序列表（ul），有序列表（ol）跟自定义列表（dl）

无序列表ul
<ul> <li></li> </ul>
有序列表ol
<ol> <li></li> </ol>
自定义列表dl
<dl> <dt>dt是列表标题</dt> <dd>dd是列表项</dd> </dl>

*li的父元素最好是ul,ol中的一个，利于抓取

*列表标签中可以包含其他标签，可以用来写导航，图文列表等

表格

表格的组成标签：table,tbody,thead,tr,td/th

<table cellpadding="0" cellspacing="0" border="1">

            <caption>
                商品信息表
            </caption>

            <thead>
                <tr>
                    <td>ID</td>
                    <td>品名</td>
                    <td>单位</td>
                    <td>数量</td>
                    <td>金额</td>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>a666</td>
                    <td>手机</td>
                    <td>888</td>
                    <td>部</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>a666</td>
                    <td>手机</td>
                    <td>888</td>
                    <td>部</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>a666</td>
                    <td>手机</td>
                    <td>888</td>
                    <td>部</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>a666</td>
                    <td>手机</td>
                    <td>888</td>
                    <td>部</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>a666</td>
                    <td>手机</td>
                    <td>888</td>
                    <td>部</td>
                    <td>1</td>
                </tr>
            </tbody>
        </table>

colspan合并列,rowspan合并行

<table cellpadding="0" cellspacing="0" 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>1</td>
                    <td>数学</td>
                    <td>语文</td>
                    <td>英语</td>
                    <td>生物</td>
                    <td>地理</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>数学</td>
                    <td>语文</td>
                    <td>英语</td>
                    <td>生物</td>
                    <td>地理</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>数学</td>
                    <td>语文</td>
                    <td>英语</td>
                    <td>生物</td>
                    <td>地理</td>
                </tr>
            </tbody>
        </table>

*caption 标签必须紧随 table 标签之后，
只能对每个表格定义一个标题，
通常这个标题会被居中于表格之上。

*所有的数据必须填充到td/th中，th是td的plus，自带加粗，居中

表单

from

  属性action：处理表单的程序
  method：表单提交的类型——GET/POST两种，默认GET

input

文本框
type:控件类型
name:数据的变量名
value:数据的值
required:必填选项
placeholder:提示信息

  type="text"
  <input type="text" id="username" name="username" required/>
  type="email"
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email" value="youxiang@163.com" required>
  type="password"
  <label for="password">密码：</label>
  <input type="password" id="password" name="password" placeholder="不少于6位" required/>

单选按钮
一组单选，必须公用一个name属性值（name相同）
默认值：checked

  <label for="man">性别</label>
  <input type="radio" name="gender" value="male" id="man" checked><label for="man">男</label>
  <input type="radio" name="gender" value="male" id="women"><label for="women">女</label>

复选框
name值应该写成数组格式，这样才能确保服务器可以收到一组数据，默认值也是添加checked

  <label for="">兴趣:</label>
  <span><input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">游戏</label></span>
  <span><input type="checkbox" name="hobby[]" value="game" id="shoot"><label for="shoot">摄影</label></span>
  <span><input type="checkbox" name="hobby[]" value="game" id="travel" checked><label for="travel">旅游</label></span>
  <span><input type="checkbox" name="hobby[]" value="game" id="program" checked><label for="program">编程</label></span>

文件域和隐藏域
1.请求类型必须是POST
2.将表单数据编码设置为：enctype = “application/x-www-form-urlencoded”,传文件用multipart/form-data
3.name是js或者php或者服务器中的数据,注意命名规则

  <form action="" method="post" enctype="multipart/form-data">
<label for="user-pic">头像：</label>
<input type="file" name="user_pic" id="user-pic">
<!-- 隐藏域，在前端看不见，值供后台处理时用-->
      <input type="hidden" name="MAX_FILE_SIZE" value="80000">
      <!--头像占位符-->
      <div class="user-pic" style="grid-column:span 2;"></div>
  </form>

select下拉框

        <label for="">学历：</label
        <select name="edu" id="edu">
            <option value="1">初中</option>
            <option value="2">高中</option>
            <option value="3" selected>大专</option>
            <option value="4">本科</option>
            <option value="5">研究生</option>
            <option value="6" label="高级选项">这里的数据没有用</option>
        </select>

textarea多行文本框

      <label for="comment">备注：</label>
      <textarea name="comment" id="comment" cols="30" rows="10"></textarea>

表单控件的form属性

<form action="" method="get" id="info"></form>
<div class="form-content">
   <div>
       <label for="username">用户名：</label>
       <input type="text" name="username" id="username" placeholder="不能为空" form="info" required>
    </div>
    <div>
      <label for="email">邮箱：</label>
      <input type="email" name="email" id="email" form="info">
    </div>
    <div>
      <label for="password">密码：</label>
      <input type="password" name="password" id="password" form="info">
    </div>
    <button form="info">提交</button>
</div>

tbody虽然能自动生成，但是不能省略
label中for = input中的ID
get能看到密码等,不安全;
GET可以上传非敏感数据，数量不能太多，例如页码是可以的

作业

课程表

<table cellpadding="0" cellspacing="0" 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>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>
    </tbody>
</table>

批改老师：

天蓬老师

批改状态：合格

老师批语：

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

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

0条评论

作者最新博文

前端的开发环境及HTML的标签元素

2020-12-09 18:40:45