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

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

  表格

    <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中的表格、表单元素与框架的构建