表格及表单

表格的基本结构

单元格中数据的对齐方式

  • Align = left
  • Align = center
  • Align = right
  • Valign = top
  • Valign = middle
  • Valign = bottom

合并单元格

1.水平合并在 <TD> 或 <TD> 标记中使用 COLSPAN 属性,可以设置单元格所跨的列数,例如COLSPAN=3表示跨3列。

2.垂直合并在 <TD> 或 <TD> 标记中使用 ROWSPAN 属性,可以设置单元格所跨的行数,例如ROWSPAN=3表示跨3行。

表格总结

表格的基本结构

表格标记table的属性

border/width属性

cellspacing/cellpadding属性

行标记tr的属性

algin属性

valgin属性

height属性

单元格td的属性

colspan属性   水平合并

rowspan属性  垂直合并

algin属性

valgin属性

width/height属性

表单的组成

表单标签  <form action=“表单提交地址”method=“post/get”>

这里面包含了所有的表单控件

</form>

Get与post的区别:

GET请求的数据会被浏览器缓存起来,用户名和密码将明文出现在URL上,其他人可以查到历史浏览记录,数据不太安全. Get传输的数据有大小限制因为GET是通过URL提交数据,那么GET可提交的数据量就跟URL的长度有直接关系了,不同的浏览器对URL的长度的限制是不同的. Get请求的参数会跟在url后进行传递,请求的数据会附在URL之后,以?分割URL和传输数据,参数之间以&相连,%XX中的XX为该符号以 16进制表示的ASCII,如果数据是英文字母/数字,原样发送,如果是空格,转换为+,如果是中文/其他字符,则直接把字符串用BASE64加密.

Post没有限制提交的数据。Post比Get安全.则用get,因为使用get,参数会显示在地址,对于敏感数据和不是中文字符的数据,则用post.

表单元素

输入标签:<input   type=“值”/>

值:  text    单行文本框,只能输入一行文本

password    密码框

radio       单选框

checkbox    复选框

file         文件域

submit      提交按钮

reset         重置按钮

button      普通按钮(一般按钮)

•name属性

<input type="radio" name="sex"   />男

<input type=“radio” name=“sex”  /> 女

–注意: Name属性定义单选框的名称,单选框都是以组为单位使用的,在同一组中的选项必须使用同一名称

•checked属性

申请产品:<input  type=“checkbox”  checked=“checked”/>实木

•value属性

<input  type=“submit”  value=“提交 ”/>

<input  type=“submit”  value=“取消 ”/>

下拉菜单<select></select>:

主要用于在有限的空间里设置多个选项。

  

<select>

<option value=“”>请选择</option>

<option value=“1” selected=“selected”>1949 </option>

</select>

•文本域

–主要用于输入较长的文本信息

<textarea  rows=“5” cols=“30”>     </textarea>

时间: 2024-10-11 17:58:56

表格及表单的相关文章

HTML之表格和表单

1. 表格和表单的区别:表格多用于页面布局,创建页面的排版样式.表单多用于传输数据获取信息,如:input输入框,单选.多选.下拉选择框. 2. 表格:table. a. 基本样式如下: <table> <caption> table test </caption> <tr> <td rowspan="2">1</td> <td>2</td> </tr> <table/&g

第3天:CSS浮动、定位、表格、表单总结

今天学的是浮动.定位.表格.表单等内容,这些是CSS中最容易混淆的知识,有许多小技巧在写代码过程中需要注意.下面是主要知识点: 一.float浮动1.块元素在一行显示2.内联元素支持宽高3.默认内容撑开宽度4.脱离文档流5.提升层级半层二.clear清除浮动1.加高(扩展性不好)给浮动元素的父级设置同样的高度2.给父级加浮动(页面中所有元素都要加浮动,margin左右失效)3.inline-block(margin左右auto失效)4.空标签加浮动(div )(任何用到的地方都要加).clear

css011 表格和表单的格式化

css011 表格和表单的格式化 一.    让表格专司其职    Html中创建一个三行三列的表格 <table> <caption align="bottom"> table 1:cosmofarmer.com's indoor mower roundup </caption> <colgroup> <col id="brand"></col> <col id="price&

DOM之表格与表单基础分享

我是沐晴,好久不见.马上要放假啦,也是比较的忙. 今天来谈谈表格和表单的基本知识.前期的写的都是比较基础的知识,后期会慢慢增加实例.一起来学习吧. 先看表格,DOM中提供了一些属性,便于我们获取表单节点:tBodies tHead  tFoot  rows(行)  cells(列)(带S的都是获取的是一组元素) var oTab = document.getElementById('tab'); oTab.tBodies[0].rows[1].cells[0] //获取第二行的第一个 注意,写表

【2016.11.27】表格和表单练习

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> table{border-collapse:collapse;} span{color:#f00;} </style> <title>表格和表单</title> </head> <body>

html+css学习笔记 5[表格、表单]

表格 -- 默认样式重置 表格标签:     table 表格     thead 表格头     tbody 表格主体     tfoot 表格尾     tr 表格行     th 元素定义表头     td 元素定义表格单元 表格样式重置 table{border-collapse:collapse;} 单元格间隙合并 th,td{padding:0;}重置单元格默认填充   单元格合并 rowspan  属性规定单元格可横跨的行数.     <td rowspan="2"

HTML1118,表格与表单

<!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"> <head> <meta http-equiv="Content-

表格和表单的学习知识

刚开始接触java 学习基础知识表格和表单的做法,下面写今天所学知识 <!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"><head>&l

HTML基础(表格与表单)

1.3.表格与表单 1.3.1.表格 <table></table> 表格 width:宽度.可以用像素或百分比表示.常用960像素. border:边框.常用值0. cellpadding:内容跟单元格边框的边距.常用值0. cellspacing:单元格之间的间距.常用值0. align:对齐方式. bgcolor:背景色. background:背景图片. <tr></tr> 行 align:一行的内容的水平对齐方式 valign:一行的内容的垂直对齐

HTML(二)表格、表单

本章主要内容: 表格 form表单 一.表格 A.结构 <table border="1" > <caption>我是标题</caption> <tr><th>序号</th><th>内容</th></tr> <tr><td>1</td><td>我</td></tr> <tr><td>2