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

Editor

目录

一，表格标签

–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包起来

2021071214502721.png

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

2021071214502722.png

       
               
                练习form表单
       
       
               
               
                       

学生信息管理系统MIS

姓名：

年龄：

性别：(单选框)                                                 男                                                 女

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

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

入学日期：

               
       


四，CSS
-1，概述

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

-2，语法

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

-3，入门案例


       
               
                测试 css修饰网页
               
               
                        /* 语法：选择器{ 属性名:属性值; } */
                        /* 给所有div */
                        div{
                                color:green; /* 设置字的颜色红色 */
                                background-color: #008000;/* 设置背景色 */
                        }
               
       
       
               
                我是div1
                我是div2
                我是div3
                我是div4
                我是div5
       


五，选择器


       
               
                测试 css的选择器
               
               
                        /* 1. 标签名选择器： */
                                 /* 练习1：选中标签名叫div的所有元素*/
                                 div{  
                                        background-color: #008000; /* 设置背景色 */
                                        color: black; /* 设置字的颜色*/
                                        font-size: 30px ; /* 设置字号 */
                                        font-family: "宋体" ; /* 设置字体 */
                                }
                                /* 练习2：选中标签名叫input的所有元素*/
                                input{
                                        background-color: pink; /* 设置背景色 */
                                }
                        /* 2. class选择器：先设置class属性 + 通过.获取class的值 */
                                .a{ /* 选中网页中所有class=a的元素们，其中class的值可以重复*/
                                        color: yellow;/* 字的颜色 */
                                }
                        /* 3. id选择器：先设置id属性 + 通过#获取id的值 */       
                                #x{ /* 选中网页中id=x的元素，由于id的值不能相同，所以只选中了一个元素*/
                                        font-size: 100px; /* 加大字号 */
                                }
               
       
       
               
                我是div1
                我是div2
                我是div3
                我是span1
                我是span2
                我是p
               
               
       


总结
本篇文章就到这里了，希望能给你带来帮助，也希望您能够多多关注知鸟论坛的更多内容！

Gordon520

论坛不能没有像楼主这样的人才啊！我会一直支持知鸟论坛。

术数古籍专卖疤

楼主，大恩不言谢了！知鸟论坛是最棒的！

永远爱你冰塘

论坛不能没有像楼主这样的人才啊！我会一直支持知鸟论坛。

123456848

感谢楼主的无私分享！要想知鸟论坛好 就靠你我他

尘埃416

楼主，我太崇拜你了！我想我是一天也不能离开知鸟论坛。

我的苦恼冉

感谢楼主的无私分享！要想知鸟论坛好 就靠你我他

老橡树1

感谢楼主的无私分享！要想知鸟论坛好 就靠你我他

塞翁364

楼主，大恩不言谢了！知鸟论坛是最棒的！

啤酒瓶空了缓

既然你诚信诚意的推荐了，那我就勉为其难的看看吧！知鸟论坛不走平凡路。