首页
学习
活动
专区
工具
TVP
发布

表单案例

首先上最终页面效果图:

下面是制作的详细步骤:

1.添加个人信息

个人信息

姓名:

邮件地址:

此时会出现如下效果页面:

2.在个人信息后面添加性别选择信息

请选择性别

此时会出现如下效果页面:

3.添加意见输入框和提交按钮(下面加粗代码),完整表单的代码如下所示:

个人信息

姓名:

邮件地址:

请选择性别

意见

请提出意见及建议:

提交

此时会出现如下效果页面:

4.利用css样式修饰表单,第一步:设置页面背景颜色、去掉字段集的边框、修饰字段集标题文字、最后将包含字段集的类.fieldset-wrapper设置背景为白色。

body{

background-color:#D9F7F3;}

fieldset{

border:0;

}

legend{

font-weight:bold;

color:#777;}

.fieldset-wrapper{

background-color:#fff;}

此时会出现如下效果页面:

5.第二步,拉开上下区块的间距:.

.fieldset-wrapper {

background-color:#fff;

margin-top: 10px;

}

6.设置姓名、邮件地址、意见和它们的输入框两行显示,并且最大宽度为20em。

为了区别于性别中的label和input,我们它们加上不同的类,field-text 和field:

class="field-text">

姓名:

class="field-text">

邮件地址:

... ...

class="field">

class="field">

... ...

class="field-text">

请提出意见及建议:

添加css代码如下:

.field-text{

max-width:20em;}

.field-text label,.field-text input,.field-text textarea{

width:100%;

}

此时会出现如下效果页面:

7.修饰input和textarea输入框,边框为1px大小的灰色线,具有内边距和圆角边框效果:

.field-text input,.field-text textarea{

padding:.375em;

border:1px solid #ccc;

border-radius:.25em;}

此时会出现如下效果页面:

8.输入框获得聚焦效果:蓝色边框且周围有蓝色阴影

.field-text input:focus,.field-text textarea:focus{

box-shadow:0 0 .5em rgba(93, 162, 248, 0.5);

border-color: #5da2f8;

}

此时会出现如下效果页面:

9.拉开性别的单选按钮和文字的间距

.field input {

margin-right: 0.75em;

}

10.最后:修饰提交按钮

button{

border:0;

padding:.5em 1em;

cursor:pointer;

border-radius:.25em;

color:#fff;

background-color:#173b6d;

font-size:1em;

}

至此,该案例便完成了:

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181217G0U6KR00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券