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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • matlab理想低通滤波器代码_matlab简单低通滤波器

    matlab理想低通滤波器代码_matlab简单低通滤波器低通滤波器的设计设计低通滤波器的要求:设低通滤波器通带截止频率为ωp=0.2π,阻带截止频率为ωs=0.4π,通带波纹Ag=0.5dB,最小阻带衰减Ar=50dB。wp=0.2*pi;wr=0.4*pi;trwidth=wr-wp;%过渡带宽度N=ceil(6.64*pi/trwidth)+1;%滤波器的长度n=0:1:N-1;wc=(wr+wp)/2;hd=ideal_lp(wc,N);w_…

    2025年8月11日
    4
  • floyed详解[通俗易懂]

    floyed详解[通俗易懂]显然Floyed算法是一个简短而好理解的算法,这里指的好理解是因为Floyed的代码长度不大,实在没理解都可以背下来,所以说是好理解,实际上是真的好理解吗?我们来看看最基础的FloyedFloyed是什么?自然是用来求多源最短路的啦,时间效率是O(n^3),有人会问那我不对每个点做一遍SPFA或dijkstra堆优化,时间效率是O(n^2logn)那不是快很多?实际上因为Floyed

    2022年6月16日
    24
  • 解决Ubuntu18.04版本高分辨率下导致字体过小问题

    解决Ubuntu18.04版本高分辨率下导致字体过小问题我所使用的是小米笔记本,显示屏是3.2K的分辨率。由于分辨率太高了,然后在ubuntu18.04的版本下显示的字体很小,小到都看不清了那种。于是查找了调整18.04版本字体大小的方法如下:安装gnome-tweaks工具sudoapt-getinstallgnome-tweaks安装完之后,直接在终端输入gnome-tweaks即可运行该工具。然后调整缩放比例,因为我的电脑分辨率是3.2K,所以我调整的缩放比例是2倍刚刚好,如下图:调整完之后,直接关闭该工具。再次回到ubunt

    2022年7月21日
    29
  • 伽马校正_预估校正算法

    伽马校正_预估校正算法自动伽马校正(AutoGammaCorrection)算法目录文章目录自动伽马校正(AutoGammaCorrection)算法目录理论代码实现参考资料理论在对图像进行处理过程中,查找到一篇对图像进行自动gamma校正的论文,论文名称及链接见参考文献1.文章的核心描述如下:Averageofbrightnessissimpleelementthatcanbecomputedintheleastamountoftime.Basicapproachin

    2022年9月1日
    6
  • Javadoc 使用详解

    Javadoc 使用详解一:简介Javadoc用于描述类或者方法的作用。Javadoc可以写在类上面和方法上面。https://docs.oracle.com/javase/7/docs/technotes/tools/windows/javadoc.html二:写在类上面的Javadoc写在类上的文档标注一般分为三段:第一段:概要描述,通常用一句或者一段话简要描述该类的作用,以英文句号作为结束第…

    2025年12月8日
    3
  • windows浏览器访问虚拟机开的rabbitmq服务,无法访问

    windows浏览器访问虚拟机开的rabbitmq服务,无法访问

    2021年7月18日
    72

发表回复

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

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