HTML/CSS中可直接输数据的表格

和结合效果图:

在HTML/CSS 中,我们经常用HTML来布局和填充内容,用CSS来添加效果,修饰内容和布局,使整个页面变得更好看。

HTML和CSS的配合方法:

即在标签内添加CSS样式表的链接:

代码展示如下:

Make a Table Frame

CSS选择器

定义:

对带有指定属性的 HTML 元素设置样式。

注意:

只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择。

功能:

“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。

CSS中的选择器有三个:

标签选择器、class类选择器、id选择器

1.标签选择器样式表:a{}、 div{}、table{} ...

2.class类选择器 样式表: .class{}

3. id选择器样式表: #d1 {}

【一个HTML标签只能绑定一个id属性,一个HTML标签可以绑定多个class属性】

单纯选择

标签的时候 是对全局的的(所有的)

进行修饰;

选择器优先级:

id选择器>class类选择器>标签选择器

所以有id和class 选择器的标签将不会被覆盖。交叉时是按照优先级覆盖显示的。

部分:电脑配件管理表2018年5月-8月

单纯的HTML 表格表单内容

标题标签:

表格的标题的内容填充(HTML):

表格标题

标题的样式修饰(CSS)

table.formdata caption

{

text-shadow: #FF00ff;

text-align: center;

padding-bottom: 6px;

font-weight: bold;

}

其他标签相关内容可参考 HTML中表格的实例应用 一文。

部分:

form在网页中主要负责数据采集功能。

一个表单有三个基本组成部分:

(1)表单标签:包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。

(2)表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

(3)表单按钮:提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入。还可以用表单按钮来控制其他定义了处理脚本的处理工作。

标签

定义:

标签规定用户可输入数据的输入字段。

根据不同的 type 属性,输入字段有多种形态。输入字段可以是文本字段、复选框、密码字段、单选按钮、按钮等等

语法代码:

实例代码:

关系展示:

中 submit属性 和reset属性

实例代码:

实例展示:

标签的其他属性值:

标签外是否添加标签?

input标签外是否添加form标签需要按情形区分:

应用场景的区别:

1.所有向后台提交数据(包括原生和ajax提交)的都建议用包裹.

2.如果只是用来做前台交互效果则不推荐使用form包裹。

但提交数据时,其实也可以不用form包裹input标签:

1.如果有form标签,在点击提交铵钮时,浏览器自动收集参数,并打包一个http请求到服务器,完成表单提交。在这一过程中,浏览器会根据method的不同,将参数编码后,放在urI中(get),或者放在请求的data中(post)。然后发送到服务器。

2.如果没有form,post方式的提交要使用ajax手工完成。get方式的提交需要自己拼接url。

表单其他相关内容可参考 HTML中 表单 的应用实例 一文。

本文部分内容来自网络,如有侵权,请联系修改。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180924A1CL7M00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券