2017-11-21满怀激情而来:表格、表单

原创 moxiao 随笔 个人笔记 778阅读 2017-11-21 21:54:03 举报

今天终于啊表格表单学完了,学之前真的是很激动的,学完之后感觉一脸懵逼,怎么用?怎么感觉没有弄懂?
还是得仔细看看了,不熟悉特性,感觉用表格表单真的有点痛苦!
先看看表格吧!
表格标签:
table 表格
thead 表格头
th 元素定义表头
tbody 表格主体
tr 表格行
td 元素定义表格单元
第一次看到真的有点脑胀感觉啊,怎么这么复杂?但是,仔细看了之后又会发现,还是蛮好记得!
同样,表格有自己的默认样式,在用的时候要把默认样式干掉:
表格样式重置
table{border-collapse:collapse;} 单元格间隙合并
th,td{padding:0;}重置单元格默认填充

在使用默认样式的时候,通常呢,会有一些需要合并的单元格,用法及含义如下:
colspan 属性规定单元格可横跨的列数。
<td colspan="2"></td>

                   rowspan  属性规定单元格可横跨的行数。
        <td rowspan="2"></td>

说了这么多,看看练习吧,先看看原图吧!

2017-11-21满怀激情而来:表格、表单
相信对许多老司机来说很简单,但是新手看的时候真的有点看懵了的感觉。
代码来了:
html 代码

来看看我做的效果图:

2017-11-21满怀激情而来:表格、表单

学了这些之后基本的都已经会了,那么接下来就是内容比较多的表单了:
form 表单
action 数据提交的地址
method 提交类型
所有的表单控件都需要被form包裹
form可以包裹多个表单控件

                             text 文本框
            password 密码
            radio 单选
                将同类型的radio设置同一个name就能达到互斥效果
            checkbox 复选(多选)
            submit 提交
            reset  重置
            button 按钮
            file  上传
            hidden  隐藏
                       写法:<input type="…… " name="" value="" /> 

                        键值对

                    name属性,提交数据时显示的字段(参数)
                        value属性
                        设置表单控件的值(页面加载就会展示)
                        提交数据时具体的值

                              一些注意:
                                input的默认样式
                         padding重置为0
                         按钮类型的表单控件
                            边框不占位置

                                label  标签为 input 元素定义标注
            <input type="checkbox" name="" id="a"/>
            <label for="a">……</label>

                    checked  在页面加载时默认选定的 input 元素。
            <input type="checkbox" name="" checked/>

                disabled  属性规定应该禁用 input 元素。
            <input type="checkbox" name="" disabled/>

                            select/option 下拉选框
            对高度的支持不兼容;
            所设置的宽度是包含边框的大小

                 textarea      文本域
            各个浏览器下的默认滚动条显示不兼容

以上呢就是表单的内容了
今天做了东西,很粗糙,本来不想放来着,但是要证明自己时刻在进步,所以还是放上来吧:
来看看原图:

2017-11-21满怀激情而来:表格、表单

第一眼看到的时候真的时不知道怎么做,第一次做整张页面的。
下面是代码,写的有点不知所以,乱的很:
html 代码

来看看效果图:

2017-11-21满怀激情而来:表格、表单

今天写的代码真的很粗糙,第一次做整张页面,脑袋有点懵,写完这些代码之后,回头一看其实有更好的写法,当时心里其实真的是有点小激动的,毕竟能够看到自己的不足。

在不断的学习中,不断成长,代码不断的简洁,更容易被人看懂,这是要为之奋斗一辈子的事情,加油!明天的代码会更加的顺畅!!!

评论 ( 1 )
最新评论
17317830002 2017-11-22 15:34:59 1F

好东西与人分享,有进步共同进步