HTML静态网页:表格、表单

一、表格table

table的属性

width        宽度,可以用百分比或者像素,像素常用960

border       边框,常用值是0

cellpadding  表格内容与单元格边框的边距,常用值0

cellspacing  单元格之间的间距,常用值0

align        单元格里面内容的对齐方式

bgcolor      背景色

background   背景图片

<tr></tr>行,属性

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

valign       一行内容的垂直对齐方式

height       行高

bgcolor      一行的背景色

background   一行的背景图片

<td></td>列

<th></th>表头,单元格内容会自动居中、加粗,与tr具有相同属性

设置单元格的行高。列高时,会同时影响对应的行或列

 

单元格合并(建议尽量使用表格嵌套)

colspan="n"  合并同一行,n代表同一行的几列

rowspan="n"  合并同一列,n代表同一列的几行

*可以在文字前面加上链接,设置链接属性,就可以点击进入相应网站*

表单在网页中主要负责数据采集功能。由三部分构成:文本输入、按钮、选择输入。

<form name="" method="post/get" action=""></form>id不可重复

1、文本输入

文本框:<input type="text" name="" id="" value="(需要输入的内容)"/>

密码框:<input type="password" name="" id="" value="(需要输入的内容)"/>

文本域:<input textarea name="" id="" cols="(字符多少,可理解为宽度)" rows="(几行高)"/>

隐藏域:<input type="hidden" name="" id="" value=""/>

备注:<textarea name="third" cols="" rows=""></textarea>

2、按钮

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

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

普通按钮:<input type="botton" name="" id="" disable="disable" value=""/>

图片按钮:<input type="img" name="" id="" disable="disable" src="图片地址"/>

3、选择输入

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

           name的值用来分组,如果相同name说明在同一个组里,所以不能同时选中(比如选男女)

           value是提交给程序的,在页面中不显示

           checked设置默认选项

复选框组:<input type="checkbox" name="" checked="checked" value=""/>

文件上传:<input type="file" name="" id=""/>

          <lable for=""></lable>

        lable标签为input元素定义标注。

        lable元素不会向用户呈现任何特殊效果,不过,他为鼠标用户改进了可用性。如果您在lable元素内点击文本,就           会触发此控件。

        就是说,当用户选择该标签时,浏览器会 将焦点转到和标签相关的表单控件上。

        lable标签的for属性应当与相关元素的id属性相同。

下拉列表框:<select name="" id="" size="" multiple="multiple">

          size为1时,默认选择框里面是第一个选项;>1时,会出现滚动条。

         <option value="值">内容1</option>

         <option value="值" selected="selected">内容2</option>

        selected,设为默认

        <option value="值">内容3</option>

          </select>

利用表单制作一个邮箱注册页面

 

时间: 2024-11-08 19:28:57

HTML静态网页:表格、表单的相关文章

web网页的表单排版利器--960css

http://www.cnblogs.com/birdwawe/p/4062106.html 表单排版样式 960css 前言 一般web网页的表单排版,大家都习惯用table排版,自己需要根据实际需要去定义TR和TD,很多时候对于TD的高宽度.是否合并行,合并列,都要去做一些处理,这些都是比较繁琐的工作.找到一个表单排版的替代工具,提前定义好CSS样式,无疑可以减轻我们的这些工作. 下面简单一个一个表单排本CSS框架,960css. 960css目录结构 (其中960分为fixed和fluid

HTML表格表单综合——用户注册表

今天学习了表格和表单知识,我综合了他们添加了一些拓展知识做了一个用户注册表,以下面代码来整理表格和表单知识: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml&quo

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

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

网页禁用表单的自动完成功能禁用密码自动填充autocomplete

网页中表单的自动完成功能,有时候很方便,但是有时候并不想让浏览器记忆表单,比如禁用密码域自动填充功能, 网页禁用表单的自动完成功能是由input元素的autocomplete属性控制,关闭表单的自动完成就是设置autocomplete="off",默认是就是开的值为on 关闭密码域的自动完成: <input type="password" name="password" autocomplete="off"> 关闭

【2】HTML表格表单

单元格中数据的对齐方式 Align = left Align = center Align = right Valign = top Valign = middle Valign = bottom 合并单元格 水平合并在 或 标记中使用 COLSPAN 属性,可以设置单元格所跨的列数,例如COLSPAN=3表示跨3列. 垂直合并在 或 标记中使用 ROWSPAN 属性,可以设置单元格所跨的行数,例如ROWSPAN=3表示跨3行. 表格总结 表格的基本结构 表格标记table的属性 border/

3月20号 图片热点 网页划分 表单

图片划分: 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. <img src="../我/m_14_634758583539062500_36767976.jpg" usemap="cat" name="猫" title="这是一只猫"/> <map name="cat"> <area shape="circle" coord

html表格表单标签的结合

今天我尝试将表格表单基本标签结合起来放在网页中,发现再没用表单元素中<form></form>时各类标签功能都可显示,只是不能提交网页,所有与提交网页的标签都不能使用提交功能,而且按钮类的功能都不能实现,其他的可以使用 <td height="300"> 输入用户名<input type="text" name="1" value=""/><br /> 输入密码<

【html学习整理】meta,img,表格,表单

meta标签: 作用: 给搜索引擎用 . 告诉浏览器是什么编码 <meta charset="UTF-8"> <meta name="keywords", content="烧饼 武大郎烧饼"> 关键字搜索 <meta name="description", content="******"> . 描述 图片img 图片格式:jpg gif png 语法: <img

[Swift通天遁地]二、表格表单-(7)电子邮件Mail:实现单元格左右滑动调出功能按钮

本文将演示对单元格进行扩展,当手指在单元格左右滑动时,弹出不同的功能菜单. Github项目:[MGSwipeTableCell] 下载该项目的源代码.文件夹[demo]->文件夹[MailAppDemoSwift]->文件夹[MailAppDemoSwift] ->双击文件[MailAppDemoSwift.xcodeproj]打开示例工程. 选择该项目中的几个文件,拖动到自己的开发项目中.按住[Shift],选择 [MGSwipeButton.h] [MGSwipeButton.m]

网站前端_Bootstrap.基础入门.0002.排版/列表/表格/表单/按钮/图像?

通用技能: # 文档类型 <!DOCTYPE html> <html lang="zh-cn">     <!-- Html Code --> </html> 说明: 由于BootStrap基于HTML5,所以所有的HTML文件都需要在其顶部引用HTML5的DOCTYPE属性. # 移动先行 <meta name="viewport" content="width=device-width, initi