H5基础阶段二（表格、表单）
HTML5基础阶段--表格、表单
- 一. 表格
- Ⅰ 表格的基本构成
- Ⅱ 合并
- Ⅲ 属性
- 1. table的属性（基本，边框，背景属性）
- 2. tr：表格的行属性
- 3. td：表格的单元格属性
- Ⅳ 表格作业示例：
- 二. 表单
- Ⅰ 概念
- Ⅱ 向服务器提交数据的方式
- Ⅲ 表单控件及其属性
- 1. input框类型 及 属性
- 1）表单控件类型
- 2）input标签属性（后面都是跟 =" "）
- 2. 下拉列表 select & option
- 1）代码格式
- 2）属性
- 3. 多行文本框：textarea
- 1）代码示例
- 2）属性
- 4. 按钮及图像
- Ⅳ 完整表单示例
一. 表格
Ⅰ 表格的基本构成
表格由行、列 和 单元格3部分组成
- table : 是整个表格的框架
- tr：单元行
- td：单元格
- caption：表格标题（写在table之中，tr之前，一般位于整个表格的第1行；一个< table>表格只能含有一个表格标题）
<caption> 表格的标题 </caption> - th：表头（如果有需要的话，表格的第一行替代所有的td）
<!-- table：表格的整体框架 --><table border="1px" align="center" cellspacing="30px" cellpadding="10px" ><caption>姓名性别统计表</caption><!-- 表格的第一行 --><tr><!-- 表头 --><th>姓名</th><th>性别</th></tr><!-- 表格的第二行 --><tr><!-- 单元格 --><td>小杨</td><td>男</td></tr><!-- 表格的第三行 --><tr><td>小高</td><td>女</td></tr></table>
Ⅱ 合并
- 合并单元格： colspan：水平合并 （跨列）
rowspan：垂直合并 （跨行） - 合并的本质： 不是侵占，而是给自身添加了位置。
① 水平合并：在本行，自身多占一个单元格
② 垂直合并：占用下一行的一个单元格
Ⅲ 属性
1. table的属性（基本，边框，背景属性）
- table基本属性
< table
width="表格的宽度">< table
height="表格的高度">< table
align="表格的对齐方式">*align left: 整个表格在浏览器页面中左对齐
center: 居中对齐
right: 右对齐
如果不指定表格宽度，浏览器就会根据表格内容的多少自动调整宽度。
- table边框属性
< table
border="边框宽度"bordercolor="边框颜色"cellspacing="内框宽度值"cellpadding="文字与边框距离值">< /table>
① 默认情况下如果不指定 border 属性，则浏览器将不显示表格边框。
② 使用 bordercolor 设置边框颜色。
③ 表格的 内框宽度 属性 cellspacing 用于设置 表格内部每个单元格之间 的 间距。
（助记：cell 意思是细胞，spacing 是 间距，可理解为 细胞间的距离，即每个单元格之间的距离）
|
④ 表格的 文字与边框距离 属性 cellpadding 来设置 单元格边框 与 单元格里的内容 之间的距离。在默认情况下，单元格里的内容会紧贴着表格的边框。
（助记：cell 意思是细胞，padding 是 内边距，可理解为 细胞的内边距，即每个单元格里的内容 与 其单元格边框 之间的 距离）
|
- table背景属性
< table
bgcolor="背景颜色"background="背景图像地址">
2. tr：表格的行属性
- < tr
height = "行的高度"bgcolor = "背景颜色"background = "背景图片"align = "文字水平对齐方式"valign = "文字垂直对齐方式">< /tr>
< tr>的 valign 属性用来控制表格当前行的 垂直对齐方式。
方式有 3种，分别是 top（居上）、middle / center（居中） 和 bottom（居下）。
3. td：表格的单元格属性
- < td
width = "单元格宽度"height = "单元格高度"bordercolor = "边框的颜色"bgcolor = "背景颜色"background = "背景图片"align = "文字水平对齐方式"valign = "文字垂直对齐方式">< /tr>
单元格 是 表格中 最基本 的单位。单元格全部包含在行中，一个行里面可以有任意多个单元格。可以自定义设置单元格的各项属性，这些样式将覆盖 < table > 和 < tr > 已经定义的样式。
以上三者的关系：td > tr > table
上述所有内容（table，tr，td），如果没有指定宽高的话，以内容来撑开。
Ⅳ 表格作业示例：
效果图如下
代码如下：
<!DOCTYPE html>
<html>
<head><title></title><meta charset="UTF-8"><style type="text/css">td{font-size: 20px;}caption{font-size: 20px;}</style>
</head>
<body><table border="1px" width="800px" align="center" cellspacing="3px" cellpadding="15px"><caption>表头信息</caption><tr><td align="left" bgcolor="#808080"><b>11</b></td><td align="left" bgcolor="#808080"><b>22</b></td></tr><tr><td align="center" bgcolor="#0000FF">啊啊</td><td align="center" bgcolor="#0000FF">bb</td></tr><tr><td align="center" bgcolor="#0000FF">啊啊</td><td align="center" bgcolor="#0000FF">bb</td></tr><tr><td align="center" bgcolor="#0000FF">啊啊</td><td align="center" bgcolor="#0000FF">bb</td></tr><tr><td align="center" bgcolor="#0000FF">啊啊</td><td align="center" bgcolor="#0000FF">bb</td></tr><tr><td align="right" colspan="2" bgcolor="#FF0000"><b>dddd</b></td></tr></table></body>
</html>
二. 表单
Ⅰ 概念
表单 是Web浏览器和Web服务器进行通信的最常用的手段，即通过表单，浏览器不仅能从Web服务器中获得信息，而且还能向Web服务器反馈信息。HTML为此提供了表单(Form)元素来设计和实现这种交互界面。
表单存在于浏览器中，用来收集用户信息。收集完成后，提交到服务器
多使用于： 登录，注册，搜索 等场景
< form method=" " action=" ">< /form>
Ⅱ 向服务器提交数据的方式
1. Get： 速度快，安全性较低。适用于普通数据的请求
2. Post： 速度相对get较慢，安全性较高。 适用于账号密码一类保密性数据的传递
< form method="get" action=" biaoge.html ">< /form>
Ⅲ 表单控件及其属性
表单形成的交互界面上有许多元素，负责收集用户输入的各种信息，这些元素一般称为控件。
1. input框类型 及 属性
1）表单控件类型
- 单行文本输入框： text
姓名：<input type="text"/>
- 密码框： password
密码：<input type="password"/>
- 单选按钮： radio（注意label标签）
性别： <label><input type="radio" name="ipt" /> 男</label><label><input type="radio" name="ipt"/> 女</label>
- 复选按钮： checkbox（注意label标签）
爱好： <label><input type="checkbox"/>计算机</label><label><input type="checkbox"/>音乐</label><label><input type="checkbox"/>美术</label><label><input type="checkbox"/>运动</label>
- 上传文件： file
作品附件：<input type="file"/>浏览...
- 提交按钮： submit
< input type="submit" value="提交" formaction="xxx.html" formmethod="post" />
- 重置按钮： reset
<input type="reset" value="重填" />
- 点击按钮： button
<input type="button" value="点击" />
label标签：包裹住单or复选框和文字时，点击文字，单(复)选框可以被选中。（用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上）
2）input标签属性（后面都是跟 =" "）
| input 标签共有的一些属性 |
- type：控件的类型样式（每个input必须填写的属性，默认为text）
- value：指定默认值
- size：文本框显示的长度
- maxlength：用户可以输入的最多字符
- name：用于给input取别名，别名在 css 或 js 以及服务器收集数据时可以使用（用于服务器获取数据）
- disabled： 获取或设置表单控件是否禁用，背景有阴影；
使表单禁用 （可直接写属性名，不写属性值） - readonly：控件只读属性 不能更改只能复制和读取；
只可以查看和获取表单的值，无法修改（可直接写属性名，不写属性值） - required：必填项，如果不写，无法提交（一定要写提交方式）；
规定该项input为必须填写，否则整个form表单无法提交（可直接写属性名，不写属性值） - placeholder：用户提示信息 （eg.placeholder=“请输入用户名”）
- formaction = “提交按钮自定义提交地址”
- formmethod = “自定义提交方式”
| 单选 radio 和 多选 checkbox 的一些属性 |
- value：该选项被选中后提交到服务器的值
- checked：默认的选中项
- name
2. 下拉列表 select & option
*HTML是通过 < select> 和 < option> 标记来定义输入列表框的。
*列表框标记 < select> 是 成对 出现标记，首标记 < select> 和尾标记 < /select> 之间的内容就是一个列表框的内容。
< option>标记用于定义列表框中的各个选项
1）代码格式
<select name="..." size="..." ><option value="..." selected="selected">... </option><option value="..." selected =" "＞... </option><option > ... </option></select>
代码示例：
学历： <select name="..." size="..." ><option>请选择您的学历</option><option>高中</option><option>大专</option><option selected>本科</option><option>研究生</option></select>
2）属性
| < select >标记属性：name，size 和 multiple |
- name：用于指定输入列表框的名字。name属性是不可缺省的。
- size：size属性是可选的，用于定义列表框的长度。
参数值是数字，表示显示在列表框中的选项数目。
当size属性的参数值 < 列表框中的列表项数目时，浏览器会为该列表框添加滚动条，用户可使用滚动条查看所有选项。
size属性的缺省值（默认值）为1。 - multiple： 属性表示可以多选，如果不设置本属性，那么只能单选
| < option >标记属性：value，selected（都可选） |
- value：该属性的参数值是当该项被选中并提交后，web浏览器传送给服务器的数据。缺省时，浏览器将传送选项的内容。
- selected：用来指定选项的初始状态，表示该选项在初始时是被选中的。
3. 多行文本框：textarea
HTML用 < textarea> < /textarea> 标记来定义高度超过一行的文本输入框。
< textarea>标记是 成对出现 标记，首标记 < textarea> 和 尾标记 < /textarea>之间的内容就是显示在文本输入框中的初始信息
1）代码示例
<textarea name="" id="" cols="30" rows="10"></textarea>示例：个人简介： < textarea cols="20" rows="5">< /textarea>
2）属性
- name：用于指定文本输入框的名字。
- cols： 用于规定文本输入框的宽度。属性的参数值是数字，表示一行所能显示的最大字符数
- rows：用于规定文本输入框的高度。属性的参数值是数字，表示该文本输入框所占的行数。
4. 按钮及图像
< button>点我啊< /button>
< input type="button" value="come on"/><input type=“submit">提交
< input type=“reset”>重置
< input type=“button”>点击
<input type=“file ”>上传
<input type=“image”src=“”>图片属性：
- hidden：隐藏按钮
- value：按钮中显示的内容
- name：用于表单提交的属性
Ⅳ 完整表单示例
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>表单</title>
</head>
<body><form method="get" action="biaoge.html"><!-- type：input的样式 必须写的 -->用户名：<input type="text" value="杨~~" size="30" maxlength="3" required /> <br/><!-- <input type="text" value="杨~~" placeholder="请输入用户名" size="30" disabled 或 readonly/> -->密码： <input type="password"/> <br/>性别： <label><input type="radio" name="ipt" /> 男士养生</label><label><input type="radio" name="ipt"/> 女</label><br/>爱 好： <label><input type="checkbox"/>唱歌</label><label><input type="checkbox"/>跳舞</label><label><input type="checkbox"/>篮球</label><label><input type="checkbox"/>游泳</label><br/>作品附件： <input type="file"/>上传文件<br/>下拉列表： <select><option>请选择您的学历</option><option>高中</option><option>大专</option><option selected>本科</option><option>研究生</option></select><br/> 个人介绍： <textarea cols="20" rows="5"></textarea> <br/><input type="submit" value="提交" /><input type="submit" value="提交" formaction="趣味练习.html" formmethod="post" /><input type="reset" value="重填" /><!-- 按钮 --><button>点我啊</button><input type="button" value="come on"/><!-- 图像 --><img src="../4.jpg"><input type="image" src="../4.jpg" /></form>
</body>
</html>
H5基础阶段二（表格、表单）相关推荐
- 通过CSS，H5，JavaScript实现表格表单的随机选择，和简单的随机点名。
目录 一.表格表单的随机选择 效果展示(表单内容可以根据自己需要进行修改) 1.H5的布局 第一步: 第二步: 2.CSS布局 3.JS的布局 第一步: 第二步: 第三步: 二.简单的随机点名 效果展 ...
- Bootstrap框架(基础篇)之列表,表格,表单
继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul><li>-& ...
- 定义列表的特点html,HTML的列表表格表单知识点
无序列表格式 ...
- 【前端学习日志】HTML表格表单注册页面案例+CSS选择器
今日学习 一.HTML部分 1.表格的基本语法 2.表头单元格标签 3.还是表头单元格标签 4.小说排行榜案例 5.合并单元格 6.无序列表 7.有序列表 8.自定义列表 9.表单域 10.Input ...
- laravel基础课程---14、表单验证（lavarel如何进行表单验证）
laravel基础课程---14.表单验证(lavarel如何进行表单验证) 一.总结 一句话总结: lavarel的验证的功能比tp要[简单]且[强大]很多 直接控制器中:添加[规则数组]和[修改提 ...
- 任务01-05表格表单的知识点的整理
一.表格的使用 1.表格(table),表头(thead):行(tr),列(th),有加粗且居中,表身(tody):行(tr),列(td). 2.当给table标签设置border标签的时候,会因为t ...
- web day02 表格 表单及HTML常用的表单控件
一. 表格的标签及属性 table属性 Width.height 宽高(单位是像素或百分比) align 对齐 border 外边框 bgcolor 背景色 background 背景图片 Cells ...
- HTML、CSS、表格表单简单代码笔记
学习更多建议菜鸟教程 Target使用 <!DOCTYPE html> <html lang="en"> <head><meta char ...
- 2017-2-15从0开始前端学习笔记（HTML）-图片-表格-表单
2017-2-15从0开始前端学习笔记-图片-表格-表单 标签 图片 图片<img src="#" alt="文本说明 不能加载图片时显示" title= ...
- vue.js 表格表单序号
vue.js 表格表单序号 表格是动态的,通过v-for="(item,index) in sites" 循环出来的表格 ,通过index属性,实现表格序号自增, 结合页码和每页数 ...
最新文章
- stk 坐标系_STK学习-坐标系
- .net 简单实现MD5
- [译] NSCollectionView 入门教程
- VTK修炼之道52：图形基本操作进阶_多分辨率策略（模型抽取的三种方法）
- 显式无参数构造函数与默认构造函数
- matplotlib 绘制梯度下降求解过程
- JavaEE实战班第九天
- DevExpress 用户控件 分页（中）
- html5 ocr图片识别,OCR识别控件LEADTOOLS HTML5案例：整页OCR识别
- python语言的语法_Python语言学习系列------基础语法（一）
- php 接口类，抽象类 的实际作用
- 1.javascript 自动定时刷新网页脚本
- Android UserManager.isUserAGoat() 的正确用例？
- 【JZOJ 5776】【NOIP2008模拟】小x游世界树 (树)
- TeamTalk Netlib详解
- xb格式数据库迁移处理
- EPUB、CAJ 、PDF 格式的区别，有什么好用的IOS手机epub阅读器
- 在网盘上传大文件，一个G的文件有可能几秒中就上传完了。称为极速秒传，请问它是怎么做到的？
- 第3课：Scratchjr功能按钮
- java中从1000万个随机数中查找出相同的10万个随机数花的最少时间