HTML中的表单_表格和表单的作用各是什么

HTML中的表单_表格和表单的作用各是什么表格表格的基本构成标签table标签:表格标签caption标签:表格标题tr标签:表格中的行th标签:表格的表头td标签:表格单元格表格的基本结构<table>定义表格<caption>表格标题</caption><tr>定义表行<th>定义表头</th></tr><tr&g…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

表格
表格的基本构成标签
table
标签:表格标签
caption标签:表格标题
tr
标签:表格中的行
th
标签
:
表格的表头
td
标签:表格单元格
HTML中的表单_表格和表单的作用各是什么
表格的基本结构
<table>定义表格
           <caption>表格标题</caption>
     <tr>定义表行
           <th>定义表头</th>
    </tr>
    <tr>
           <td>定义单元格</td>
   </tr>
</table>

           table 表示表格  border=”1″ width=”300″ bgcolor=”aqua” cellspacing=”0″(单元格之间的间距)

            tr   表行 bgcolor=”chartreuse” height=”50″

            th   表头(单元格) 加粗 居中   width=”80″    

            td   单元格  colspan=”4″ 在同一行跨多列合并  从哪列开始,添加colspan,给定合并的列数rowspan=”3″ 跨多行合并  从哪个开始添加rowspan  给定合并的数量

 

简历代码示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" cellspacing="0" align="center">
		<caption><font size="20" color="black" ><h3 align="center">个人简历</h3></font></caption>
			 <tr>
				<th width="100" height="40" bgcolor="aqua" align="center">姓名</th>
				<th width="150" height="40"></th>
				<th width="100" height="40" bgcolor="aqua" align="center">性别</th>
				<th width="150" height="40"></th>
				<th width="150" height="40" rowspan="5" >照片</th>
			</tr> 
			<tr>
				<td width="150" height="40" bgcolor="aqua" align="center">出生日期</td>
				<td width="150" height="40"></td>
				<td width="150" height="40" bgcolor="aqua" align="center">籍贯</td> 
				<td width="150" height="40"></td>
				
			</tr>
			<tr>
				<td width="150" height="40" bgcolor="aqua" align="center">政治面貌</td>
				<td width="150" height="40"></td>
				<td width="150" height="40" bgcolor="aqua" align="center">民族</td> 
				<td width="150" height="40"></td>
			
			</tr>
			<tr>
				<td width="150" height="40" bgcolor="aqua" align="center">健康状况</td>
				<td width="150" height="40"></td>
				<td width="150" height="40" bgcolor="aqua" align="center">婚姻状况</td> 
				<td width="150" height="40"></td>
				
			</tr>
			<tr>
				<td width="150" height="40" bgcolor="aqua" align="center">联系电话</td>
				<td width="150" height="40"></td>
				<td width="150" height="40" bgcolor="aqua" align="center">电子邮箱</td> 
				<td width="150" height="40"></td>
			</tr>
			<tr >
				<td width="150" height="40" bgcolor="aqua" align="center">求职意向</td>
				<td width="150" height="40" colspan="4"></td>
			</tr >
			<tr>
				<td width="150" height="400" bgcolor="aqua" align="center">工作经验</td>
				<td width="150" height="400" colspan="4"></td>
			</tr>
			<tr >
				<td width="150" height="50" bgcolor="aqua" align="center">教育经历</td>
				<td width="150" height="50" colspan="4"></td>
			</tr>
			<tr >
				<td width="150" height="50" bgcolor="aqua" align="center">英语水平</td>
				<td width="150" height="50" colspan="4"></td>
			</tr>
			<tr >
				<td width="150" height="50" bgcolor="aqua" align="center">计算机水平</td>
				<td width="150" height="50" colspan="4"></td>
			</tr>
			<tr >
				<td width="150" height="50" bgcolor="aqua" align="center">自我评价</td>
				<td width="150" height="50" colspan="4"></td>
			</tr>
		</table>
	</body>
</html>

执行结果:HTML中的表单_表格和表单的作用各是什么

 HTML中的表单_表格和表单的作用各是什么

 表单

form标签:表单

网页表单中有许多可以输入或选择的组件,用户可以在表单中填写信息,最终
提交表单,把客户端数据提交至服务器。
HTML中的表单_表格和表单的作用各是什么

 表单文本

HTML中的表单_表格和表单的作用各是什么

 表单其它表单

 HTML中的表单_表格和表单的作用各是什么

 表单下拉框

HTML中的表单_表格和表单的作用各是什么

 表单多行文本域

HTML中的表单_表格和表单的作用各是什么

 表单按钮

HTML中的表单_表格和表单的作用各是什么

 内联框架HTML中的表单_表格和表单的作用各是什么

 代码示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		   表单:  拥有许多可以输入,选择组件 ,用户输入信息,最终向服务器提交数据
		     form 表单标签
			    action="访问后端服务器地址"
				methond="向服务器端提交数据的方式 http get/post  "
				
				   input 
				      type="text"  类型 当行文本框
					  name="自定义"
					  value="输入值"
					  placeholder="请输入用户名"  提示
					  readonly="readonly" 只读  可以提交数据
					  disabled="disabled" 禁用  不能提交数据
				  type="password"	  密码框
				  type="radio" 单选框, name值相同为一组,互斥选中一个, 选择性的组件必须给予默认值,  checked="checked"默认选中
				  type="checkbox" 复选框,多选框
				  
				  <select name="province"> name在select标签中添加
				      <option value="101">北京</option>  默认提交的是 选中的option的值
					  
			     多行文本		  
				  <textarea rows="5" cols="30" name="address">aaaaaaa值</textarea>
				  
				  type="submit" 提交按钮,触发表单提交
				  type="reset" 重置表单到默认状态
				  type="button" 普通按钮,用来触发事件
		 -->
		 <form action="" method="">
			 用户名:<input type="text" name="userName"/><br/>
			 密码:  <input type="password" name="userPassword"/><br/>
			 性别:  <input type="radio"  name="gender" value="男" checked="checked"/>男
			        <input type="radio"  name="gender" value="女"/>女<br/>
			课程:   <input type="checkbox" name="course" value="java" />java		
			        <input type="checkbox" name="course" value="c" checked="checked"/>c	
					<input type="checkbox" name="course" value="html" />html	
					<input type="checkbox" name="course" value="css" />css	<br/>
			省份 <select name="province">
				   <option value="101">北京</option>
				   <option value="102">上海</option>
				   <option value="103" selected="selected">陕西</option>
				   <option value="104">四川</option>
			     </select> <br/>
			地址:<textarea rows="5" cols="30" name="address"></textarea>
			 
			 <br/>
			 <input type="submit" />提交按钮
			 <input type="reset" />重置
			 <input type="button" value="普通按钮" onclick="alert()"/>
		 </form>
		
	</body>
</html>

 注:checked=”checked” 给选项中添加该属性代表默认选中

 执行结果:

HTML中的表单_表格和表单的作用各是什么

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/169640.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • linux 查看cpu核数、内存总容量、硬盘总容量

    linux 查看cpu核数、内存总容量、硬盘总容量一 查看 cpu 核数 cat proc cpuinfo grep physicalid sort uniq wc lcat proc cpuinfo grep process sort uniq wc l 二 查看内存总容量 cat proc meminfo 三 查看硬盘总容量 df hl 显示 文件系统容量已用可用已用 挂载点 FilesystemSi

    2025年7月14日
    3
  • JAVA设计模式初探之组合模式

    先看看组合模式的定义吧:“将对象组合成树形结构以表示‘部分-整体’的层次结构。组合模式使得用户对单个对象和组合对象的使用具有一致性。”   就拿剪发办卡的事情来分析一下吧。   首先,一张卡可以在总部,分店,加盟店使用,那么总部可以刷卡,分店也可以刷卡,加盟店也可以刷卡,这个属性结构的店面层级关系就明确啦。   那么,总店刷卡消费与分店刷卡消费是一样的道理,那么总店与分店对会员卡的使用

    2022年3月11日
    34
  • CPLD和FPGA的区别

    CPLD和FPGA的区别下面我们整理一下CPLD和FPGA的主要区别:1)CPLD的逻辑阵列更适合可重复编程的EEPROM或Flash技术来实现。而FPGA显然是利用SRAM技术更合适。2)由于是EEPROM或者Flash工艺决定了CPLD是有一定的擦写次数限制的。而FPGA在实际使用中几乎可以说是无配置次数限制。3)CPLD由于采用的是EEPROM或者Flash工艺所以配置掉电后不丢失,也就不需要外挂配置芯片。而FPGA采用的是SRAM工艺,配置在掉电后就没有了,因此需要一个外部配置芯片。4)CPLD的安

    2022年5月4日
    60
  • idea 2021 mac 激活码(JetBrains全家桶)

    (idea 2021 mac 激活码)2021最新分享一个能用的的激活码出来,希望能帮到需要激活的朋友。目前这个是能用的,但是用的人多了之后也会失效,会不定时更新的,大家持续关注此网站~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html…

    2022年3月21日
    112
  • matlab 自动保存图片_matlab保存图像

    matlab 自动保存图片_matlab保存图像最近在写毕业论文,需要保存一些高分辨率的图片.下面介绍几种MATLAB保存图片的方式.一.直接使用MATLAB的保存按键来保存成各种格式的图片你可以选择保存成各种格式的图片,实际上对于一般的图片要求而言,该方法已经足够了.二.使用saveas函数该函数实际上类似于“另存为”的选项,并且忽略图片的背景大小等等,按照默认的属性存储.一般格式为为saveas(fig,filen…

    2025年11月4日
    3
  • vim编辑页面怎么退出_如何退出Vim编辑器?[通俗易懂]

    vim编辑页面怎么退出_如何退出Vim编辑器?[通俗易懂]皈依舞在输入命令之前,击中ESC钥匙..进入后,按下回归来确认。ESC完成当前命令并将Vim切换到正常模式..如果你按下:,:将出现在底部屏幕上。这证实了您实际上是在输入命令而不是编辑文件。大多数命令都有缩略语,可选部分括在括号中:c[ommand].标记为‘*’的命令仅为Vim(未在Vi中实现)。安全-退出(如果有未保存的更改,则失败)::q[uit]退出电流窗户..如果这是最后一个窗口就退出V…

    2022年5月29日
    42

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号