表格和表单标记

最新推荐文章于 2022-10-17 23:19:30 发布
最新推荐文章于 2022-10-17 23:19:30 发布
阅读量276 收藏 1
点赞数
分类专栏： Java Web 文章标签： css html 网页设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43321732/article/details/112790351
版权

表格标记

在这里插入图片描述

例子：学生考试成绩单

<body>
<table width="318" height="167" border="1" align="center" bgcolor="red>
  <caption>学生考试成绩单</caption>
  <tr>
    <td align="center" valign="middle">姓名</td>
    <td align="center" valign="middle">语文</td>
    <td align="center" valign="middle">数学</td>
    <td align="center" valign="middle">英语</td>
  </tr>
  <tr>
    <td align="center" valign="middle">张三</td>
    <td align="center" valign="middle">89</td>
    <td align="center" valign="middle">92</td>
    <td align="center" valign="middle">87</td>
  </tr>
  <tr>
    <td align="center" valign="middle">李四</td>
    <td align="center" valign="middle">93</td>
    <td align="center" valign="middle">86</td>
    <td align="center" valign="middle">80</td>
  </tr>
  <tr>
    <td align="center" valign="middle">王五</td>
    <td align="center" valign="middle">85</td>
    <td align="center" valign="middle">86</td>
    <td align="center" valign="middle">90</td>
  </tr>
</table>
</body>


<body>
<table width="318" height="167" border="1" align="center" bgcolor="red">
  <caption>学生考试成绩单</caption>
  <tr>
  <th align="center" valign="middle">姓名</th>
  <td align="center" valign="middle">语文</td>
  <td align="center" valign="middle">数学</td>
  <td align="center" valign="middle">英语</td>
  </tr>
  <tr>
  <td align="center" valign="middle">张三</td>
  <td align="center" valign="middle">89</td>
  <td align="center" valign="middle">92</td>
  <td align="center" valign="middle">87</td>
  </tr>
  <tr>
  <td align="center" valign="middle">李四</td>
  <td align="center" valign="middle">93</td>
  <td align="center" valign="middle">86</td>
  <td align="center" valign="middle">80</td>
  </tr>
  <tr>
  <td align="center" valign="middle">王五</td>
  <td align="center" valign="middle">85</td>
  <td align="center" valign="middle">86</td>
  <td align="center" valign="middle">90</td>
  </tr>
</table>
</body>

</html>

注意：以上两段程序效果一样，唯一不同是，第一个程序表头使用单元格标记，第二个程序使用表头标记

colspan 属性：表示横跨几列

表格的他用：

在实际开发中，表格常常用来设计页面。在页面中创建一个表格并设置没有边框，之后通过该表格将页面划分为几个区域，之后分别对几个区域进行设计，这是一种非常方便的设计页面的方式。

表单标记

表单元素，我们常见的就是网站登录页面中的用户名文本框和密码文本框。表单是用户和网页交互信息的重要手段

表单标记

以<form>开头，以</form>结尾，格式如下：
<form action = "url" method = "get"|"post" name = "name" onSubmit = "" target = "">
    
</form>

在这里插入图片描述
在这里插入图片描述

表单输入标记

使用最频繁的表单标记，通过这个标记可以向页面中添加单行文本、多行文本、按钮等

格式：

<input type = "image" disabled = "disables" checked = "checked" width = "digt" height = "digit" 
       maxlength = "digit" readonly = "" size = "digit" src = "uri" usemap = "uri" alt = "" name = "checkbox" value = "checkbox">

属性：

在这里插入图片描述

在这里插入图片描述

type属性：

在这里插入图片描述

原来表单提交用户输入的数据，是根据表单元素的name值来控制表单控件的。那么表单控件里面的id是干嘛的？就是为了区别不同的表单控件，还有一个作用，就是点击表单控件提示信息时也能让表单控件获得焦点的效果，用label提高用户体验，这时的label属性中的for是跟表单控件的id一致的

例子：一个简单的登录界面

<body>
<form action="" method="post" name="myform">
<table width="694" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="28" align="center">用 户 名：</td>
<td colspan="2"><input name="username" type="text" id="UserName4" maxlength="20"></td>
</tr>
<tr>
<td height="28" align="center">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</td>
<td height="28" colspan="2"><input name="pwd1" type="password" id="PWD14" size="20" maxlength="20"></td>
</tr>
<tr>
<td height="28" align="center">确认密码：</td>
<td height="28" colspan="2"><input name="pwd2" type="password" id="PWD25" size="20" maxlength="20"></td>
</tr>
<tr>
<td colspan = "1"></td>
<td class="word_grey">
<input name="Submit" type="submit" id="btn_grey" value="保存">
<input name="Reset" type="reset" id="Reset" value="重新填写">
</td>
</tr>
</table>
</form>
</body>

下拉文本框

格式：

<select name = "name" size = "digit" multiple = "multiple" disabled = "disabled">
    <option>内容</option>
</select>

在这里插入图片描述

多行文本标记

格式：

<textarea cols = "digit" rows = digit name = "name" disabled = "disabled" readonly = "readonly" 
          wrap = "value">
    默认值
</textarea>

在这里插入图片描述

♡-流浪孩
关注
专栏目录
HTML学习笔记--表单标记
yezi33的专栏
05-04 2341
表单是网页上的一个特定区域。这个区域是由一对标记定义的。这一步有几方面的作用。第一方面，限定表单的范围。其它的表单对象，都要插入到表单之中。单击提交按纽时，提交的也是表单范围之内的内容。第二方面，携带表单的相关信息，例如处理表单的脚本程序的位置、提交表单的方法等。 基本语法 ……
表格和表单标签
weixin_46048542的博客
03-23 507
数据表格的创建 快速创建 （1） table>tr>td （2） table>tr>td*2 （3） table>(tr>td*2)*2 等价于 table>tr*2>td*2 table表格的属性 1.宽度width 2.高度height 3.边框border 4.边框颜色bordercolor 5.背景颜色bgcolor 6.水平对齐 align="left或right或center"” 7. cellspacing=" 单元格与单元格
html表单标记是_HTML5表单：标记
culi3118的博客
08-18 404
html表单标记是This is the first in a three-part series about HTML5 web forms. We’ll cover the basic markup in this article before progressing to styling and the client-side JavaScript validation APIs. I re...
html表单的行标记为,HTML表单标记教程(2):
weixin_36326243的博客
06-16 157
HTML表单标记教程(2):互联网 发布时间：2008-10-17 18:57:25 作者：佚名 我要评论本教程介绍FORM表单标记的各种属性在网页设计中的应用.标记的NAME属性基本语法01 02 …… 03 语法解释通过为表单命名可以控制表单与后台程序之间的关系。文件范例：本教程介绍FORM表单标记的各种属性在网页设计中的应用.标记的NAME属性基本语法01 02 …… 03...
HTML 表单标记1
最新发布
qq_60212533的博客
10-17 1109
前言 一、p...表单标记 二、表单输入标记 三、....下拉列表 在登陆页面中网站会提供给用户用户名和密码框，以供访客输入信息。这里的用户名文本框与密码文本框就属于HTML中的表单元素。表单在HTML中起着非常重要的作用，是用户与网页交互信息的重要手段。 一、.....表单标记 表单标记以标记开头，以标记结束。在表单标记中可以定义处理表单数据程序的URL地址等信息。标
HTML表格标记教程(1):制作表格
09-28
1. `<TABLE>`: 这是表格的开始和结束标记，用`<TABLE>`打开表格并用`</TABLE>`关闭。它包含了整个表格的所有内容，包括行（）和单元格（）。 2. `<TR>`: 代表表格行（Table Row）。每个表格由一行或多行组成，`<TR>...
HTML表格标记教程(3):宽度和高度属性WIDTH、HEIGHT
12-01
然而，为了更好地控制表格的布局和视觉效果，我们可以使用`WIDTH`和`HEIGHT`属性来手动设定表格尺寸。这两个属性允许你为表格指定一个固定的像素值或百分比。 `WIDTH`属性用于定义表格的宽度。你可以设置一个具体的...
HTML02表格和表单.ppt
09-15
本文将详细介绍 HTML 表格和表单的基本概念、结构、标记和使用方法。 一、HTML 表格 HTML 表格是由 TABLE 标记定义的，用于组织和展示数据。表格由行和列组成，每个单元格可以包含文本、图片或其他 HTML 元素。 ...
[精选]第8章用CSS设置表格和表单样式.pptx
10-12
CSS 设置表格和表单样式 CSS 是网页设计标准教程中一个非常重要的部分。在第 8 章中，我们将学习如何使用 CSS 设置表格和表单样式。表格是网页上非常常见的元素，在传统的网页设计中，表格除了显示数据外，还常常被...
HTML标记语言——表单
09-28
本节主要讨论了三种不同的方法来标记和布局HTML表单。 方法A涉及使用`<table>`元素来组织表单内容。这种方法传统上很常见，因为它提供了一种直观的方式来排列表单元素，通常将描述性的标签放在左边，输入字段放在...
HTML语言中表单标记,HTML语言剖析(九)表单标记
weixin_28862113的博客
05-30 305
称为表单标记，用以宣告此为表单模式，属于一个容器标记，表示其它表单标记需要在它的包围中才有效，便是其中的一个，用以设定各种输入资料的方法。它 是一个空标记。 的参数设定(常用)：例如： action="http://your.isp.com/cgi-local/example.cgi"表单通常是与 CGI 配合使用的，参数 action 便是用以指明该 CGI 程式的位置，这 样此表单所填的资料才...
什么是＜tr＞ 标签？
sxysoft_csdn的博客
08-22 3281
什么是<tr> 标签？ 什么是<tr> 标签？ <tr> 标签定义 HTML 表格中的行。 tr 元素包含一个或多个 th 或 td 元素 <a href="http://www.xinbiancheng.cn">xinbiancheng.cn</a> > http://xinbiancheng.cn/tags/5f3536295dbb8a6ce1bb9c54.html ...
JAVA Web入门之HTML中表格、表单、下列列表框、多行文本、超链接和图片标记的应用（超详细，附源码）
showswoller的博客
09-26 2317
JAVA Web入门之HTML中表格、表单、下列列表框、多行文本、超链接和图片标记的应用（超详细，附源码）
Java Web（2）HTML与CSS网页开发基础
weixin_43960413的博客
09-01 477
文章目录一、HTML标记语言 一、HTML标记语言 1.文档结构 （1）标记 是HTML文件的开头，无实质性功能，但必不可少。不分大小写 （2）标记 HTML文件的头标记，作用是放置HTML的文件信息，如定义CSS样式的代码 （3）标记<br/> 是标题标记<br/> （4）标记<br/> 是HTML页面的主体标记，页面中所有的内容都定义在标记中。其本身也有控制页面的一些特性，如页面的背景图片与颜色<br/> <strong>2.常用标记</
JavaWeb自学笔记 HTML标记语言
Lxxx_H的博客
08-27 376
创建HTML文件 HTML文件的创建十分简单，你可以使用一些开发软件，甚至可以使用计算机上自带的记事本。 如果你使用记事本编写HTML文件需要注意把后缀名改为HTML或者HTM。我这里使用开发软件IDEA HTML文档结构 HTML文档由4个主要标记组成，这4个标记是<html>，<head>， <title>和<body>这四个标签被称为围堵标...
HTML基本知识点——表单和表单元素标记
风飘向太阳
04-12 7562
表单   表单的作用是从访问您的Web站点的用户那里获取信息，访问者可以使用诸如文本域、列表框、复选框以及单选按钮之类的表单元素输入信息，然后单击某个按钮提交这些信息。 是客户端与服务器端进行信息交流的途径。 l  Form标记用于创建一个表单，定义表单的开始于结束，它是一个容器，用于包含其它表单元素，例如文本框复选框等。表单元素必须放在form中才能起作用。 l  表单元素 l  Po
关于html中表单<form>标记的介绍
糖小喵
03-09 6332
表单在Web网页中用以让访问者输入数据，当提交表单时，表单中输入的数据被打包传递给Web服务器端的程序以处理，从而使得Web服务器与用户之间具有交互功能。 首先我们来说说关于表单的工作机制，浏览器将用户在表单中输入的数据进行打包，并发送给服务器-->服务器接收数据并转由程序处理-->访问一个包含表单的页面，输入数据后，“提交”表单。 在HTML文档中，标记对用来定义表单的开始和结束
html中用于标记表单的标签是什么,HTML表单标签
weixin_36472625的博客
06-20 1167
1 什么是表单？表单就是专门用来收集用户信息的2 什么是表单元素2.1 什么是元素在html 中标签/标记/元素都是指HTML中的标签，例如 a 标签/a标记，a元素表单元素其实还是HTML中的一些标签，只不过这些标签比较特殊，在浏览器中所有的表单标签都有特殊的外观和默认的功能2.2 表单的格式2.3 常见的表单元素input 标签，有一个type属性，这个属性有很多类型的取值，取值的不同就决定了...
HTML5表单标签和表格标签详解
一只文森特
12-09 2391
表单标签和表格标签
HTML表格与表单标记详解
"HTML表格和表单标记-01_HTML_JS" HTML（超文本标记语言）是用于创建网页的标准标记语言，它与HTTP（超文本传输协议）和URL（统一资源定位器）一起构成了互联网的基本组成部分。HTML文档通常包括`<html>`、`<head>`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值