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


相关推荐

  • pytest的assert_assert中文

    pytest的assert_assert中文前言断言是写自动化测试基本最重要的一步,一个用例没有断言,就失去了自动化测试的意义了。什么是断言呢?简单来讲就是实际结果和期望结果去对比,符合预期那就测试pass,不符合预期那就测试failed

    2022年7月31日
    7
  • 红外传感器型号和参数_红外传感器参数

    红外传感器型号和参数_红外传感器参数1、组成:红外线传感器包括光学系统、检测元件和转换电路。2、分类:光学系统按结构不同可分为透射式和反射式两类。检测元件按工作原理可分为热敏检测元件和光电检测元件。热敏元件应用最多的是热敏电阻。热敏电阻受到红外线辐射时温度升高,电阻发生变化,通过转换电路变成电信号输出。光电检测元件常用的是光敏元件,通常由硫化铅、硒化铅、砷化铟、砷化锑、碲镉汞三元合金、锗及硅掺杂等材料制成。(1)红外线传感器依动作可…

    2022年5月25日
    53
  • -2147467259数据库操作错误!

    -2147467259数据库操作错误!没事说搭建个asp的网站,下载了个aspcms源码系统。搭建出现的主要问题是:登录后台的时候提示:-2147467259数据库操作错误!怎么解决?搜索了一下,有些说得是那么个意思,可是我的电脑环境也有些特殊情况。(比如:文件夹属性中没有“安全”选项卡)下面整理下:-21474672

    2022年7月13日
    16
  • socket技术详解(看清socket编程)

    socket技术详解(看清socket编程)socket编程是网络常用的编程,我们通过在网络中创建socket关键字来实现网络间的通信,通过收集大量的资料,通过这一章节,充分的了解socket编程,文章用引用了大量大神的分析,加上自己的理解,做个总结性的文章1:socket大致介绍   socket编程是一门技术,它主要是在网络通信中经常用到   既然是一门技术,由于现在是面向对象的编程,一些计算机行业的大神通过抽象的理念,在现…

    2022年7月13日
    16
  • 用 Python 破解了同学压缩文件的密码

    用 Python 破解了同学压缩文件的密码↑↑↑关注后"星标"简说Python人人都可以简单入门Python、爬虫、数据分析简说Python推荐作者:blank#来源:https://blog.csdn.n…

    2022年5月25日
    40
  • 阿里云Centos7在线安装mysql5.7

    阿里云Centos7在线安装mysql5.7

    2021年8月23日
    77

发表回复

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

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