表格、表单

表格、表单

一.表格

表格组成：由 < table > 标签来定义。table是整个表格的框架。
tr : 单元行
td : 单元格
th : 表头，如果有需要的话，表格的第一行替代所有的td。
caption ：表格的标题，写在table之中，tr 之前。

实例

表格的基本属性

• align: 表格的对齐方式，< table align=”表格的对齐方式” > 。
  left: 整个表格在浏览器页面中左对齐
  center: 居中对齐
  right:右对齐

• 指定表格的宽高：< table width=”表格的宽度” height=”表格的高度” >，如果不指定表格宽度，浏览器就会根据表格内容的多少自动调整宽度。

表格的边框属性

默认情况下如果不指定border属性，则浏览器将不显示表格边框。使用bordercolor设置边框颜色。表格的内框宽cellspacing用于设置表格内部每个单元格之间的间距。在默认情况下，单元格里的内容会紧贴着表格的边框，使用cellpadding来设置单元格边框与单元格里的内容之间的距离。
< table border=边框宽度” bordercolor=”边框颜色” cellspacing=”内框宽度值” cellpadding=”文字与边框距离值”>

实例

合并单元格

在设计表格时，有时需要将两个或更多的相邻单元格组合成一个单元格。rowspan垂直合并（跨行），colspan水平合并（跨列），合并的本质不是侵占，而是给自身添加了位置。

实例

表格的背景

表格的背景颜色属性bgcolor是针对整个表格的，bgcolor定义的颜色可以被行、列或单元格定义的背景颜色所覆盖。< table bgcolor=”背景颜色” background=”背景图像地址”>

实例

二.表单

表单存在于浏览器中，用来收集用户信息，收集完成后，提交到服务器。多用于登录、注册、搜索等场景。

表单控件类型

text	单行文本输入框
password	密码框
radio	单选按钮
checkbox	复选按钮
file	上传文件
submit	提交按钮
reset	重置按钮
select	下拉列表
textarea	多行文本输入框

input标签属性

type	控件的类型
value	指定默认值
size	文本框显示的长度
maxlength	用户可以输入的最多字符
name	用于服务器获取数据
disabled	获取或设置表单控件是否禁用，背景有阴影
readOnly	控件只读属性 不能更改只能复制和读取
required	必填项，如果不写，无法提交（一定要写提交方式）
placeholder	用户提示信息

实例

<form method="get" action=" 7.9zuoye.html">
         用户名：<input type="text" />  <br>
         密码：  <input type="password" />
         <br> 
         姓别：<label>
         	         <input type="radio" name="ipt" /> 男
              </label>
              <label>
              	     <input type="radio" name="ipt" />女
              </label>
              <br/>
         爱好：<label>
                     <input type="checkbox" /> 唱歌
               </label>
                     <input type="checkbox" />跳舞
                     <input type="checkbox" />篮球
                     <input type="checkbox" />游泳
              <br/>
         作品附件：<input type="file" /> 上传文件
              <br/>
          下拉列表： <select>
                           <option>请选择您的专业</option>
                           <option>高中</option>
                           <option>大专</option>
                           <option>本科</option>
                           <option>研究生</option>
                    </select>
                    <br/>
         个人介绍：<textarea></textarea>
                    <br/>
          <input type="submit" value="提交" />
          <input type="submit" value="重置" />
     </form>

lable 标签：包裹住单复选项框和文字时，点击文字，单复选框可以被选中。

实例

姓别：<label>
         	         <input type="radio" name="ipt" /> 男
              </label>
              <label>
              	     <input type="radio" name="ipt" />女
              </label>

采用何种方式将表单中的数据传送到服务端？

Get 缺点：安全性低，以明文的方式提交，传输数据上限是1M.优点是速度快。
Post 缺点：速度慢。优点：数据上传在媒体文件中，安全性高，默认上限5M。