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中的表单_表格和表单的作用各是什么

 

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • AvalonDock使用心得「建议收藏」

    AvalonDock使用心得「建议收藏」  桌面程序的应用,不可避免的就会用到大量的布局控件,之前的一个项目也想过去做类似于VisualStudio的那种灵活的布局控件,也就是界面上的控件能够实现拖拽放置、隐藏、窗口化等一系列的操作,但由于开发时间以及需求的原因,没有太严格要求这方面功能的实现,也就只能算是想过一下而已,实际用的时候还是固定布局,但是最近接触到新的项目,需要这方面的应用就不得不自己动手查找和做这样的东西了。  有朋…

  • vs中使用openGL

    vs中使用openGL

    2021年11月19日
  • 初识业务架构图_管理架构图

    初识业务架构图_管理架构图文章目录什么是业务架构图?业务架构图规范宏观微观设计步骤分层分模块分功能实例什么是业务架构图?是将用户需求进行宏观系统抽象进行描述和展示,是表达业务层级和关系的工具,目的是将简单的业务逻辑简单化,降低理解难度,这个图是给用户和各级领导看的。业务架构图规范宏观1.宏观:横向:并列结构,级别是相同的;纵向:要有分层的思想,整体上有层次感,上层是依赖于下层的,越底层的,越是基础服务,同时也更为重要;对称:要讲究对称美,尽可能地功能结构分配均匀;虚线框:多个模块,逻辑上可以归为一块时可以使用虚线

    2022年10月11日
  • 大数据Lambda架构详解

    大数据Lambda架构详解Lambda架构是NathanMarz提出的一个实时大数据处理框架。NathanMarz是著名的实时大数据处理框架Storm的作者,Lambda架构就是其根据多年分布式大数据系统的经验总结提炼而成。NathanMarz在BigData:Principlesandbestpracticesofscalablereal-timedatasystems一书中提到了很多实时大数据系统的关键特性,包括容错性,健壮性,低延迟,可扩展,通用性,方便查询等,Lambda就是其根据这些特性设计的一

  • python函数–isalpha()方法[通俗易懂]

    python函数–isalpha()方法[通俗易懂]isalpha()方法描述:Pythonisalpha()方法检测字符串是否只由字母组成。isalpha()方法语法:str.isalpha()参数:无。返回值:如果字符串至少有一个字符并且所有

发表回复

您的电子邮箱地址不会被公开。

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