对form表单html和css的认识

开发工具与关键技术:Dw前端
作者:修
撰写时间:2018.1.19

form表单看起来很简单其实当你创建的时候你就会发现它与你没有你想像中那么简单特别是好看的form表单,下面是我对于form表单的认识,我们先来看Html的代码:
在这里插入图片描述
在这里插入图片描述

上面的图片就是HTML的简单布局:由类、input标签、单选框、复选框、下拉框(select)和textarea(文本域)组成,接下来我们来看看它的css部分
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

这css的部分就是用来设置表单的布局、颜色、字体和伪类(:hover)的当然你也可以设置你自己觉得好看的样式。当上面有很多元素是相同的你也可以把相同的元素写在同一个类中或者像css最后一张图伪类部分的写法也可以的。

这就是form表单的html和css部分,接下来就让我们来这表单的模型在这里插入图片描述图中和名字紧靠着的就是文本框文本框里的字是用 placeholder 这个元素来实现的(注意:placeholder 一定要写在input标签里面)在表格里的作用是用来提示怎么填表格的。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值