day02:列表、表格、表单 目标:掌握嵌套关系标签的写法,使用列表标签布局网页 01-列表 作用:布局内容排列整齐的区域。 列表分类:无序列表、有序列表、定义列表。 网页中的表格与 Excel 表格类似,用来展示数据。 提示:在网页中,表格默认没有边框线,使用 border 属性可以为表格添加边框线。 -了解 作用:用表格结构标签把内容划分区域,让表格结构更清晰,语义更清晰。 经验:用 label 标签绑定文字和表单控件的关系,增大表单控件的点击范围。
value=”刘亦菲” id=”3″ /><label for=”2″>刘亦菲</label> <input type=”checkbox” name=”boxs” value=”古天乐” id=”4″ name=boxs]:checkbox:checked”).each(function(){ str+=$(this).val()+”|”; }); alert(str); }); </script> 2、表单验证代码示例 [a-zA-Z]{2,4}$/.test(this.value))){ var message=”E-Mail地址不合法”; $(“.message”).remove(); $par.append(“< ; return true; } }); </script> 3、表格展开关闭代码示例: <style> .parent{ background:#CCC;} .select{ background:#666
image.png 表格变色 ? image.png $("tr:contains('王五')").addClass("selected")
编辑表格的内容,包含编辑头部及body的每行内容,以及增加行 <template>
本章将学习如何在页面中创建一个表格以及表格的基本操作,例如合并单元格、使用背景图像美化表格、创建表单以及表单元素的基本用法。最后,通过举例讲解表格与表单的综合应用。 4. 用于创建表格的其他标签 (1)
4,鼠标悬停:.table-hover 类可以让
中的每一行对鼠标悬停状态作出响应。 5,紧缩表格 .table-condensed:让表格更加紧凑 6.状态类 通过这些状态类可以为行或单元格设置颜色。 <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </form> 4, 3),文本域:支持多行文本的表单控件。可根据需要改变 rows 属性。 4),单选和多选:.disabled禁止点击;.checkbox-inline或.radio-inline可以使这些控件排列在一行。表格 表格的基本构成标签 table 标签:表格标签 caption标签:表格标题 tr 标签:表格中的行 th 标签 : 表格的表头 td 标签:表格单元格 表格的基本结构
| 定义表头 | < >
|---|
今天学习了表格和表单知识,我综合了他们添加了一些拓展知识做了一个用户注册表,以下面代码来整理表格和表单知识: <! > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>0606表格表单 自我介绍:
实现三个文本域的内容提交之后显示在表格中,代码直接用文本文件运行,记得后缀改为.html 运行结果 输入123,并点击提交按钮之后,数据就会显示在下面的表格中,有什么问题可以私聊我。
今天学的是浮动、定位、表格、表单等内容,这些是CSS中最容易混淆的知识,有许多小技巧在写代码过程中需要注意。 2、给父级加浮动(页面中所有元素都要加浮动,margin左右失效) 3、inline-block(margin左右auto失效) 4、空标签加浮动(div )(任何用到的地方都要加) .clearfix 标准浏览器) 父级加了透明度,子级也会继承透明度; IE滤镜:filter:alpha(opacity=0~100);(IE6、IE7浏览器透明度设置) z-index定位层级 默认后者的值高于前者 六、表格 (table) thead(表头)、tbody(表格主体)、tr(表格行)、th(元素定义表头)、td(元素定义表格单元) 表格样式重置 table{border-collapse:collapse;} 单元格间隙合并 th,td{padding:0}重置单元格默认填充 给table加border=“1”;单元格加边框 合并单元格 colspan=“2”(跨列) rowspan="2"(跨行) 七、表单
一、表格简介 在过去的web1.0时代,表格常用于页面布局。但在web2.0中,这种用表格的页面布局方式已经被抛弃,现在的网页布局都是使用CSS来实现的。 但是表格并不是一无是处,表格在实际开发中是用得非常多的,因为使用表格可以更清晰地排列数据。 二、表格基本结构 在 HTML 中,一个表格一般会由以下三部分组成: 表格:table标签 行:tr标签 单元格:td标签 1.语义 tr 指的是 table row(表格行)。 --表脚-->
这里用httpclient4.3模拟一个表单普通文本提交的方法 建一个servlet接受表单数据,只传递2个参数,name和password //servlet的访问地址是:http://localhost org.apache.http.message.BasicNameValuePair; import org.apache.http.util.EntityUtils; import org.junit.Test; public class TestHttpClient4 httpPost.setEntity(reqEntity); System.out.println(“请求url地址”+httpPost.getURI()); //提交表单请求 response是表单的响应 CloseableHttpResponse response = httpClient.execute(httpPost); try
表格的结构
| 单元格- | 单元格- | < /tr>
| 单元格- | 单元格- |
表单和高级选择器 1、什么是表单 表单用于收集用户的信息,是浏览器和用户之间沟通的桥梁。 就是你在注册账号时,让你输手机号,输密码那个小框框,明白了吧 还不明白? 在HTML中,一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成。 表单控件: 包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。 表单域: 他相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器。 <input type="radio" name="sex">男 <input type="radio" name="sex">女 </form> </body> 4、 method 用于设置表单数据的提交方式,其取值为get或post。 name 用于指定表单的名称,以区分同一个页面中的多个表单。 注意: 每个表单都应该有自己表单域。
表格隔行变色效果 案例分析 用到鼠标事件 鼠标经过 onmouseover 鼠标离开 onmouseout 核心思路:鼠标经过tr行,当前的行变背景颜色,鼠标离开去掉背景颜色 注意:第一行(thead里面的行 trs[i].onmouseout = function() { this.className = ''; } } 表单全选取消全选 // flag 控制全选按钮是否选中 var flag = true; // 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
本期介绍 本期主要介绍完善注册表单校验&案例2:表格隔行换色 文章目录 1. 案例 1:完善注册表单校验 1.1 需求说明及分析 1.2 JavaScript 知识讲解(一) 1.2.1 操作元素内容体-innerHTML 2. 案例 2:表格隔行换色 2.1 需求说明及分析 2.2 JavaScript 知识讲解(二) 2.2.1 JS 数组 2.2.2 获取元素对象的四种方式 1. 案例 1:完善注册表单校验 1.1 需求说明及分析 之前注册校验通过警告框来提示信息,这使得信息的提示很不友好。 所以我们对信息的提示进行改进,使错误信息的提示以图示方式进行展示。 案例 2:表格隔行换色 2.1 需求说明及分析 开发中,需要使用表格陈列数据,数据过多不易查看,通常使用隔行换色进行表示。
<form class="form-inline justify-content-center" method="post" action="/?"> <input type="hidden" na