表单和表格

表格标签:<table></table>
表格--背景色:bgcolor
边框:border
宽度:width
高度:height
边框色:bordercolor
边框深色:bordercolordark(废弃)
边框浅色:bordercolorlight(废弃)
单元格间距:cellspacing,不用带单位
内边距:cellpadding,要带单位
对齐:align
单元行--高度:height,百分比
水平对齐:align;left、center、right
垂直对齐:valign;top、middle、bottom
单元格--宽度:width,百分比
水平对齐:align;left、center、right
垂直对齐:valign;top、middle、bottom
跨行:rowspan
跨列:colspan

表格分区:
<thead></thead>:划分出表格的头部
<tbody></tbody>:划分出表格的主体
<tfoot></tfoot>:划分出表格的底部

表格标题:<caption></caption>
为表格定义一个标题,默认在表格外的最上方水平居中显示;
caption必须位于table的正下方,紧挨着table;

表头:<th></th>
不能包含td,表头只能包含在tr中,默认表头内的文字居中显示并加粗;

表单:
用于显示、收集信息,并提交信息到服务器;
组成部分:
1、实现数据交互的可见的用户界面,比如:文本框、提交等;
2、提交后的表单处理;
使用<form></form>标记创建表单;在该标记中添加其他表单可以包含的控件;

<input />:用于收集用户信息;
类型--type:text文本类型;
password密码类型
radio单选类型
checkbox多选类型
submit提交按钮
reset重置按钮
button普通按钮
输入框(文本类型和密码类型)--name设置输入框提交后对应的信息的名称
value一般是用于设置提示信息,也可以用于填写的信息的收集
maxlength限制输入的最大字符长度
readonly设置为“只读”
required设置为“必填”
disabled设置为“禁用”

单选和多选--name设置选项组的名称,单选的name必须一样,多选的name可以不同(最好相同)
value确认和收集选项信息,提交到服务器
checked设置默认选择项

按钮--value设置按钮的文本
name设置按钮名称

<label></label>:将文本于控件联系在一起,点击文本就可以触发控件;
for=“控件的id”就可以和控件绑定;

选项框:<select></select>
name--设置选项框的名称
size--设置显示的选项数目,大于1则变为滚动列表
multiple--设置多选,按住Ctrl多选
选项:<option></option>
value--确认和收集选项的信息,提交到服务器
selected--设置默认选项

多行文本框:<textarea></textarea>
name--设置名称
cols--设置内容的列数,相当于设置了宽度
rows--设置内容的行数,相当于设置了高度
readonly--只读
required--必填
disabled--禁用

input其他类型:email--邮箱类型,输入错误的邮箱地址,提交时会报错,只会检测有没有“@”;

form表单属性:
enctype:指定表单的数据类型(数据进行编码的方式)
method:指定表单数据提交的方式;
get--将数据附加在地址中提交;最大缺点是缺乏安全性、上传的信息不完全;优点是数据的传输速度快;
post--将数据打包提交到服务器;安全性非常好、数据传输完整;传输速度相对较慢;
action:定义表单提交时发生的动作,包含服务器脚本的URL(jsp、php...)

控件分组:<fieldset></fieldset>为控件分组
<legend></legend>为分组指定标题

有序列表:<ol></ol>
列表项:<li></li>
代码:<ol>
<li></li>
</ol>
属性--type:1,数字类型;
a,小写字母类型;
A,大写字母类型;
i,小写罗马数字类型;
I,大写罗马数字类型;
start:设置序列号的起始;

无序列表:<ul></ul>
列表项:<li></li>
属性--type:disc实心圆(默认);
circle空心圆(圆圈);
square实心举行;

定义列表:<dl></dl>用于给出一类实物的定义,如:名词解释、解释说明、字典等等
<dt></dt>指定一个名词或术语
<dd></dd>对dt当中的内容进行解释说明
dt下面的dd是对该dt的解释说明,一个dt下面可以有多个dd;一个dl中可以有多个dt;

结构标记
<header></header>用于定义页面头部或者某一个区域的头部
<nav></nav>用于定义页面的导航信息
<section></section>定义某一个区域的主体
<article></article>用于定义某一篇文章、博客、论坛帖子等等
<article>
<h1></h1>
<p></p>
<img />
</article>
<footer></footer>定义页面的底部或者某一个区域的底部
<aside></aside>定义页面的额外信息,比如:侧边栏、广告栏等等

摘要与细节
<details></details>用于定义细节
<summary></summary>用于定义细节的标题

度量标记:
<meter></meter>
value设置电量的值
min设置最小取值范围
max设置最大取值范围

文本高亮显示标记:
<mark></mark>

原文地址:https://www.cnblogs.com/tangdiying/p/10098492.html

时间: 2024-10-07 20:55:08

表单和表格的相关文章

form表单和表格

HTML <table> 标签 border pixels 规定表格边框的宽度. STF cellpadding pixels % 规定单元边沿与其内容之间的空白. STF cellspacing pixels % 规定单元格之间的空白. STF HTML 5 <form> 标签 action 定义一个 URL.当点击提交按钮时,向这个 URL 发送数据. method 用于向 action URL 发送数据的 HTTP 方法.默认是 get. HTML <input>

第三篇 HTML 表单及表格

表单及表格 表单,常用在登录.注册等地方,这也是一个最基本的. 我们就用登录,来学习什么是表单! 表单 form 标签,在某些好用的编辑工具,比如:WebStorm  你在上面写出form再按下 键盘左侧的'Tab'键,会直接弹出form的开始和结束标签,其他元素 div table span 等都是一样的,还会弹出此元素必要的 属性, 比如img 按下 'Tab' 就会弹出 这样的 <img src="' /> 它会直接帮你写好. 来吧,继续说form表单,因为是介绍给入门同学的,

表单与表格操作

表格操作:    插入:    插入行:    tableElement.insertRow(position)            //返回值为一个tr节点即一个rowElement.position从0开始计数.    插入单元格:    rowElement.insertCell(position)                //返回值为一个td节点即一个cellElement.position从0开始计数.        删除:    删除行:    tableElement.de

精通CSS+DIV网页样式与布局--设置表单和表格

表格和表单是网页中非常重要的两个元素,在上篇博客中,我们简单的介绍了CSS的页面背景设置,今天小编继续来介绍CSS的相关知识,在我们的CSS中如何设置表格和表单,首先,来看一张思维导图,通过图简单的预览一下该博文主要讲解哪些CSS的基础知识: 首先我们的首先表格中的标记,代码和运行效果如下所示: <span style="font-size:18px;"><html> <head> <title>年度收入</title> &l

点击按钮,通过JS代码实现复制INPUT表单,表格:

获取表单: <SCRIPT LANGUAGE="JavaScript"> function copyinput() { var input=document.getElementById("inputid");//input的ID值 input.select(); //选择对象 document.execCommand("Copy"); //执行浏览器复制命令 } </SCRIPT> 获取表格: <SCRIPT LA

LigerUI 表单和表格中的combobox如何初始化值

摘要: 在修改基础信息的时候,通常会遇到需要修改值为选择值的时候,这时候,数据库存的一般是value,而不是显示的text值,但页面显示的时候如果显示成数字型的值,通常会给人不够直观的感觉.因此,要求页面在加载的时候,根据value,初始化combobox的选择值. 疑难点: 表单配置值: { display: Dictionary.mrl.mrl_class_gid, newline: true, name: "pid", type: "select", comb

DHTMLX 前端框架 建立你的一个应用程序 教程(九)--绑定表单Form到表格Grrid中

绑定表单Form到表格Grrid中 现在我们需要选中一行表格数据的时候 数据能在表单中显示出来 我们可以使用DHTMLX 丰富的组件功能实现它. 绑定表单到表格 1.调用bind方法将表单绑定到网格,使其反映从网格中的所有数据 "index.html" file contactForm = layout.cells("b").attachForm(); contactForm.loadStruct("data/form.xml"); contac

HTML基础表单

HTML基础表单 1.表单标签 标签 描述 form:定义供用户输入的表单 input:定义输入域 textarea :定义文本域 (一个多行的输入控件) label :定义一个控制的标签 fieldset :定义域 legend :定义域的标题 select:定义一个选择列表 option :定义下拉列表中的选项 button :定义一个按钮 hoden:隐藏 submit:自带提交按钮 reset:重置 date:日期 radio:单选 checkbox:复选 number:数字 email

5.3 Dreamweaver制作表单

表单是HTML的一个重要部分,主要用于采集和提交用户输入的信息,它也是实现动态网页的一种主要表现形式.下面我们就使用Dreamweaver CS3快速地创建常用的表单页面. 一.什么是表单 表单是网站管理者与访问者之间沟通的桥梁,包含如按钮.文本框.下拉列表框.单选按钮.复选框等表单元素.表单元素用于接受用户的输入并提供一些交互式操作.用户输入的数据可以通过客户端脚本来验证,然后提交给服务器作进一步的处理. 表单在万维网(www)上应用非常广泛,而且仍在不断发展.下面是一个“注册”表单的典型例子