• html_table标签和from表单标签小试手


    Html Body中table(表格)也是一个重要组成部分,下面列举一个简单的实例:

    ——————————————简单的table——————————————————

    <!DOCTYPE HTML>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <table width="90%" border="3" cellpadding="2" cellspacing="0" align="center">
            <caption>
                <h1>维修项目增补单</h1>
                <tr align="">
                    <th>工单号</th>
                    <th colspan="2">__________</th>
                    <th>车牌号</th>
                    <th colspan="2">__________</th>
                    <th>车型</th>
                    <th></th>
                    <th>技师</th>
                    <th></th>
                    <th>维修时间</th>
                    <th colspan="2">___________</th>
                </tr>
                <tr>
                    <th>序号</th>
                    <th colspan="4">维修项目及更换配件</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>工时费</th>
                    <th>合计</th>
                    <th colspan="3">故障原因</th>
                </tr>
                <tr>
                    <th>1</th>
                    <td colspan="4"></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td colspan="3"></td>
                </tr>
                <tr>
                    <th>2</th>
                    <td colspan="4"></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td colspan="3"></td>
                </tr>
                <tr>
                    <th>3</th>
                    <td colspan="4"></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td colspan="3"></td>
                </tr>
                <tr>
                    <th>4</th>
                    <td colspan="4"></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td colspan="3"></td>
                </tr>
                <tr>
                    <th>5</th>
                    <td colspan="4"></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td colspan="3"></td>
                </tr>
                <tr>
                    <th>6</th>
                    <td colspan="4"></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td colspan="3"></td>
                </tr>
                <tr align="left">
                    <th colspan="5">备件费用小计:</th>
                    <th colspan="5">工时费用小计:</th>
                    <th colspan="3">合计:</th>
                <tr />
            </caption>
        </table>
    </body>
    </html>

    效果如下:

    !:有一个非常需要注意的地方就是因为html内容为主的原因,当你空单元格位置又是不会像你设置那样完整展开。暂时没有找到解决办法,只能将空单元格中加入字符,使他完整展开。

    ——————————————————————From表单————————————————————————————

    From表单是Html中用户与网站交互的手段。

    表单是可以把浏览者输入的数据传送到服务器端的程序(比如ASP,PHP,JSP)的HTML元素,服务器端程序可以处理表单传过来的数据,从而进行一些动作.比如,bbs,blog的登陆系统,购物车系统等.

    以下举例:

    <!DOCTYPE HTML>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>淘宝注册</title>
    </head>
    <body>
    <table align="center" width="600" border="1" cellpadding="2" cellspacing="0">
        <caption>
            <h2>用户注册</h2>
        </caption>
        <form action="http://www.baidu.com" method="POST">
            <tr>    <!--  使用输入域定义姓名输入框 -->
                <td>姓名:</td>
                <td>
                    <input type="TEXT"  name="one" size="15"/>
                </td>
            </tr>
            <tr>   <!--  使用单选按钮域定义性别输入框 -->
                <td>密码:</td>
                <td>
                    <input type="PASSWORD"  name="one" size="15"/>
                </td>
            </tr>
            <tr>
                <td>性别:</td>
                <td>
                    <input type="radio"  name="sex" size="1"/><input type="radio"  name="sex" size="2"/><input type="radio"  name="sex" size="0"/>保密
                </td>
            </tr>
            <tr>  <!--  使用下拉列表域定义学历输入框 -->
                <td>学历:</td>
                <td>
                    <select id="" name="edu">
                        <option>--请选择--</option>
                        <option value="1">高中</option>
                        <option value="2">大专</option>
                        <option value="3">本科</option>
                        <option value="4">研究生</option>
                        <option value="5">其他</option>
                    </select>
                </td>
                </tr>
                <tr> <!--  使用复选按钮域定义爱好输入框 -->
                    <td>爱好:</td>
                    <td>
                        <input type="checkbox"  name="two" value="4"/>跑步
                        <input type="checkbox"  name="two" value="5"/>羽毛球
                        <input type="checkbox"  name="two" value="6"/>篮球
                        <input type="checkbox"  name="two" value="7"/>乒乓球
                    </td>
                </tr>
                <tr>  <!--  使用多行文本输入域定义自我描述输入框 -->
                    <td>自我描述:</td>
                    <td>
                        <textarea id="" name="there" rows="10" cols="30"></textarea>
                    </td>
                </tr>
                <tr>  <!--  定义提交和重置两个按钮 -->
                    <td colspan="2" align="center">
                        <input type="SUBMIT" name="SUBMIT" value="提交"/>
                        <input type="RESET" name="RESET" value="重置"/>
                    </td>
                </tr>
    
        </form>
    </table>
    </body>
    </html>

    效果如下:

    因为初步接触,做一下简单的还可以,再难一点就有困难了。

    ····················································Wing--九尾狗编辑 http://www.cnblogs.com/wing411/
  • 相关阅读:
    sort()的部分用法
    蓝桥杯 算法训练 审美课
    蓝桥杯 基础练习 查找整数
    2018年第九届蓝桥杯【C++省赛B组】【第二题:明码】
    蓝桥杯 特殊回文数
    比较两文本程序
    蓝桥杯 基础练习 十六进制转八进制
    Python | 用Pyinstaller打包发布exe应用
    SpringBoot-04-整合JDBC
    SpringBoot-03-自定义Starter
  • 原文地址:https://www.cnblogs.com/wing411/p/4677867.html
Copyright © 2020-2023  润新知