文档章节

HTML:5 表格表单

Annie可馨
 Annie可馨
发布于 2016/11/03 13:34
字数 1528
阅读 15
收藏 0

要点:

  1. 表格的用法

  2. 表单元素的用法

  3. iframe的用法

◆table的基本结构

<table>

          <caption>标题</caption>

            <tr>(行)

                      <td>第1行 第1列</td>

                      <td>第1行 第2列</td>

         </tr>

        <tr>(行)

                      <td>第2行 第1列</td>

                      <td>第2行 第2列</td>

          </tr>

</table>

注:table>tr*2>td*3(两行三列快捷)

◇<table>的常用属性

  • border:设置表单边框大小
  • width:设置表单的宽度
  • hight:设置表单的高度
  • align:设置表单对齐方式
    • center:居中对齐
    • left:左对齐
    • right:右对齐
  • bgcolor:设置表单背景色
  • sellspacing:设置单元格内容与边框这之间的间隔

语法格式:<table border="5" width="300px" height="200px" align="center" bgcolor="#595959"  cellspacing="2px">

                    </table>

 

  1. <tr></tr>常用属性:<tr>包含一个或多个<th>或<td>
  • align:表格内容  对齐方式(center(居中对齐)、  left(左对齐) 、right(右对齐))
  • height:设置行高
  • valig:top 顶部对齐,bottom 底部对齐,middle 居中对齐
  • bgcolor:设置背景色

语法格式:<tr height="50" align="center" valign="top" bgcolor="red">
                         <td>111</td>
                         <td>123</td>
                     </tr>

  1. <td></td>常用属性
  • width:设置单元格宽度
  • rowspan=“2”:独占两行  设置单元格可跨的行数
  • colspan=“2”:独占两列    设置单元格可跨的列数
  1. <th></th>的常用属性
  • baselion:基线对齐

示例:

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>表单练习</title>
</head>
<body>
<table  cellspacing="0"   align="center" height="300px" width="500px">  
    <tr>

        <td align="center" bgcolor="#7F7F7F"><b>属性</b></td>
        <td align="center"  colspan="2"   bgcolor="#595959"><b>值和说明</b></td> 
    </tr>
    <tr>
        <td align="center" rowspan="3" bgcolor="#595959">align <br>水平对齐方式</td>
        <td bgcolor="BFBFBF">left</td>
        <td bgcolor="E7E7E7">左对齐</td>
    </tr>
    <tr>
        <td bgcolor="E7E7E7">center</td>
        <td bgcolor="BFBFBF">居中对齐</td>
    </tr>
    <tr>
        <td bgcolor="BFBFBF">right</td>
        <td bgcolor="E7E7E7">右对齐</td>
    </tr>
    <tr>
        <td middle="center" align="center" bgcolor="7F7F7F" rowspan="4">valign <br>垂直对齐方式</td>
        <td bgcolor="E7E7E7" >top</td>
        <td bgcolor="BFBFBF" >顶端对齐</td>
    </tr>
    <tr>
        <td bgcolor="BFBFBF">middle</td>
        <td bgcolor="E7E7E7">居中对齐</td>
    </tr>
    <tr>
        <td bgcolor="E7E7E7">bottom</td>
        <td bgcolor="BFBFBF">低端对齐</td>
    </tr>
    <tr>
        <td bgcolor="BFBFBF">baseline</td>
        <td bgcolor="E7E7E7">基线对齐</td>
    </tr>
</table>
</body>
</html>

◆表单和表单控件

◆表单语法

语法格式:<!-- 表单语法 -->
<form action=""  method="">
 .......
</form>

  • cction:表单提交地址
  • method:表单提交方式(post&get)

◆表单元素

语法格式:<input type="text" name="" value="">

  • type:设置  input  元素类型
    • button 、checkbox 、file 、hidden 、image、 password 、radio 、reset、submit、text
  • name:设置 input  元素名称
  • value:设置  input  元素值
  • size:设置文本框的长度
  • maxlength:设置输入文本框的最大字符长度
  •  required:设置位必填字段
  • readonly:设置输入字段为只读
  • placeholder:设置用户输入字段的提示
  • disabled:当  input  元素加载时禁用此元素(各种元素均可以用【灰色显示】不可选)
  • checked:规定此  input  元素 首次加载时 应当被选中

◆常见问题

  • submit提交拥有name属性的表单元素值 (必须赋予 name值才能提交)
  • 复选框 checkbox 设置checked属性使其选中
  • 单选按钮 radio 设置相同 name 值,实现单选
  • redonly  与 disabled 的区别  :redonly 为只读模式;disabled各种元素均可以用【灰色显示】不可选

◆下拉框

语法格式:

<select name="annie" >
    <option value="0">请选择</option>
    <option value="1">1991</option>
    <option value="2">1992</option>
    <option value="3">1993</option>

</select>年

◆多行文本框

  • <textarea>文本内容</textarea>
    • nanme:设置文本区的名称
    • rows:设置文本内可见行数
    • cols:设置文本内的可见宽度
    • maxlength:设置文本内最大字符数

语法格式:

<textarea name="Annie" id="" cols="30" rows="10">Annie的笔记</textarea>

◆表单元素分组

  • 将表单内相关 元素分组

语法格式:

<form action="">
    <fieldset>
        <legend> Annie的表单</legend>
               height: <input type="text">
               weight: <input type="text">
    </fieldset>
</form>

 

◆创建注册页面

  • 结合<table>创建注册表单
  • 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单及嵌套的用法练习</title>
</head>
<body>

<form action="">
<fieldset>
    <legend >用户注册</legend>
    <table width="500"  border="0">
        <tr>
            <td align="right">邮箱注册:</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td></td>
            <td>你还可以使用 <a href="">账号</a>注册或者<a href="">手机</a>号注册</td>
        </tr>
        <tr>
            <td align="right">创建密码:</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td align="right">真实姓名:</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td  align="right">性别:</td>
            <td>
                <input type="radio" name="A" checked="男">男
                <input type="radio" name="A">女
                <input type="radio" name="A">保密
            </td>
        </tr>
        <tr>
            <td  align="right">生日:</td>
            <td>
                <select name="grade">
                    <option value="0" selected="selected">—请选择—</option>
                        <option value="">1991</option>
                        <option value="">1992</option>
                        <option value="">1993</option>

                </select>年
                <select name="grade">
                    <option value="0" selected="selected">—请选择—</option>
                    <option value="">1</option>
                    <option value="">2</option>
                    <option value="">3</option>
                        
                </select>月
                <select name="grade">
                    <option value="0" selected="selected">—请选择—</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  align="right">兴趣爱好:</td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="reset">&nbsp;
                <input type="submit" value="注册">
            </td>

        </tr>
    </table>


</fieldset>

</form>

</body>
</html>

◆行内框架

  • <iframe>元素包含另外一个文档的内联框架
    • frameborder:设置是否显示框架周围的边框
    • height:设置iframe的高度
    • marginheight:设置iframe的顶部和底部的边距
    • marginwidth:设置iframe的左侧和右侧的边距
    • name:是指iframe的名称
    • scrolling:设置是否在iframe中显示滚动条
      • yes    no    auto
    • src:设置在iframe中显示的文档的路径URL
    • width:设置iframe的宽度

语法格式:

<a href="https://123.sogou.com/" target="Annie" >网址大全</a>
<br>
<iframe src="https://www.baidu.com" frameborder="0" name="Annie" height="
300" width="400" marginheight="30" marginwidth="30"></iframe>

◆iframe应用

  • 配合超链接<a>标签,target属性是iframe显示页面切换效果
  • 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单元素分组嵌套</title>
</head>
<body>
<a href="file:///D:/桃李科技编程学习/第二天/table的属性练习.html" target="annie">table的属性练习</a>
<a href="file:///D:/桃李科技编程学习/第二天/表单,嵌套的练习.html" target="annie">form表单语法应用</a>
<a href="https://my.oschina.net/u/3009742/home" target="annie">annie可馨</a>
<a href="http://www.qq.com" target="annie">tengxun</a>
<br>
<br>
    <iframe src="https://my.oschina.net/u/3009742/home" name="annie" frameborder="10" width="500" height="500"></iframe>

</body>
</html>

 

 

 

 

© 著作权归作者所有

Annie可馨
粉丝 3
博文 6
码字总数 5199
作品 0
郑州
私信 提问
HTML入门的简单学习

1:HTML简介 1.1:HTML(Haper Text Markup language):超文本标记语言 超文本就是指页面内可以包含图片,链接,甚至音乐,程序等非文字元素 1.2:开发工具:Adobe Dreamwearver cs5 1.3:HTM...

别叫小伙
2016/08/15
0
0
好程序员web前端分享HTML基本结构和基本语法

好程序员web前端分享HTML基本结构和基本语法 HTML基本结构和HTML基本语法 HTML基本结构 HTML的基本语法 1、<常规标记> <标记 属性=“属性值” 属性=“属性值”></标记> 标记也可叫标签或叫元...

好程序员IT
04/29
7
0
HTML前端(一)----DIV布局

HTML的基本结构 使用sublime的快捷键生成HTML的模版文件格式. 生成HTMl5.0的文件格式 生成HTML1.0的文件格式 说明 若需要使用快捷键生成,则需要安装对应的插件. 推荐安装的插件如下: Emme...

CS_GaoMing
01/18
0
0
DWZ-RIA v1.2 RC1 发布

DWZ-RIA V1.2 RC1 1. 使用隐藏iframe来处理无刷新表单提交时,服务器端返回json格式和普通DWZ 普通ajax 表单提交保持一致(即validateCallback和iframeCallback服务器端返回json格式一致)。...

张慧华
2011/04/07
1K
2
DWZ-RIA v1.2 Final 发布

DWZ-RIA V1.2 Final 1. 使用隐藏iframe来处理无刷新表单提交时,服务器端返回json格式和普通DWZ 普通ajax 表单提交保持一致(即validateCallback和iframeCallback服务器端返回json格式一致)...

张慧华
2011/06/09
2.2K
8

没有更多内容

加载失败,请刷新页面

加载更多

为什么要在网站中应用CDN加速?

1. 网页加载速度更快 在网站中使用CDN技术最直接的一个好处就是它可以加快网页的加载速度。首先,CDN加速的内容分发是基于服务器缓存的,由于CDN中缓存了不少数据,它能够给用户提供更快的页...

云漫网络Ruan
13分钟前
2
0
亚玛芬体育(Amer Sports)和信必优正式启动合作开发Movesense创新

亚玛芬体育和信必优正式启动合作开发Movesense创新,作为亚玛芬体育的完美技术搭档,信必优利用Movesense传感器技术为第三方开发移动应用和服务。 Movesense基于传感器技术和开放的API,测量...

symbiochina88
24分钟前
2
0
创龙TI AM437x ARM Cortex-A9 + Xilinx Spartan-6 FPGA核心板规格书

SOM-TL437xF是一款广州创龙基于TI AM437x ARM Cortex-A9 + Xilinx Spartan-6 FPGA芯片设计的核心板,采用沉金无铅工艺的10层板设计,适用于高速数据采集和处理系统、汽车导航、工业自动化等领...

Tronlong创龙
24分钟前
2
0
好程序员Java学习路线分享MyBatis之线程优化

  好程序员Java学习路线分享MyBatis之线程优化,我们的项目存在大量用户同时访问的情况,那么就会出现大量线程并发访问数据库,这样会带来线程同步问题,本章我们将讨论MyBatis的线程同步问...

好程序员官方
30分钟前
6
0
IDEA 自定义方法注解模板

IDEA 自定义方法注解模板 1、使用效果 /*** 计算交易费用* @Author wangjiafang* @Date 2019/9/11* @param feeComputeVo* @return*/@PostMapping("/v1/fee_compute")public ApiResp......

小白的成长
30分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部