表格、列表与表单 - - php中文网博客

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

博主信息

博文 16

粉丝 0

访问量 22622

专题推荐

更多>

表格

课程表

<table border="1px">
            <caption>合肥市第十六小学课程表</caption>
        <tr>
            <td colspan="2"></td>
            <td>星期一</td>
            <td>星期二</td>
            <td>星期三</td>
            <td>星期四</td>
            <td>星期五</td>
        </tr>
        <tr>
            <td rowspan="4" width="50px">上午</td>
            <td width="30px">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" align="center">中午休息</td>
            <!-- <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td> -->
        </tr>
        <tr>
            <td rowspan="3">下午</td>
            <td>5</td>
            <td>数学</td>
            <td>语文</td>
            <td>英语</td>
            <td>物理</td>
            <td>地理</td>
        </tr>
        <tr>
            <td>6</td>
            <td>数学</td>
            <td>大神</td>
            <td>英语</td>
            <td>物理</td>
            <td>地理</td>
        </tr>
        <tr>
            <td>7</td>
            <td>课外活动</td>
            <td colspan="4">各班各自组织，自愿参加</td>
            <!-- <td></td>
            <td></td>
            <td></td> -->
        </tr>
    </table>

## 表格标签： 
1. 一个表格只能有一个表头（th标签定义表头）， 
2. caption 标签定义表格标题，表表格表题通常也只有一个。 
3. tr 标签定义一行数据， 
4. td 标签定义表格单元（实际放内容的）。
5. thead 标签定义表格的页眉。 
6. tbody 标签定义表格的主体，如果不写，默认也会自动加上，如果不写容易出错，所以要写起，方便后面。 
7. colspan 行合并，写在td标签标签中，合并行时要注意代码是否有多余的td标签。 
8. rowspan 列合并，（同上）。
9. table 常用属性：
    border 设置表格的边框，
    width 设置表格的宽，
    height 设置表格的高，
    borderColor 设置表格边框颜色，
    bgColor 设置表格背景颜色，

列表

列表分为：有序列表、无序列表和自定义列表。

无序列表;

 <ui>
     <li>无序列表</li>
     <li>无序列表</li>
 </ul>

有序列表；

 <ol>
     <li>有序列表</li>
     <li>有序列表</li>
 </ol>

自定义列表；
```
 <dl>
     <dt>电脑</dt>
         <dd>笔记本电脑</dd>
         <dd>台式电脑</dd>
     <dt>手机</dt>
         <dd>苹果手机</dd>
         <dd>华为手机</dd>
 </dl>
```
列表标签
1、 ul 定义无序列表；
2、 ol 定义有序列表；
3、 li 定义有序和无序列表的列表项，（具体数据）
4、 dl 定义自定义列表，dt定义自定义列表列表项，dd 定义自定义列表的描述（具体内容）；自定义列表通常用来做网站导航栏。

表单

from 表单长用于收集用户输入的数据。

<from>
    <input />
</from>

from 属性：

1、 action 定义表单提交时执行的动作，（就是提交给谁，如果省略action属性，默认则提交到当前页）
2、 method 定义提交表单时说用方式，（get、post）；

get：明文方式，通过浏览器地址栏发送，不安全，有大小现在，用于不敏感的数据传输。

post：不可见，适合密码、文件、传输。

from 表单元素：

input 元素是表单最重要的元素，它有很多形态，根据不同的type 属性值，有不同的功能。
text 定义常规文本输入框；
radio 定义单选按钮，单选的name属性值必须一样，
submit 定义提交按钮；
passWord 定义密码字段；
checkbox 定义复选框；复选框的name属性值必须一样，并且是数字的形式，不然后台代码自能获取到一个数据。
button 定义按钮；
tel 定义电话号码输入字段；
search 定义搜索字段；
email 定义邮箱；
datetime-local 允许用户选择日期和时间（无时区）

<select></select>下拉列表元素。

option 定义列表选项，
<optin value="zhi">zhi</option>
语法：

     <select>
        <option value="zhi">
            zhi
        </option>
    </select>

元素属性

1、 required 表示必须；
2、 checked 设置默认值；
3、 type 设置 input 控件类型；
4、 name 是后台代码获取用户提交数据的标识，（可以理解为数据变量名）
5、 value 表示数据值，它的值，就是后台代码获取到的值。
6、 id 一个标识符，用法很多。

label 标签：

label标签不会向用户呈现任何特殊效果，在label元素内点击文本，就会触发此控件。label 标签的for属性值必须与表单里对应的元素id 值相同。

示例代码

用户注册表单

    <form action = "2.php" method = "POST" enctype = "multipart/form-data">
                        <div>
                            <label for  = "username">账号:</label>
                            <input type = "text" id = "username" value = "" placeholder = "username" required />
                        </div>
                        <div><label for  = "uemail">邮箱:</label>
                        <input      type = "email" id = "uemail" value = "" placeholder = "php@qq.com" required />
                        </div>
                        <div>
                            <label for  = "pw">密码:</label>
                            <input type = "password" id = "pw" value = "" placeholder = "输入6到16个字符" required />
                            <br />
                            <label for  = "xingbie">性别:</label>
                            <input type = "radio" id = "msex" name = "xingbie" value = "" /><label for         = "msex">男</label>
                            <input type = "radio" id = "nsex" name = "xingbie" value = "" /><label for         = "nsex">女</label>
                            <input type = "radio" id = "bsex" name = "xingbie" value = "" checked /><label for = "bsex">保密</label>
                            <br />
                            <label for  = "#">兴趣:</label>
                            <input type = "checkbox" name = "xingqu[]" value = "dlq" checked /><label for = "dlq">打篮球</label>
                            <input type = "checkbox" name = "xingqu[]" value = "bc" checked /><label for  = "bc">编程</label>
                            <input type = "checkbox" name = "xingqu[]" value = "kc" /><label for          = "kc">开车</label>
                            <input type = "checkbox" name = "xingqu[]" value = "youyong" /><label for     = "youyong">游泳</label>
                        </div>
                        <div>
                            <label  for   = "xueli">学历:</label>
                            <select name  = "xueli" id = "xueli">
                            <option value = "xx">小学</option>
                            <option value = "cz">初中</option>
                            <option value = "gz">高中</option>
                            <option value = "dx">大学</option>
                            </select>
                        </div>
                        <div>
                            <label for  = "touxiang">头像:</label>
                            <input type = "hidden" name = "maxfilesize" value = "80000" />
                            <input type = "file" name   = "usertouxiang" id   = "touxiang" />
                            <!-- 头像占位符 -->
                            <div class = "" style = "grid-column: span 2"></div>
                        </div>
                        <div>
                            <label for  = "jl">简历:</label>
                            <input type = "file" name = "jianli" id = "jl" />
                        </div>
                        <div>
                            <label    for  = "bz">备注:</label>
                            <textarea name = "beizhu" id = "bz" cols = "30" rows = "10">在此处输入备注</textarea>
                        </div>
                        <div>
                            <label for  = "tj">提交</label>
                            <input type = "submit" id = "tj" />
                            <button>button提交</button>
                        </div>
                    </form>