HTML表格和HTML表单

HTML 表格

表格由 <table> 标签来定义
每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)
字母 td 指表格数据(table data),即数据单元格的内容。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

在这里插入图片描述

(1)表单标记
<table>...</table>标记表示表格

width属性用来设置表格的宽度
border属性用来设置表格的边框
align属性用来设置表格的对齐方式
bgcolor属性用来设置表格的背景

(2)标题标记

标题标记以<caption>开头,以</caption>结束,标题标记也有一些属性,比如 align,valign

(3)表头标记

<th>开始,以</th>结束

(4)表格行标记

表格行标记以<tr>开头,</tr>结束,一组<tr>标记表示表格中的一行。<tr>标签要嵌套在<table>标签中使用

(5)列标记

<td> 开始,</td>结束。一个<tr>标记可以嵌套若干个<td>标记。该标记也具有align,background,valign等属性

举例:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>标题标记</title>
</head><body>
<table width="318" height="167" border="1" align="center"><caption>学生考试成绩单</caption><tr>
<td width="center" valign="middle"> 姓名</td>
<td width="center" valign="middle">语文</td>
<td width="center" valign="middle">数学</td>
<td width="center" valign="middle">英语</td>
</tr>
</body></html>

在这里插入图片描述

HTML表单

表单是一个包含表单元素的区域
表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

<!--表单使用表单标签 <form> 来设置: -->
<form>
.
input 元素
.
</form>

(1)action属性
该属性用来指定处理表单数据程序的URL地址。

(2)method 属性
该属性用来指定数据传送到服务器的方式。它有两种属性值,分别是get与post。get属性值表示将输入的数据追加在action指定的地址后面,并传送到服务器。当属性值为post时,会将输入的数据

(3)name属性
该属性指定表单的名称,其值程序员可以自定义。

(4)OnSubmit属性
该属性用于指定当用户单击提交按钮时触发事件。

(5)target属性
该属性指定输入数据结果显示在哪个窗口中,其属性值可以设置为_blank,_self, _parent,_top。

(1)_blank表示在新窗口中打开目标文件
(2)_self表示同一个窗口中打开(该项一般不用设置)
(3)_parent表示在上一级窗口打开,一般使用框架页时经常使用。
(4)_top 表示在浏览器的整个窗口中打开,忽略任何框架。

HTML 表单 - 输入元素

多数情况下被用到的表单标签是输入标签,< input>。
输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:

文本域(Text Fields)
文本域通过 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

浏览器显示如下:
在这里插入图片描述
注意:表单本身并不可见。同时,在大多数浏览器中,文本域的默认宽度是 20 个字符。
注意:
Type属性是< input>标记中非常重要的内容,决定了输入数据的类型。
在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>博客</title>
</head>
<body>
<form action="" method="post" name="myform">用户名:<input name="username" type="text" id="UesrName4" maxlength="20"><br>密码:<input name="pwd1"  type="password" id="PWD14" size="20" maxlength="20"><br>确认密码:<input name="pwd2" type="password" id="PWD25" size="20" maxlength="20"><br>性别:<input name="sex" type="radio"class="noborder"value="男" checked>男&nbsp;<input name="sex" type="radio" class="noborder" value=""><br>爱好:<input name="like" type="checkbox" id="like" value="体育">体育<input name="like" type="checkbox" id="like" value="旅游">旅游<input name="like" type="checkbox" id="like" value="听音乐">听音乐<input name="like" type="checkbox" id="like" value="看书">看书<br>E-mail:<input name="email" type="text" id="PWD224" size="50"><br><input name="Submit" type="submit" class="btn_grey" value="确定保存"><input name="Reset" type="reset" class="btn_grey" value="重新填写"></form>
</body>
</html>

<select>...</select>下拉列表框标记
使用<option>标记向列表中添加内容。<select>标记的语法格式如下:

<select name="name" size="digit" multiple="multiple" disabled="disabled"></select>
name          用于指定列表框的名称
size          用于指定列表框中显示的选项数量,超出该数量的选项可以通过拖动滚动条查看
disabled      用于指定当前列表框不可使用(变成灰色)
multiple      用于让多行列表框支持多选

多行文本标记
标签定义多行的文本输入控件
文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体。通常情况下,标记出在标记的标记内容中。

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

Wrap属性可选值
Hard 默认值,表示自动换行
Soft 自动换行
Off 不自动换行

举例:

<body>
<form name="form1" method="post" action=""><textarea name="content" cols="30" rows="5"   wrap="hard">默认值
</textarea>
</body>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/530983.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

解决虚拟机没有ens33网卡的问题

话不多说&#xff0c;直接操作 解决办法 1.在终端中输入: sudo vim /etc/network/interfaces进入interfaces文件后&#xff0c;然后输入以下代码&#xff0c;然后保存退出 auto ens33 iface ens33 inet dhcp 2.重启虚拟机 输入ifconfig命令&#xff0c;成功启动ens33网卡

HDFS上传文件命令报错org.apache.hadoop.ipc.RemoteException(java.io.IOException)

作为作者&#xff0c;强烈不建议进行格式化hadoop&#xff0c;毕竟开发数据是最为重要的&#xff01; Hadoop 3.1 hdfs dfs -put /源文件路径 /目的文件路径解决方案 第一步&#xff1a;停止主节点&#xff08;Master&#xff09;和子节点服务&#xff08;Slave&#xff09; …

图(Graph)的学习

文章目录图的认识图的概念无向图有向图简单图完全图子图连通、连通图、连通分量边的权和网加权图邻接和关联路径简单路径、简单回路环顶点的度、入度和出度割点&#xff08;关节点&#xff09;桥(割边)距离有向树图的表示邻接列表邻接矩阵图的遍历深度优先遍历广度优先遍历生成…

并查集(Disjiont Set)

并查集 并查集的最大作用是检测一个图上面存不存在环。 无向图&#xff0c;六个顶点 显然 1-2-4-3连成一个环 #include<stdio.h> #include<stdlib.h>#define VERTICES 6void initialise(int parent[]){int i;for(i0;i<VERTICES;i){parent[i]-1; }}int find_…

采用Kruskal算法生成最小生成树,并采用并查集的合并优化和查询优化。

文章目录最小生成树1.什么是图的最小生成树&#xff08;MST&#xff09;?2.最小生成树用来解决什么问题&#xff1f;Kruskal&#xff08;克鲁斯卡尔&#xff09;算法算法描述图解最小生成树 1.什么是图的最小生成树&#xff08;MST&#xff09;? 用N-1条边连接N个点&#x…

Java连接Mysql数据库(JDBC)

文章目录导入包con、stmt、rs 三者存在一定的关系getInt和getStringinput.nextInt();简单使用讲解ResultSet和StatementPreparedStatement的用法JDBC连接代码更多样例导入包 import java.sql.Connection; import java.sql.DriverManager; import java.sql.statement; import j…

Linux编程考前测试题

文章目录选择题多选题判断题填空题简答题编程题选择题 1:当打开vi文本编辑器编辑文件时&#xff0c;vi处于&#xff08;A&#xff09;模式 A: 命令模式 B: 编辑模式 C: 实模式 D: 虚模式 2:下列有关fork&#xff08;&#xff09;函数返回值说法错误的是&#xff08;D&#xf…

MySQL考试复习(知识点、练习题)

文章目录数据库的管理技术的三个阶段发展的三个阶段数据库的锁数据库设计的基本步骤事务的四大特性什么是视图如果关系模式设计不好&#xff0c;可能带来哪几个问题数据库管理系统的主要功能有哪些数据库系统中的常见故障有哪些简述SQL语言的组成说明关系模型有哪三类完整性规则…

Oracle复习(知识点、练习题、实验)

文章目录第一章 数据库概念数据库的三级模式结构&#xff1a;模式、外模式、内模式三级模式之间的映射第二章 Oracle12g体系结构Oracle的逻辑存储结构Oracle物理存储结构Oracle11g服务器结构系统全局区&#xff08;SGA&#xff09;程序全局区&#xff08;PGA&#xff09;第三章…

Openstack面试题和知识点总结

文章目录知识点云计算起源定义特点分类服务类型平台分类应用虚拟化虚拟化技术定义分类云计算和虚拟化的关系虚拟化的优点OpenStack简介核心架构Openstack组件共享服务组件核心组件组件详解RabbitMQ概念特点rabbitmq中的概念工作原理常用操作MemcachedKeystoneGlance工作原理Nov…

auto.js 实现信息发送、QQ点赞、微信点赞、健康日报签到

文章目录auto.js开发文档安装total control在手机端安装auto.js apk安装vscode短信多条发送QQ点赞微信点赞健康日报填写叠猫猫auto.js开发文档 点击学习 安装total control total control 用于手机投屏在电脑屏幕上 在手机端安装auto.js apk 链接&#xff1a;https://pan.…

MapReduce综合学习含Wordcount案例

文章目录MapReduce简介MapTaskReduceTaskMapper阶段解读Reducer阶段解读MapReduce适用的问题MapReduce的特点MapReduce基本思想大数据处理思想&#xff1a;分而治之构建抽象模型&#xff1a;Map 函数和 Reduce 函数上升到架构&#xff1a;并行自动化并隐藏底层细节MapReduce计算…

基于Spring boot+Vue的在线考试系统

文章目录spring boot 分层图解安装idea配置阿里云镜像项目启动前端项目结构项目前端中index.htmlApp.vuemain.jsrouter整个页面渲染过程关于矢量图图标的使用引入JQuery依赖github-markdown-css样式文件-一般用作文章正文的样式美化spring boot 分层图解 安装idea 安装参考 id…

Java基础总结之(面试)

文章目录Java标识符Java修饰符访问权限修饰符访问控制和继承非访问权限修饰符局部变量修饰符接口接口中方法修饰符运算符算术运算符一元运算符二元运算符算术赋值运算符赋值运算符逻辑运算符&#xff08;&&、||和!&#xff09;关系运算符自增和自减运算符&#xff08;和…

Javaweb练手项目

文章目录学生管理系统音乐网站锋芒博客中医药管理系统博客天梯CMS系统锋芒社团官网学生管理系统 实现技术&#xff1a;ServletMVC&#xff08;模式&#xff09;Filter(过滤器&#xff09;html 主要功能&#xff1a;学生信息的增删查改&#xff0c;文件&#xff08;图片&#x…

Spark之scala学习(基础篇)待更新

文章目录引言大数据介绍大数据与云计算区别大数据和人工智能的区别大数据和传统的分析&#xff08;excel&#xff09;的区别scala的特性面向对象特性函数式编程函数式编程的特点&#xff1a;函数式编程的优势静态类型扩展性并发性为什么要学scalascala安装简单测试了解ScalaSca…

Jupyter Notebook的安装及问题解决方案

文章目录下载并安装Anaconda3更改主界面路径但是如果没有jupyter_notebook_config.py文件怎么办&#xff1f;如果更改过路径后&#xff0c;不生效怎么办&#xff1f;使用参考pycharm导入pyspark下载并安装Anaconda3 官网下载个人版 Anaconda3安装参考 点击&#xff0c;然后进…

airodump-ng wlan0mon扫描不到网络_MySQL ProxySql 由于漏洞扫描导致的 PROXYSQL CPU 超高...

ProxySQL 本身是一款非常棒的MYSQL 中间件的开源产品, 在公司运行了一段时间后,突然一天报警,所在机器的CPU 出奇的高,之前在测试系统, 预生产, 以及生产系统均没有出现问题. 开始未来紧急解决问题,重新启动了proxysql服务,并查看错误日志.PROXYSQL 的系统版本的2.012 MYSQL 的…

4个空格和一个tab有什么区别_火花塞为什么一换就是4个?只换一个不行吗?

火花塞不是一个经常被提及的配件&#xff0c;但如果火花塞老化&#xff0c;车辆的整体性能将受到影响&#xff0c;更换火花塞其实也是日常保养的一部分&#xff0c;就像换机油和三滤一样。不知道大家是否注意到&#xff0c;在做完保养之后&#xff0c;维修师傅会帮你检查一下火…