首页 > 代码库 > HTML中的表格、表单元素与框架的构建

HTML中的表格、表单元素与框架的构建

2024-09-17 11:02:13   218人阅读

　　表格

　　　　<table></table>表格

　　　　　　width: 宽度可用像素或百分比；

　　　　　　height：高度可用像素或百分比；

　　　　　　border：边框宽度；

　　　　　　cellpadding:内容跟单元格边框的边距 常用0；

　　　　　　cellspacing：单元格之间的间距  常用0；

　　　　　　align： 对齐方式；

　　　　　　bgcolor：背景色；

　　　　<tr></tr> 行

　　　　　　align:一行内容的水平对齐方式；

　　　　　　valign: 垂直对齐方式；

　　　　<td></td> 单元格

　　　　<th></th> 表头，单元格内容自动居中加粗；

　　　　单元格合并：

　　　　　　colspan="n"  (合并同一行的单元格，后面写代码减去相对应的列)

　　　　　　rowspan="n" (合并同一列单元格，从第二行开始减去对应的列)

　　表单

　　　　<form id="" name="" method="post/get" action="负责处理的服务端">get提交后编码内容地址栏可见，post提交后不可见</form>

　　　　　　Form内元素：

　　　　　　　　文本框：<input type="text" name="" value="" id="" placeholder="提醒的文字"/>

　　　　　　　　密码框: <input type="password" name="" value="" id=""/>

　　　　　　　　提交按钮: <input type="submit" name="" value="" id="" disabled="disabled">

　　　　　　　　重置按钮: <input type="reset" name="" value="" id="" disabled="disabled">

　　　　　　　　普通按钮: <input type="button" name="" value="" id="" disabled="disabled">

　　　　　　　　图片按钮: <input type="image" name="" src=""  id="" disabled="disabled">

　　　　　　　　单选按钮: <input type="radio" name="" checked="checked" value=""/>

　　　　　　　　多选按钮: <input type="checkbox" name="" checked="checked" value=""/>

　　　　　　　　下拉框： <select name="" id="" size="" multiple="multiple">

　　　　　　　　　　　　<option value="http://www.mamicode.com/值">内容</option>

　　　　　　　　　　　　<option value="http://www.mamicode.com/值" selected="selected">内容</option>   设为默认；

　　例：注册表格

<html>
    <head>
    <title>用户注册页面</title>
    </head>
    
    <body bgcolor="#999999">
        <center><form method="get" action="http://www.baidu.com" name="tj">
        <table width="500" height="600" bgcolor="#009966">
            
                <th colspan="2"><font size="+3">用户注册</font></th>
            
            <tr>
                <td align="right">用户名：</td>
                <td><input type="text" name="uname" placeholder="请输入用户名"/></td>
            </tr>
            <tr>
                <td align="right">密码：</td>
                <td><input type="password" name="pwd"/></td>
            </tr>
            <tr>
                <td align="right">新密码：</td>
                <td><input type="password" name="pwd"/></td>
            </tr>
            <tr>
                <td align="right">姓别：</td>
                <td><input id="sex0" type="radio" name="sex" value="0" checked="checked"/><label for="sex0">男</label>
                    <input id="sex1" type="radio" name="sex" value="1"/><label for="sex1">女</label>
                </td>
            </tr>
            <tr>
                <td align="right">出生年月：</td>
                <td><select name="year" size="1">
                        <option value="1990">1990</option>
                        <option value="1990">1991</option>
                        <option value="1990">1992</option>
                        <option value="1990">1993</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td align="right">兴趣爱好：</td>
                <td>
                    <input id="a" type="radio" name="足球" value="0"/><label for="a">足球</label>
                    <input id="b" type="radio" name="篮球" value="1"/><label for="b">篮球</label>
                    <input id="c" type="radio" name="乒乓球" value="2"/><label for="c">乒乓球</label>
                </td>
            </tr>
            <tr height="90">
                <td align="right">验证码：</td>
                  <td>
                    <img src="验证码.jpg" width="150" height="50" /><br />
                    <input type="text" name="uname"/>
                </td>
            </tr>
            <tr>
                <td align="right" colspan="2">
                    <input type="submit" value="提交"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                
                    <input type="reset" value="重置"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                
                </td>
            </tr>
        </table>
        </form></center>
    </body>
</html>

　　框架

　　　　frameset使用时最外层去掉body；

　　　　　　rows("300,*")上下分，第一行300像素，剩下的是第二行；

　　　　　　cols("100,*")左右分，左侧宽100，剩余是右侧；

　　　　　　frameborder="no",  去掉边框；

　　　　　　<frame src="http://www.mamicode.com/页面地址" noresize="noresize">   noresize 禁止调整页面大小

　　　　　　<frame src="" scrolling="no">   取消显示滚动条

　　　　iframe可以在原来页面插入小窗口显示其他页面

　　　　　　<iframe src="http://www.mamicode.com/其他页面地址" width="" height="" frameborder="0" scrolling="no"></iframe>

　　<html >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
   　　 <frameset rows="25%,75%",>
       　　 <frame src="topp.html"> 
   　　　　 <frameset cols="30%,70%"><frame src="button.html">
                            <frame src="fram-c.html" />
      　　 </frameset>
    </frameset>
　　</html>

 

　　

HTML中的表格、表单元素与框架的构建


联系
我们