HTML表单应用练习

最新推荐文章于 2022-03-12 19:31:00 发布
最新推荐文章于 2022-03-12 19:31:00 发布
阅读量943 收藏 3
点赞数
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011184841/article/details/51399265
版权

 

表单应用

效果图

1

 

 

1、表单的属性

<form name="frm" action="./login_page.html" method="POST" target="_blank" enctype="multipart/form-data" >

action=...指跳转到哪里

method=”GET” OR “POST”指表单提交数据的方式 有GET和POST两种

2、文本域、密码域、单选框、多选框、下拉框、提交、复位

 

文本框<input type="text" name="text" maxlength="10">

Maxlength指能输入最大字符位数

 

密码域 <input type="password" name="pwd">

 

复选框 <input type="checkbox" name="enjoy[]" value="2" checked>

Checked表示默认选择什么选项

单选框  <input type="radio" name="sex" value="1" checked>

Checked表示默认选择什么选项

 

上传图片 <input type="file" name="uploadFile">

 

文本域

<textarea cols=40 rows=6>在这里输入你的信息</textarea>

Cols表示文本域的宽位40行

Rows表示文本域的高度为6列

 

下拉列表

                   <select >

<option value="0">---请选择-</option>

...

<option value="5" selected>55555555</option>

<option value="6">66666666</option>

</select>

Selected表示默认显示的选项

 

多选列表

    <select size=5>

<option value="1">111111</option>

<option value="2">2222222</option>

<option value="3">333333</option>

<option value="4">4444444</option>

<option value="5">55555555</option>

<option value="6">66666666</option>

</select>

Select size=5表示显示5项目列表出来,其他的选项隐藏.

 

提交数据的样式 

 按钮              <input type="submit" value="提交">

 图片链接 <input type="image" src="login.jpg">

 重置 <input type="reset">

 按钮 <input type="button" value="清空" 

 

 

 

 

 
 

 
 

 
 

<!DOCTYPE html>
 

<html>
 

<head>
 

<meta charset="utf-8" />
 

<title>表单的应用</title>
 

</head>
 

<body background="flower.jpg">
 

<center><caption>表单的应用</caption><center>
 

<form name="frm" action="./login_page.html" method="POST" target="_blank" enctype="multipart/form-data" >
 

<table border="1" width="500" align="center">
 

<tr>
 

<th>文本域(<u>u</u>)</th>
 

<td><input type="text" name="text" maxlength="10"></td>
 

</tr>
 

 

<tr>
 

<th>密码域</th>
 

<td><input type="password" name="pwd"></td>
 

</tr>
 

 

<tr>
 

<th>复选框</th>
 

<td>玩游戏<input type="checkbox" name="enjoy[]" value="1">
 

看电影<input type="checkbox" name="enjoy[]" value="2" checked>
 

旅游<input type="checkbox" name="enjoy[]" value="3">
 

看书<input type="checkbox" name="enjoy[]" value="4" checked>
 

写字<input type="checkbox" name="enjoy[]" value="5">
 

</td>
 

</tr>
 

 

<tr>
 

<th>单选框1</th>
 

<td>男<input type="radio" name="sex" value="1" checked>
 

女<input type="radio" name="sex" value="0">
 

保密<input type="radio" name="sex" value="2">
 

</td>
 

</tr>
 

 

<tr>
 

<th>单选框2</th>
 

<td>男<input type="radio" name="sex1" value="1">
 

女<input type="radio" name="sex1" value="0" checked>
 

保密<input type="radio" name="sex1" value="2">
 

</td> 
 

</tr>
 

 

<tr>
 

<th>上传文件</th>
 

<td><input type="file" name="uploadFile"></td>
 

</tr>
 

 

<tr>
 

<th>下拉列表(<u>s</u>)</th>
 

<td>
 

<select >
 

<option value="0">---请选择-</option>
 

<option value="1">111111</option>
 

<option value="2">2222222</option>
 

<option value="3">333333</option>
 

<option value="4">4444444</option>
 

<option value="5" selected>55555555</option>
 

<option value="6">66666666</option>
 

</select>
 

</td>
 

</tr>
 

 

<tr>
 

<th>列表</th>
 

<td><select size=5>
 

<option value="1">111111</option>
 

<option value="2">2222222</option>
 

<option value="3">333333</option>
 

<option value="4">4444444</option>
 

<option value="5">55555555</option>
 

<option value="6">66666666</option>
 

</select>
 

</td>
 

</tr>
 

 

<tr>
 

<th>多选列表</th>
 

<td><select size=5>
 

<option value="1">111111</option>
 

<option value="2">2222222</option>
 

<option value="3">333333</option>
 

<option value="4">4444444</option>
 

<option value="5">55555555</option>
 

<option value="6">66666666</option>
 

</select>
 

</td>
 

</tr>
 

 

<tr>
 

<th>多行文本域</th>
 

<td><textarea cols=40 rows=6>在这里输入你的信息</textarea></td>
 

</tr>
 

 

<tr>
 

<td colspan=2 align="center">
 

<input type="submit" value="提交">
 

<input type="image" src="login.jpg">
 

<input type="reset">
 

<input type="button" value="清空" οnclick="document.frm.username.value=""">
 

</td>
 

</tr>
 

</form>
 

</table>
 

</body>
 

</html>

                

        

        

    




    

      

        

            

              
                
                  pandoraxm
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    3
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
html表单练习

				
			

			

				

					weixin_45239190的博客
				

				

					08-06
					
					2612
					
				

			

		

		

			
				
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>...

			
		

	



                

              
                



	

		

			

				
					
初步认识HTML+表单标签练习

				
			

			

				

					weixin_64449292的博客
				

				

					07-25
					
					585
					
				

			

		

		

			
				
适合初学者，内容比较基础。学好表单标签非常重要。

			
		

	



                


  
              

                


	

		

			

				
					
【HTML】表格练习

				
			

			

				

					点滴记忆
				

				

					03-12
					
					372
					
				

			

		

		

			
				
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=...

			
		

	





	

		

			

				
					
form表单基本练习

				
			

			

				

					weixin_43661378的博客
				

				

					06-01
					
					1238
					
				

			

		

		

			
				
代码如下所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>form表单基本练习</title>
	</head>
	<body>
		<img src="01.jpg"/>
		<form action="" method="post">
			用户:  <input type="text" .

			
		

	



		

			
		



	

		

			

				
					
JavaScript表单练习.zip

				
			

			

				

					12-23
				

			

		

		

			
				
1．	掌握JavaScript脚本的调用和基本语法； 2．	掌握JavaScript常用内置对象的基本应用； 3．	掌握BOM和window消息对话框的使用； 4．	掌握HTML DOM动态网页设计技术。

			
		

	





	

		

			

				
					
html  练习素材

				
			

			

				

					01-02
				

			

		

		

			
				
总的来说，这个"HTML练习素材"涵盖了HTML5的基础到高级应用，包括语义化标签、响应式设计、Flexbox布局、表单处理以及多媒体集成等关键知识点。通过实践这些示例，学习者可以系统地提升自己的HTML5编程能力。

			
		

	





	

		

			

				
					
HTML_course.rar_html 练习题

					
最新发布

				
			

			

				

					09-14
				

			

		

		

			
				
本“HTML_course.rar_html 练习题”资源包含了一个完整的HTML学习课程，共分为七章，旨在帮助学习者深入理解和掌握HTML的基本概念、语法以及实际应用。通过这份资料，你可以系统地提升自己的HTML技能，并通过练习题...

			
		

	





	

		

			

				
					
html css  练习素材

				
			

			

				

					01-02
				

			

		

		

			
				
5. 实战项目：可能有完整的网页项目，让你有机会实践从头到尾构建一个完整的网页，这将帮助你理解HTML和CSS在实际项目中的应用。  通过深入研究这些素材，你可以逐步提升HTML5和CSS3的技能，理解网页开发的基本流程...

			
		

	





	

		

			

				
					
html练习题

				
			

			

				

					11-24
				

			

		

		

			
				
HTML 练习题知识点总结  本资源摘要信息涵盖了 HTML 基础知识点，涵盖了 HTML 文档的基本结构、标记符的使用、超链接、表单元素、列表、图片引入等方面的知识点。  一、HTML 文档基本结构  * 浏览器对 HTML 文档的...

			
		

	





	

		

			

				
					
html+css+js新手练习项目

				
			

			

				

					10-08
				

			

		

		

			
				
html+css+js新手练习项目，里面包含例子源码，还有单独文件夹分类。适合新手练习用

			
		

	





	

		

			

				
					
HTML5简单清新的登录表单

				
			

			

				

					04-11
				

			

		

		

			
				
HTML5简单清新的登录表单,HTML5特效

			
		

	





	

		

			

				
					
table.html（html表格练习）

				
			

			

				

					07-21
				

			

		

		

			
				
html5简单的项目支出表格作业，表内容为
项目负责人 联系电话 项目支出细化预算(单位：万元)项目类别 	发展性专项 		建设性专项 		基本建设和大修理项目 	合计 	项目前期费用 	征地费 	建筑工程费 	安装工程费 	设备等购置费 	原 材 料 	其他费用 	各种建筑物面积 	起始年 	终 止 年
项目属性 	新增项目 		上年延续项目 	
项目预算来源 	项目当年预算 	项目总预算
合计 													
1、财政拨款（补助） 			会议培训项目

			
		

	





	

		

			

				
					
HTML下表单练习处理

				
			

			

				

					weixin_47514459的博客
				

				

					05-20
					
					667
					
				

			

		

		

			
				
因为小编最近真的是太忙了，有的作作业没有来的及更新，不过小编会补上去的，让csdn记录下我的it生涯。废话不多说开始开干。

第一题：模仿下图完成网页

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>网页</title>
		<style >
			.clock{
				color: "beige";
				
				
				
	.

			
		

	





	

		

			

				
					
html 表单练习 博客_练习：创建一个简单HTML5表单

				
			

			

				

					cuyi7076的博客
				

				

					06-27
					
					1087
					
				

			

		

		

			
				
在本练习中，您将使用几个新的<input>标记属性和类型创建一个简单的表单。 您创建的是表格的螺母和螺栓，而不是钟声和哨子。 目的是建立一个框架，在该框架上可以开发丰富的Internet应用程序（RIA），同时确保对声音HTML5表单构造的结构和语义基础的理解。 

 常用缩略语 

 CSS3：级联样式表版本3 
 GUI：图形用户界面 
 HTML5：超文本标记语言版本5 
 ...

			
		

	





	

		

			

				
					
html表单表格小练习两个

				
			

			

				

					mrgaohaihang的博客
				

				

					03-19
					
					1012
					
				

			

		

		

			
				
编写实现如图所示页面效果的HTML代码并提交。其中，A、 B、C、D、E加粗显示，它们都位于各自单元格的正中间，A单元格的高度为200像素，宽度为100像素，B单元格的高度为100像素，宽度为200像素，C单元格的宽度为100像素，高度为200像素。（在浏览器中展示时表格居中
这里注意colspan与rowspan的用法
colspan是横跨列rowspan是横跨行
width=300这里指3...

			
		

	





	

		

			

				
					
HTML注册表单练习

				
			

			

				

					风动云彩
				

				

					03-11
					
					4852
					
				

			

		

		

			
				
代码如下：


&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;欢迎注册&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;h1 align="center"&gt;欢迎注册CSDN账号!&lt;/h1&gt;
    &lt;form 

			
		

	





	

		

			

				
					
html表单作业练习

				
			

			

				

					努力的凤梨
				

				

					05-29
					
					2266
					
				

			

		

		

			
				
淘宝注册表


	

	名字
	
	


	姓氏
	
	


	登录名
	
	


	密码
	
	


	再次输入密码
	
	


	电子邮箱
	
	


	性别
	男
        女
	


	爱好
	运动
		    聊天
	        玩游戏
	


	出生日期
	年
	月
	日
	


	
    
	


	阅读淘宝网服务协议


	淘宝平台：指包括淘宝网（域名为 ...

			
		

	





	

		

			

				
					
form表单练习代码

				
			

			

				

					Tz。
				

				

					04-08
					
					843
					
				

			

		

		

			
				
代码如下：




    年龄
        1991
        1992
        1993
        1994
    
    

    邮箱
    url：
    


    DATE:
    搜索：
    

    
    


    
    
        liuzhe
       

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值