Html表单和表格例子

最新推荐文章于 2024-07-12 11:17:24 发布
最新推荐文章于 2024-07-12 11:17:24 发布
阅读量1w 收藏 64
点赞数 8
分类专栏： 前端 文章标签： html 表单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/boke14122621/article/details/70896504
版权

Html表格和表单制作：
1.关于表格：
每个表格由 table 标签开始。
每个表格行由 tr 标签开始。
每个表格数据由 td 标签开始。
跨行：colspan
跨列：rowspan
2.关于表单：
输入
多数情况下被用到的表单标签是输入标签（input）。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：
文本域（Text Fields）
当用户要在表单中键入字母、数字等内容时，就会用到文本域。
单选按钮（Radio Buttons）
复选框（Checkboxes）
表单的动作属性（Action）和确认按钮：
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

表格：

<<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>web2 表格</title>
</head>
<body>

	<table border="1" width="400" height="100" cellspacing="0" cellpadding="0">
	 <caption align="center"> <h3> ##IT教育——学生档案</h3> <br/> <h5>  档案编号 XSJY-2016 </h5></caption>  <br/>

	<thead>
		<th>培训课程</th>
		<th>前端开发工程师课程</th>
		
	</thead>
    
	<tbody>
		<tr>
			<td text align="center"><b>班号</b></td>
			<td text align="center"><b>	<font color="#f00">	公司填写</font>	</b></td>
			<td rowspan="4"> <b>照片</b></td>
		</tr>

		<tr>
			<td text align="center" rowspan="3"><b>填表时间</b></td>
		</tr>
	</tbody>
		
	</table>

	<table border="1" width="400"  cellspacing="0" cellpadding="0">

	<thead>
		<th>学员姓名</th>
		<th></th>
		<th>性别</th>
		<th></th>
		<th width="50">出生日期</th>
		<th></th>
	</thead>

	<tbody>
	<tr>
	<td rowspan="2"> <b>目前从事职位或上学</b></td>
	<td rowspan="2" width="50">  </td>
	<td rowspan="2"> <b>学历</b></td>
	<td rowspan="2" width="50"></td>
	<td><b>	<font color="#f00">	QQ号码</font>	</b></td>
	<td  width="50"></td>
	</tr>
	
	<tr>
	<td><b>	<font color="#f00">	YY号码</font>	</b></td>
	<td  width="50"></td>
		
	</tr>
	<tr>
	<td><b>手机</b></td>
	<td colspan="5"> </td>

	</tr>
	<tr>
	<td><b>证件名称 </b></td>
	<td><b>	身份证</b></td>
	<td><b>	证件前十四位号码</b></td>

	<td colspan="3"></td>

	</tr>
	<tr>
	<td><b>	目前工作城市 </b></td>
	<td colspan="5"></td>

	</tr>
	<tr>
	<td><b>	毕业院校</b></td>
	<td colspan="5"></td>
	</tr>	
	<tr>
	<td><b>	目前从事岗位</b></td>
	<td colspan="5"></td>
	</tr>
	<tr>
	<td><b>	毕业院校</b></td>
	<td colspan="5"></td>
	</tr>
	<tr>
	<td><b>	你是从那里知道##的</b></td>
	<td colspan="5"></td>
	</tr>
	<tr>
	<td><b>	##哪方面吸引了你</b></td>
	<td colspan="5"></td>
	</tr>

	<tr>
	<td><b>	序号</b></td>
	<td text align="center" colspan="2"><b>	缴费金额</b></td>
	<td><b>	缴费日期 </b></td>
	<td><b>	收款人</b></td>
	<td><b>	咨询老师</b></td>

	</tr>
	
	<tr>
	<td><b>	1</b></td>
	<td colspan="2"></td>
	<td></td>
	<td><b>	<font color="#f00">	公司填写</font>	</b></td>
	<td><b>	<font color="#f00">	公司填写</font>	</b></td>
	</tr>
	</tbody>	




</body>
</html>

浏览器打开如图所示：
这里写图片描述

表单：

<<!DOCTYPE html>
<html lang="en">
<html>
<head>
	 <meta charset="UTF-8">
   
	<title><b>  基本资料</b></title>

</head>
<body>
 <h3>基本资料</h3>
<form action="html5.html" method="get">
性别: <input type="radio" name="sex" value="1">男
    <input type="radio" name="sex" value="0">女
    <br/>

生日:<select name="year" >
                         <option value="0">年</option>
                        <option value="1">1980</option>
                        <option value="2">1981</option>
                        <option value="3">1982</option>
                        <option value="4">1983</option>
                        <option value="5">1984</option>
                        <option value="6">1985</option>
                        <option value="7">1986</option>
                        <option value="8">1987</option>
                        <option value="9">1988</option>
                        <option value="10">1989</option>
                         <option value="11">1990</option>
                        <option value="12">1991</option>
                        <option value="13">1992</option>
                        <option value="14">1993</option>
                        <option value="15">1994</option>
                        <option value="16">1995</option>
                        <option value="17">1996</option>
                        <option value="18">1997</option>
                        <option value="19">1998</option>
                        <option value="20">1999</option>
			</select>
			<select name="month"  >
                        <option value="1">月</option>
                        <option value="2">1</option>
                        <option value="3">2</option>
                        <option value="4">3</option>
                        <option value="5">4</option>
                        <option value="6">5</option>
                        <option value="7">6</option>
                        <option value="8">7</option>
                        <option value="9">8</option>
                        <option value="10">9</option>
                         <option value="11">10</option>
                        <option value="12">11</option>
                        <option value="13">12</option>
               </select>
                <br />
血型:<select name="blood">
                        <option value="1">未知</option>
						<option value="1">A</option>
                        <option value="2">B</option>
                        <option value="3">AB</option>
                        <option value="4">O</option>
                        <option value="5">RH</option>
                  </select>
                <br />
 出生地:<select name="省份" >
                        <option value="0">请选择</option>
                        <option value="1">北京</option>
                        <option value="2">上海</option>
                        <option value="3">广东</option>
                         <option value="4">天津</option>
                        <option value="5">江苏</option>
                        <option value="6">浙江</option>
                         <option value="7">湖南</option>
                        <option value="8">湖北</option>
                        <option value="9">山东</option>
                         <option value="10">陕西</option>
                        <option value="11">山西</option>
                        <option value="12">广西</option>

                        
                    </select>
           <select name="city" >
                         <option value="0">请选择</option>
           				 <option value="1">北京</option>
                        <option value="2">上海</option>
                        <option value="3">广州</option>
                        <option value="4">深圳</option>
                        
           	 </select>

                <br />
 居住地:<select name="city">
                           <option value="0">请选择</option>
                        <option value="1">北京</option>
                        <option value="2">上海</option>
                        <option value="3">广东</option>
                         <option value="4">天津</option>
                        <option value="5">江苏</option>
                        <option value="6">浙江</option>
                         <option value="7">湖南</option>
                        <option value="8">湖北</option>
                        <option value="9">山东</option>
                         <option value="10">陕西</option>
                        <option value="11">山西</option>
                        <option value="12">广西</option>
                        
                    </select>
           <select name="city" placeholder="请选择"required />
                        <option value="0">请选择</option>
           				 <option value="1">北京</option>
                        <option value="2">上海</option>
                        <option value="3">广州</option>
                        <option value="4">深圳</option>
                        
           	 </select>

                <br />

                 个人简介:<textarea name="text" rows="5" cols="30"></textarea>
                <br/>
                <input type="submit" color="#abcdef" value="保存">
               
</body>
</html>

这里写图片描述

幸福诗歌
关注
  • 8
    点赞
  • 踩
  • 64
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML（之表单的）案例
ChengMeng11的博客
03-14 1142
1、表单的基本用法： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h2>用户注册</h2> <f...
HTML+CSS3 表单与表格综合案例
qq_55786319的博客
11-18 1338
表单+表格的简单运用 1.今日份h5课堂作业 效果图： 思路：表格与表单的综合，要做出宽高不一的单元格，但由于表格的自适应性，所以我用了几个表格来装文字。再就是几个简单的表单控件。 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>青年自组织状况调查问卷</title> <style> .head{ text-
HTML表格（table）实例
热门推荐
hj1993的博客
07-30 5万+
HTML表格（table）实例 实例1：课程表 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;课程
【HTML入门】第十课 - 表格，也就是table标签
最新发布
xingyu_qie的专栏
07-12 717
这一小节，我们说一下HTML中的表格。比如我们常常看见的学生成绩单，比如excel一个单元格一个单元格的，这些都是表格。表格的标签名是。
简单HTML表单实例
编程代码，数据学习开发的日常总结。欢迎关注VX公众号：张飞的猪
12-22 688
表单实例 username: password:
html实例，实现表单
aigo_2021的博客
03-29 6926
1.使用HTML完成下列功能 <!doctype html> <html> <head> <!-- <meta charset="GBK">--> </head> <body> <table width="60%" border="3" align="center" bgcolor="#F0F8FF" borderColor="blue"> <tr> &l.
HTML表格表单案例
weixin_45969078的博客
11-02 1622
1、表格案例 要求： 按照如下形式创建员工入职登记表，要求 （1）性别（男 女）、婚姻状况（已婚，未婚）、政治面貌（党员，团员）、血型（A,B ,AB）用单选按钮 （2）民族使用下拉列表(汉，苗，回) （3）使用表单提交数据 ； （4）照片使用文件上传 代码 <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/
HTML表单和表格
m0_58857666的博客
06-02 773
表单 定义和用法 <form> 标签用于为用户输入创建 HTML 表单。 表单能够包含input 元素，比如文本字段、复选框、单选框、提交按钮等等。 表单还可以包含menus、textarea、fieldset、legend和label 元素。 表单用于向服务器传输数据。 ...
HTML表格标记教程(3):宽度和高度属性WIDTH、HEIGHT
12-01
在HTML中，表格是一种用于组织数据的基本元素，它允许我们将数据排列成行列，方便阅读和理解。本教程将深入讲解如何使用HTML中的`<TABLE>`标签的`WIDTH`和`HEIGHT`属性来设置表格的宽度和高度。 首先，我们要了解...
html 表格表单
m4587的博客
07-15 1182
inputtype="checkbox"name="hobby"value="zq"/>足球篮球羽毛球。乒乓球。
HTML 表格标签、列表标签、表单标签（案例： 注册页面）
酷爱前端的小陈博客
04-16 2294
1. 表格标签 表格是实际开发中非常常用的标签: 1. 表格的主要作用 2.表格的基本语法 1.1 表格的主要作用 表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。 总结: 表格不是用来布局页面的,而是用来展示数据的。 1.2 表格的基本语法 1. <table> </table> 是用于定义表格的标签。 2. &...
html实现简单ListViews效果的实例代码
11-21
html实现简单ListViews效果 实现效果： css样式文件listviewTest.css body{ background: whitesmoke; } #mainContentDiv{ position: absolute; width : 70%; height :100%; background: whitesmoke; top: 10%; left: 10%; } .mainDivMainImgDiv{ position: absolute; width : 100%; height : 50
HTML表单效果图,html-图片/表格/表单
weixin_39955351的博客
06-03 606
a标签的认识’#‘号跳转页面内锚点跳转外部网页跳转内部网页a标签的伪协议这样做点击a标签不会刷新页面也不会跳转到开头，页面中存在input且里面有内容时会点击会刷新页面，href内为#瞄点点击会自动跳转页面开头，只有伪协议能达到点击后无效果状态(需求：点击按钮查看元素不刷新页面不跳转)发邮件手机端适用联系我们 点击调用电话功能img的认识img是一个单标签 我们一般在网页使用它来显示图片，请求图片...
HTML学习笔记二--表单及表格的结合使用个人简历制作
qq_45231291的博客
06-02 1892
一、表格 表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 ...
html综合表单例子
行善之人必有余庆
05-25 2166
提交表单 输入姓名: 选择你最喜欢的颜色: 红 绿 蓝 黄 请问你性别: 男 女 喜欢的事情: 看书 上网 睡觉 我要留言:
html表单实现小案例
异想实验室|Arduion|ESP8266|Micro Python|
02-22 168
html表单实现方法
【实用】HTML的简单示例（表单篇）
Mankey_24的博客
10-09 6119
效果如下： 代码内容： <html> <head> <title>增加管理员</title> <meta charset="utf-8"> </head> <body> <form action="" method="GET"> <table> <thead>&
Html的表单
wenqi1的博客
08-21 3万+
一、表单基础内容： 表单一般使用form标签包裹，每一个表单选项都用input表示 text表示明文文本框， password表示暗文文本框， radio表示单选， checkbox表示复选框， check = "chcked"表示默认选择，应用于单选和复选 button表示按钮，value表示按钮的名字 reset表示重置按钮 image表示图片 submit表示提交，value表示提交键的名字 date表示日期 email表示邮箱 number表示数字 &nbsp;表
HTML学习 —常用表单及简单实例
weixin_67614925的博客
05-06 1845
文章目录常用表单介绍简单实例 常用表单介绍 show code： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initi
html表单和表格的嵌套ui
09-07
HTML表单和表格可以通过嵌套来创建复杂的UI界面。以下是一些示例： 1. 嵌套表单和表格 ``` <td>Name: <td><input type="text" name="name"> <td>Email: <td><input type="email" name="email"> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值