html form表单基础入门案例讲解

目录

• 一，表格标签
• –1，概述
• –2，总结
• 二，表单标签
• –1，测试
• –2，总结
• –3，form提交数据
• 三，form表单的练习
• 四，CSS
• -1，概述
• -2，语法
• -3，入门案例
• 五，选择器
• 总结

一，表格标签

向网页中加入表格

–1，概述

	
		
		
	
	
		

		

			
 
				
11
 
				
13

			
			

				
21
				
22
				
23
  
			
			

				
31
				
32
			
		
	

–2，总结

table 标签用来表示表格

tr 标签表示表里的一行

td 标签表示行里的列

border 设置边框

cellspacing 设置单元格的间距

bgcolor 设置背景色

width 设置宽度

height 设置高度

colspan 合并列

rowspan 合并行

二，表单标签

用来提交数据，本质上就是在一个表格标签的外面用form包起来

–1，测试

	
		
		
	
	
		

			

				

					

						
注册表单
					
				
				

					
用户名：
					

						
					
				
				

					
密码：
					

						
					
				
				

					
确认密码：
					

						
					
				
				

					
昵称：
					

						
					
				
				

					
邮箱：
					

						
					
				
				

					
性别：
					

						男
						女
					
				
				

					
爱好：
					

						篮球
						足球
						乒球
					
				
				

					
城市：
					

						
							北京
							上海
							山东
							东北
						
					
				
				

					
头像：
					

						
					
				
				

					
验证码：
					

						
						
						
					
				
				

					
自我描述：
					

						请输入自我描述~~
					
				
				

					

						
						
					
				
			
		
	

–2，总结

form标签用来提交表单里的数据

table标签用来实现表格

tr标签用来表示表格里的行

td标签表示行里的列

img标签表示插入图片

select标签表示下拉框，option是下拉选项

textarea标签是文本域

input表示输入框，类型很丰富

text类型是普通的文本输入框

password是密码输入框

email是邮箱的输入框

file是上传文件

radio是单选框

checkbox是多选框

button是普通的按钮

submit是提交按钮，比button多了数据提交的功能

align属性用来设置元素的位置center是居中

bordercolor设置边框的颜色

–3，form提交数据

–1，提交按钮必须submit类型，不然不会提交数据的

–2，哪些数据需要提交的话，必须在网页上配置name属性

–3，提交的数据都在地址栏中展示 http://127.0.0.1:8848/cgb2105/html4.html?username=1314

username=1314 ，其中username是页面中name属性的值，1314是网页中输入的数据

	
		
		
	
	
		
		

			

				

					

						
注册表单
					
				
				

					
用户名：
					

						
					
				
				

					
密码：
					

						
					
				
				

					
确认密码：
					

						
					
				
				

					
昵称：
					

						
					
				
				

					
邮箱：
					

						
					
				
				

					
性别：
					

						
						男
						女
					
				
				

					
爱好：
					

						
						篮球
						足球
						乒乒球
					
				
				

					
城市：
					

						
						
							北京
							上海
							山东
							东北
						
					
				
				

					
头像：
					

						
					
				
				

					
验证码：
					

						
						
						
					
				
				

					
自我描述：
					

						请输入自我描述~~
					
				
				

					

						
						
					
				
			
		
	

三，form表单的练习

	
		
		
	
	
		
		

			

				

					

						
学生信息管理系统MIS
					
				
				

					

						姓名：
					
				
				

					

						
					
				
				

					

						年龄：
					
				
				

					

						
					
				
				

					

						性别：(单选框) 
						男
						女
					
				
				

					

						爱好：(多选) 
						乒乓球
						爬山 
						唱歌
					
				
				

					

						学历：(下拉框) 
						
							本科
							专科
							高中
							小学
						
					
				
				

					

						入学日期： 

						
					
				
				

					

						
						
					
				
			
		
	

四，CSS

-1，概述

用来修饰网页的，变得好看。层叠样式表stylesheet

-2，语法

td{ text-align : center; } 选择器{ 属性名 : 属性值 ; }

-3，入门案例

	
		
		
		
		
	
	
		
		
我是div1
		
我是div2
 
		
我是div3
		
我是div4
		
我是div5
	

五，选择器

	
		
		
		
		
	
	
		
		
我是div1
		
我是div2
		
我是div3
		我是span1
		我是span2
		
我是p
		
		
	

总结

本篇文章就到这里了，希望能给你带来帮助，也希望您能够多多关注脚本之家的更多内容！