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="值">内容</option>

            <option value="值" 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="页面地址" noresize="noresize">   noresize 禁止调整页面大小

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

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

      <iframe src="其他页面地址" 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>

  

时间: 2024-10-25 11:00:23

HTML中的表格、表单元素与框架的构建的相关文章

关于Artdialog插件中获取内部表单元素值的使用心得

在开发中既需要artdialog插件的美观大方,又需要自定义功能,所以就出现了以下情况(废话不多说,转入正题) 前台代码: 1 <input type="button" class="ontest" value="免费询盘"/> 2 <div style="display:none;clear:both;"> 3 <table> 4 <tr> 5 <td>姓名:<

在servlet中批量获取表单元素的值

如果页面有大量的表单元素,在springMVC中一般都是表单和pojo对象做相应的对应,或者直接通过request获得对象,但是还有另外一种得到表单元素的方法,具体代码如下: // java.util.Enumeration<String> req是HttpServletRequest对象 Enumeration<String> paras = req.getParameterNames(); while (paras.hasMoreElements()) { String s =

表单元素,框架集

一:表单元素: form标签: <form id=""(不可重)  name=""(可以重)  method="post/get"(默认为post,提交的方式,get在地址栏里方式有长度限制,别人通过解码可以看见内容.post长度不限,内容放在报头里面提交,看不到)  action="提到服务端的地址提交给谁来处理"></form>1.文本输入类文本框:<input type="text

Bootstrap框架(基础篇)之列表,表格,表单

继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>…</li> </ul> 有序列表 <ol> <li>…</li> </ol> 定义列表 <dl> <dt>…</dt> <dd>…</dd> </dl> Bootst

Javascript中的Form表单知识点总结

在HTML中,表单是由form元素来表示的,但是在javascript中,表单则由HTMLFormElement类型,此元素继承了HTMLElement,因此与其他HTML元素具有相同的默认属性:HTMLFormElement有自己以下属性和方法: acceptCharset: 服务器能够处理的字符集:等价于HTML中的accept-charset特性: action:  接收请求的URL,等价于HTML中的action elements: 表单中所有控件的集合. enctype: 请求的编码类

debug经历-------&gt;java web------&gt;为什么使用接收到的表单元素的值为null

1.问题描述: jsp页面中常常有表单元素,有时候需要在该<form>中使用文件上传标签,为了实现文件上传功能,需要将<form>元素进行二进制封装,此时如果该form中还有普通类型的表单元素,使用request.getParameter("**")是无法获取普通表单元素的值的,必须使用smartupload.getRequest().getParameter()才可以获取普通表单元素的值,并且要注意该句话一定要在smartupload.upload()之后执行

表单元素和表格

今天尝试去自己做表格,试了一下单元格合并,通过尝试我发现如果规定了高度在合并,那么删除后的表格高度为初始高度,如果想要改变只能改变删除之后剩余的单元格高度 <tr> <td rowspan="2" > </td> <td height="50"> </td> <td> </td> </tr> 而在同一个单元格我没有实现行与列的合并 <table width=&quo

表格Table和表单元素

1.相对路径与绝对路径 绝对路径 指带域名的文件的完整路径和磁盘中指定文件的全部路径 网址(网站的尾部)–a标签用的比较多 <img src="D:/2019/9/1.jpg" > <a href="http://www.baidu.com">百度一下</a> 相对路径 是指在同一个文件夹下,通过一个参考点来找到其他文件 返回上一级 ../ 同级之间直接写文件名 下一级用 / 2.标签的嵌套规范 1.块元素可以包含内联元素或某些块

第10章 表单元素(中)

第 10章表单元素[中]学习要点:1.type属性总汇2.type属性解析 本章主要探讨 HTML5中表单中 input元素的 type属性,根据不同的值来显示不同的输入框.一.type属性总汇input元素可以用来生成一个供用户输入数据的简单文本框.在默认的情况下,什么样的数据均可以输入.而通过不同的属性值,可以限制输入的内容. 属性名称 说明text 一个单行文本框,默认行为password 隐藏字符的密码框search 搜索框,在某些浏览器键入内容会出现叉标记取消submit.reset.