首页 > 互联资讯 > 技术交流  > 

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表单的练习

        
        
        	
        		
        		练习form表单
        	
        
        	
        		
        		

        学生信息管理系统MIS

        姓名:
        年龄:
        性别:(单选框)
        爱好:(多选) 乒乓球 爬山 唱歌
        学历:(下拉框)
        入学日期:

        四,CSS

        -1,概述

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

        -2,语法

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

        -3,入门案例

        
        
        	
        		
        		测试 css修饰网页
        		
        		
        	
        
        	
        		
        		
        我是div1
        我是div2
        我是div3
        我是div4
        我是div5

        五,选择器

        
        
        	
        		
        		测试 css的选择器
        		
        		
        	
        
        	
        		
        		
        我是div1
        我是div2
        我是div3
        我是span1 我是span2

        我是p

        总结

        本篇文章就到这里了,希望能给你带来帮助,也希望您能够多多关注讯客的更多内容!

        html form表单基础入门案例讲解由讯客互联技术交流栏目发布,感谢您对讯客互联的认可,以及对我们原创作品以及文章的青睐,非常欢迎各位朋友分享到个人网站或者朋友圈,但转载请说明文章出处“html form表单基础入门案例讲解