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)
blank

相关推荐

  • 编程中的卫语句

    什么是卫语句在《阿里巴巴Java开发手册》中提到,多层条件语句建议使用卫语句、策略模式、状态模式等方式重构。那么,什么是卫语句呢?在中文维基百科中是这样介绍的在计算机程序设计中,卫(guard)是布尔表达式,其结果必须为真,程序才能执行下去。卫语句(guardcode或guardclause)用于检查先决条件。卫语句的用途,例如:引用(reference)使用前检查是否为空引用;处置模式使用一个布尔域,使得释放资源操作成为幂等运算,即多次释放资源等效于只释放一次。卫语句可用于子进程的提前

  • Angular和Vue.js 深度对比

    Angular和Vue.js 深度对比每天学习一点点编程PDF电子书、视频教程免费下载:http://www.shitanlife.com/code

  • AJAX读音_ajax怎么发音

    AJAX读音_ajax怎么发音AJAX的国际音标是:[ˈeɪdʒæks],读音是"eizhaikes"AJAX全称"AsynchronousJavaScriptandXML”(异

  • 基于ie内核,浏览器自带flash插件「建议收藏」

    e内核自带flash方案要比webkit复杂Ie的flash插件是个ocx,也是com组件。WindowsCom组件的加载过程如下:1、通过组件的DllRegisterServer注册com组件,会在注册表生成com组件的路径,guid,progid,threadtype等等2、Client通过guid查找到注册表中com组件的地址,loadlibrary加载这个组件,调用c

  • Linux如何添加路由_linux添加永久路由命令

    Linux如何添加路由_linux添加永久路由命令Linux如何添加路由a.如何使用命令给Linux添加一个默认网关?缺省网关路由:默认网关就是数据包不匹配任何的路由规则,最后流经的地址关口!网关按字面意思就是网络的关口,就相当于我们办公室的大门一样,大家上班就要经过办公室的门一样。使用route-n查看网关信息,或者netstat-rn查看路由[root@machine1~]#route-nKernel

  • 大数运算C语言实现

    大数运算C语言实现大数乘法利用字符数组进行大数乘法的位运算#include<stdio.h>#include<math.h>#include<string.h>voidprint_cheng(chars1[],chars2[]);voidmain(){chars1[1000],s2[1000];while(scanf(“%s%s”,s1,s2))pr…

发表回复

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

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