html5+form+表单样式,每日一点前端-7-html5+css3友好的表单

此表单由html5+css3制作。代码简单，且界面美观。省去了很多js的编写。

友好的表单.gif

代码：

创建友好的表单

body{text-align: center;}

/*表单1样式*/

.form1{width:30%;margin: 0px auto;}

.fieldset1{

-webkit-margin-start: 0px;

-webkit-margin-end: 2px;

-webkit-padding-before: 0em;

-webkit-padding-start: 0em;

-webkit-padding-end: 0.75em;

-webkit-padding-after: 0.625em;

}

.legend1{

text-align: left;margin-left: 0px;font-size:12px;

}

.ol1{list-style: none;text-align: left;padding-left:20px;}

.ol1>li{margin: 10px auto;}

input{width: 53%;padding:0px;border: 1px solid #909090;height: 20px;}

.li-input-submit{text-align: center;}

.input-submit{border: none;width: 90px;height: 30px;line-height: 30px;vertical-align: middle;

text-align: center;color: green;margin-top: 30px;}

.input-url{margin-left: 8px;}

表单描述

表单描述

1. 姓名     

2. 优先级    

3. 估算的时间  

4. 日期的选择  

5. 电子邮件   

6. URL字段   

7. 颜色选择   

8. 密码正则表达 

   pattern="^(?=.{8,})(?=.*[a-z])(?=.*[A-Z])(?=.*[\d])(?=.*[\w]).*$"/>

9. 姓名

   iotzzh

表单描述

表单描述

1. 姓名     

2. 优先级    

3. 估算的时间  

4. 日期的选择  

5. 电子邮件   

6. URL字段   

7. 颜色选择   

8. 密码正则表达 

   pattern="^(?=.{8,})(?=.*[a-z])(?=.*[A-Z])(?=.*[\d])(?=.*[\w]).*$"/>

9. 姓名

   iotzzh

如果觉得文章写得还行，请点个赞。如果想与我进一步交流，可以关注我的公众号或者加我的微信。

个人微信

公众号_前端微说.jpg