HTML表格表单

最新推荐文章于 2019-08-04 18:12:05 发布
最新推荐文章于 2019-08-04 18:12:05 发布
阅读量403 收藏 2
点赞数
分类专栏： JSP 文章标签： 表单 表格 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/NextLove_1015/article/details/52650070
版权

表格：

曾经是网页中最常使用的排版方法，但是由于div+css的排版布局方式出现了以后，表格现在更多的用来显示各种数据。

<table>
<span style="white-space:pre">	</span><tr>
<span style="white-space:pre">		</span><td>这是第1行第1列</td>
<pre name="code" class="html"><span style="white-space:pre">		</span><td>这是第1行第2列</td>
<span style="white-space:pre">		</span><td>这是第1行第3列</td>
</tr> 
 

<pre name="code" class="html"><span style="white-space:pre">	</span><tr>
<span style="white-space:pre">		</span><td>这是第2行第1列</td>
 

<pre name="code" class="html"><span style="white-space:pre">		</span><td>这是第2行第2列</td>
 

<span style="white-space:pre">		</span><td>这是第2行第3列</td>
 
  </tr 

 </table> 

   

 

大概结构就像上面一样。
 

另外 <th></th>是一种特殊的单元格，表示该单元格为标题，也就是俗称的表头。
 


 
 

相关属性：
 

border：
 

colspan：column 合并，表示可以横跨几个单元格
 

rowspan：row合并，表示可以竖跨几个单元格
 

 

<table border="1" cellpadding="0" cellspacing="0" width="500">
			<tr>
				<th></th>
				<th>Monday</th>
				<th>Tuesday</th>
				<th>Wednesday</th>
				<th>Thursday</th>
				<th>Friday</th>
			</tr>
			
				
			<tr>
				<td rowspan="2">上午</td>
				<td>306</td>
				<td>306</td>
				<td>306</td>
				<td>306</td>
				<td>306</td>
			</tr>
				
			<tr>
				<td>306</td>
				<td>306</td>
				<td>306</td>
				<td>306</td>
				<td>306</td>
			</tr>
			<tr>
				<td rowspan="2">下午</td>
				<td>306</td>
				<td>306</td>
				<td>306</td>
				<td>306</td>
				<td>306</td>
			</tr>
				
			<tr>
				<td>306</td>
				<td>306</td>
				<td>306</td>
				<td>306</td>
				<td>306</td>
			</tr>
		</table>
 关于表格的空间属性： 

 

border 就是边框
 

紧贴着边框的就是cellspacing，单元格间隔
 

然后就是cellpadding，单元格填充
 

最后才是我们表格里面的内容。
 

表格里面可以放别的元素
 


 
 


 
 

表单：
 

表单是网页中提供的一种交互式操作手段，在网页中使用十分的广泛。无论是搜索比如百度，谷歌，还是注册，都需要表单。
 

用户可以用表单提交信息与服务器进行动态的交流。
 

表单可以分为两部分：1 HTML源代码描述的表单，可以说是表面上的表单。2 提交后的表单处理，需要调用服务器编写好的JSP等代码对客户端提交的信息做出回应。我们在这里先只说1里面的表单。
 

<form name="" method="" action="" enctype="">
 

表单项
 

</form>
 

name 表单名称，method可以选择post还是get action用来指定接纳表单数据的JSP页面或者Servlet，如果空则提交给当前页面，enctype 传送数据的编码方式，默认是application/x-ur=encode 。
 

说到表单，不得不说表单常用的项。
 

 
 
<input type="text">单行文本框 size可以指定控件的宽度，以字符为单位。maxlength：可以接受的最大字符数 value可以显示预设内容。
 
 
<input type="password">密码文本框 属性同上
 
 
<input type="submit"> 提交按钮 将表单里面的内容提交到action里面所填写的地址，几乎都有value
 
 
<input type="reset">重置按钮 重置客户填写的信息
 
 
<input type="button"> 普通按钮
 
 
<input type="hidden"> 隐藏元素 多用于提交表单时想服务器传递一些不需要用户设定但程序必须需要的参数值
 
 
<input type="radio">单选按钮 checked属性指定是否被选中
 
 
<input type="checkbox">复选框 属性同上，还有个name，同组的name相同
 
 
<input type="image"> 图片提交  alt可以表示替代文本。src是图片路径，作用和按钮提交差不多
 
 
<input type="file">文件域 用来文件上传操作
 
 
<select>
 
 
<option value=""></option>
 
 
</select>列表框 size设定下路列表显示选项的个数，multiple，设定此下拉列表可多选，如果是单选则忽略
 
 
<textarea></textarea>多行文本框 用来输入较多的文字信息，其中有rows 和cols 分表显示行和列
 

 

下面举个例子
 

 

<html>
	<head>
		<meta = http-equiv = "Content-Type" content=baiduinter/html;charset=utf-8 />
		<title>百度用户注册</title>
	</head>
		
	<body>
		
		<table Align="center" width="800px" border="0" cellpadding="0" cellspacing="10">
			<form>
			
			<tr>
				<td width=50px><img src="./表格作业/web.png" width=120px ></td>
				<td bgcolor="#ADD8E6" Align="center" colspan=2 >1.用户注册</td>
				
				
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td align="right">
					填写用户信息
				</td>
			</tr>
			<tr>
				<td width="50px">
					用户名：<align="right">
				</td>
				<td>
					<input type = "text" maxlength="14" />
				</td>
				<td align=left>
					<font size="2" color="#DCDCDC">不超过7个汉字，或者14字节（数字、字母、下划线）</font>
				</td>
				
			</tr>
			<tr>
				<td> 
					密码：    
				</td>
				<td>
					<input type = "password" maxlength="14">
				</td>
				<td align=left>
					<font size="2" color="#DCDCDC"  >最少6个字符，不超过14个字符（数字、字母、下划线）</font>
				</td>
			</tr>
			<tr>
				<td> 
					确认密码：    
				</td>
				<td>
					<input type = "password" maxlength="14">
				</td>
			</tr>
			
			<tr>
				<td> 
					性别：
				</td>
				<td>
					<input type=radio name="gender">男   <input type=radio name="gender" checked="checked">女
				</td>
			</tr>
			
			<tr>
				<td> 
					个人爱好：
				</td>
				<td>
					<input type=radio name="habits">文学   
					<input type=radio name="habits" >影视 
					<input type=radio name="habits" >音乐 
					<input type=radio name="habits" >体育 
				</td>
			</tr>
			
			<tr>
				<td>
					出生日期：
				</td>
				<td>
					<select name="birthdayyear" size="1">
						<option value="">1990</option>
						<option value="">1991</option>
						<option value="">1992</option>
						<option value="">1993</option>
						<option value="">1994</option>
						<option value="" selected="selected">1995</option>
						<option value="">1996</option>
						<option value="">1997</option>
						<option value="">1998</option>
						<option value="">1999</option>
					
					</select>年  
					<select name="birthdaymonth" size="1">
						<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="" selected="selected">10</option>
						<option value="">11</option>
						<option value="">12</option>
					
					</select>月  
					
					<select name="birthdayday" size="1">
						<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>
						<option value="">13</option>
						<option value="">14</option>
						<option value="" selected="selected" >15</option>
						<option value="">16</option>
						<option value="">17</option>
						<option value="">18</option>
						<option value="">19</option>
						<option value="">20</option>
						<option value="">21</option>
						<option value="">22</option>
						<option value="">23</option>
						<option value="">24</option>
						<option value="">25</option>
						<option value="">26</option>
						<option value="">27</option>
						<option value="">28</option>
						<option value="">29</option>
						<option value="">30</option>
						<option value="">31</option>
					
					</select>日  
				</td>
			</tr>
			
			<tr>
				<td>
				家庭住址：
				</td>
				<td>
					<input type = "text" maxlength="30" size="40" />
				</td>
				
				<td align=left>
					<font size="2" color="#DCDCDC">请输入详细的家庭地址，接收活动邮件。<font>
				</td>
			</tr>
			<tr>
				<td>
					电子邮件：
				</td>
				<td>
					<input type = "text" maxlength="30"  />
				</td>
				
				<td align=left>
					<font size="2" color="#DCDCDC">请输入有效的邮件地址，当密码遗失时凭此领取。<font>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<input type="checkbox" >同时激活百度空间，展现精彩的自我
				</td>
				
			</tr>
			
			<tr>
				<td>
					<input type="button" value="同意以下协议并提交">
				</td>
				<td>
					<input type="reset" value="重置">
				</td>
				
			</tr>
			
			<tr>
				<td colspan="3">
				<textarea name="agree" cols="90" rows="10">一、总则
				
1.1	啊啊啊啊啊啊				 					
1.2 呵呵呵呵
1.3 哈哈哈哈哈哈
					
				</textarea>
				</td>
				
			</tr>
			
			</form>
		</table>
		
	</body>

</html>
这是一个百度注册页面的页面例子。 

 

 

在这之后，HTML5新增了一些表单项：
 

 
 
<input type="color">颜色选择器
 
 
<input type="date">日期选择器
 
 
<input type="datetime">日期时间选择器
 
 
<input type="month">月份选择器
 
 
<input type="time">时间选择器
 
 
<input type="week">周选择器
 
 
<input type="email">邮件输入框
 
 
<input type="number">数字输入框
 
 
<input type="range">数字滑动条
 
 
<input type="search">搜索输入框
 
 
<input type="tel">电话号码输入框
 
 
<input type="url">输入url的文本框
 

 

 

 


 
 最后我们来说 
一些 
 < 
input/> 标签常用的属性： 

 
 
antofocus:<input autofocus ="autofocus"/>表单项在页面加载后自动的获取焦点
 
 
multiple：<input multiple="multiple"/>设置输入框可以同时选中多个输入值
 
 
placeholder:<input placeholder="提示文本"/>可以在输入域内给浏览器显示一段提示语句，当输入域获得焦点时，这种提示会消失。常用语text url telephone search email password
 
 
required:<input required="required" />规定其所在的输入域在提交前不能为空，否则不能提交
 
 
pattern:适用于以下类型的标签：text，telephone，url，search，email，password。相当于给input加上一个验证模式，这个pattern是一个正则表达式。
 
 

 
 

 

可以自己多试试，以上的表单一般都是跟着form来实现的，但是也可以作为单个元素使用。
 


 
 


 
 


 
 


 
 


 
 


 
 


 
 


 
 


 

                

        

        

    

  


    

      

        

            

              
                
                  NextLove_1015
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
html表格表单.pptx

				
			

			

				

					11-20
				

			

		

		

			
				
介绍html表格表单元素，这也是前端比较重要的内容。学了之后你可以用标签简单做一个课程表。还有调查问卷等等

			
		

	



                

              
                



	

		

			

				
					
HTML-input文本框（添加提示文字，填写内容时消失）

					
热门推荐

				
			

			

				

					Bule_daze的博客
				

				

					01-26
					
					11万+
					
				

			

		

		

			
				
input文本框内添加提示文字，填写内容时消失：

用placeholder属性作为提示语




<input placeholder="提示语..."></input>  





			
		

	



                


  
              

                


	

		

			

				
					
HTML中Table表格的使用与漂亮的表格模板

				
			

			

				

					pan_junbiao的博客
				

				

					08-04
					
					7万+
					
				

			

		

		

			
				
1、表格标记

表格是网页中十分重要的组成元素。表格用来存储数据，包含标题、表头、行和单元格。在HTML语言中，表格标记使用符号<table>表示。定义表格光使用<table>是不够的，还需要定义表格中的行、列、标题等内容。

标记
			说明
		表格标记<table>
			<table></table>标记表示整个表格。<ta...

			
		

	





	

		

			

				
					
input文本框获取焦点和失去焦点判断

				
			

			

				

					itdragons的博客
				

				

					05-15
					
					7万+
					
				

			

		

		

			
				
onBlur:当输入框失去焦点后 
onFocus:当输入框获得焦点后
这两个JavaScript事件是写在html标签中的例如：


使用jQuery的实现方法为：
　　　　对于元素的焦点事件，我们可以使用jQuery的焦点函数focus(),blur()。
focus()：得到焦点时使用，blur()：失去焦点时使用。
代码如下:
$("input").focus(); 或$

			
		

	



		

			
		



	

		

			

				
					
搜集整理的前端面试题1

				
			

			

				

					遇见更好的自己
				

				

					10-26
					
					2621
					
				

			

		

		

			
				
1.    Doctype作用？标准模式与兼容模式各有什么区别?
（1）、声明位于位于HTML文档中的第一行，处于 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
（2）、标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
2

			
		

	





	

		

			

				
					
漂亮的表格css+html

				
			

			

				

					02-11
				

			

		

		

			
				
首先，HTML表格基础。在HTML中，我们使用`<table>`标签来定义一个表格，而`<tr>`标签用于创建表格行，`<th>`用于定义表头单元格，`<td>`则用于定义常规数据单元格。例如：  ```html     表头1  表头2      数据1  ...

			
		

	





	

		

			

				
					
表格表单的嵌套.html

				
			

			

				

					09-18
				

			

		

		

			
				
比较简单的表单与表格的嵌套，只是做一个引导作用，实际意义不大，

			
		

	





	

		

			

				
					
实验三HTML表格与HTML表单优质资料.doc

					
最新发布

				
			

			

				

					12-02
				

			

		

		

			
				
HTML 表格与 HTML 表单优质资料  本资源为实验三 HTML 表格与 HTML 表单优质资料，涵盖了 HTML 表格和 HTML 表单的相关知识点。通过本资源，读者可以掌握网页中插入表格数据的标记的用法、不规则表格的创建方法、...

			
		

	





	

		

			

				
					
html学习【（案例）用文本编辑器打开能看到知识点】包括表格表单等

				
			

			

				

					10-19
				

			

		

		

			
				
以上就是关于HTML表格、表单、锚点、`input`和`button`等基础知识的详细解释。学习并熟练掌握这些内容，将有助于构建功能丰富的静态网页。随着对CSS和其他Web技术的理解加深，可以创建出更具交互性和动态效果的网页...

			
		

	





	

		

			

				
					
HTML表单&CSS

				
			

			

				

					yahweh_liu的博客
				

				

					04-26
					
					1522
					
				

			

		

		

			
				
HTML表单&CSS

今日内容介绍

使用html的表单标签编写“注册页面”

今日内容学习目标

能够使用<form><input>等标签编写注册表单

熟悉的CSS样式的3种导入方式

熟悉CSS选择器的使用

了解CSS基本属性使用

了解CSS盒子模型

今日学习标签总览

今天讲学习表单标签，提供总览方便大家更好的吸收。



第1章网站用户注册页面...

			
		

	





	

		

			

				
					
登录页面表单验证源码

				
			

			

				

					XiaYiqin_stay hungry stay foolish
				

				

					09-27
					
					1073
					
				

			

		

		

			
				
下面就单单对表单验证写了个较为简单的源码。仅仅是为了验证。
可以在里面看到一些细节，以及怎么去用。以后我们可以用jsp和servlet验证。

	
		
		百度用户注册
		
			var veriCode="";
			function usernamecheck(id,result){
				var reg=/^[a-zA-Z]{1}[\w]{5,19}$/
				if(!reg.t

			
		

	





	

		

			

				
					
多窗口展示页面

				
			

			

				

					XiaYiqin_stay hungry stay foolish
				

				

					09-25
					
					943
					
				

			

		

		

			
				
很多时候，我们登陆某个系统的时候可以看到多窗口布局的影子，本文就如何实现多窗口进行展开。
多窗口就是将浏览器页面分割成了多个窗口，每个窗口都可以显示独立的网页文件，常用于网站后台设计，HTML可以使用frameset框架进行分割窗口
基本结构：

框架集frameset，窗户架
框架frame，玻璃
没有body
noframs



如何创建框架

通过frameset

			
		

	





	

		

			

				
					
HTML基本结构及标签

				
			

			

				

					XiaYiqin_stay hungry stay foolish
				

				

					09-21
					
					814
					
				

			

		

		

			
				
HTML : Hyper Text Markup Language
 
在制作JSP动态网页之前，我们要先熟练掌握静态网站的制作技术。


实际开发中，一般是使用现成的HTML文档加上JSP的动态脚本并进行进行适当的修改的。


HTML中标签是很重要的一点

首先，我们看一段基本的代码





...


...



在这上面呢，我们就可以看到标

			
		

	





	

		

			

				
					
计算器网页版

				
			

			

				

					XiaYiqin_stay hungry stay foolish
				

				

					10-02
					
					733
					
				

			

		

		

			
				
编写了一个计算器网页版的HTML
里面还有一些想法不是很好，正则表达式也不是很好，比如没有设置一个存放之前的var，让乱按符号的时候会出现bug



	
		calculation
		
		
			//数字
			var numbp =0;
			var numbf =0;
			var numbr =0;
			var sign ="";
			
			function num(n,

			
		

	





	

		

			

				
					
JSP

				
			

			

				

					XiaYiqin_stay hungry stay foolish
				

				

					10-06
					
					566
					
				

			

		

		

			
				
JSP
JSP是Java server pages，是JavaWeb的动态资源。
JSP=html+java脚本+jsp动作标签（包含EL表达式）
JSP语法包括脚本元素；指令元素；动作元素
Web服务器在遇到访问JSP网页的请求时，首先执行其中的程序片段，然后将执行结果以HTML格式返回给客户端



当JSP页面首次被访问的时候，Tomcat会先把JSP编译成Servlet，然

			
		

	





	

		

			

				
					
JavaScript

				
			

			

				

					XiaYiqin_stay hungry stay foolish
				

				

					09-26
					
					486
					
				

			

		

		

			
				
JavaScript 简称JS：
目的：是一种脚本语言，用来创建具有交互性较强的页面；数据验证；动态更改内容。
特性：

1 脚本语言：不能独立运行，必须要嵌入到HTML里面，没有main函数
2 解释性：逐条解释执行
3 与java相关：借鉴java基本语句和控制流，但是严格来说并没有关系，名字有点像而已，类似老婆饼和老婆
4 弱类型语言：对变量来说，统一使用var
5 事件驱动

			
		

	





	

		

			

				
					
JSP内置对象

				
			

			

				

					XiaYiqin_stay hungry stay foolish
				

				

					10-03
					
					454
					
				

			

		

		

			
				
为了方便WEB程序的开发，在JSP页面中内置了一些默认的对象，这些对象不需要预先声明就可以在脚本代码和表达式中使用。
内置对象一共有九个：

request 取得客户端与系统的信息
response 响应客户端信息
out 控制数据输出的操作
session 记录与处理上线者的个别数据
application 记录与处理上线者共享的数据
pageContext 存取与处理系统运行时

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值