每日一点前端-7-html5+css3友好的表单 小灰灰 2021-06-24 16:11 327阅读 0赞 此表单由html5+css3制作。代码简单,且界面美观。省去了很多js的编写。 ![2789632-6e3eb28981d1b9ff.gif][] 友好的表单.gif 代码: <!DOCTYPE html> <!--第三章--> <html lang="en"> <head> <meta charset="UTF-8"> <title>创建友好的表单 </title> <style> 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;} </style> </head> <body> <h4>表单描述</h4> <form class="form1" method="post" action="chapter2.html"> <fieldset class="fieldset1"> <legend class="legend1">表单描述</legend> <ol class="ol1"> <li> <label>姓名 </label> <input class="input-name" autofocus required type="text" placeholder="zzh"/> </li> <li> <label>优先级 </label> <input class="input-range" required type="range"/> </li> <li> <label>估算的时间 </label> <input class="input-number" required type="number"/> </li> <li> <label>日期的选择 </label> <input class="input-date" type="date" value="2016-09-01"/> </li> <li> <label>电子邮件 </label> <input class="input-email" type="email" /> </li> <li> <label>URL字段 </label> <input class="input-url" type="url" placeholder="www.iotzzh.com"/> </li> <li> <label>颜色选择 </label> <input class="input-color" type="color"/> </li> <li> <label>密码正则表达 </label> <input class="input-password" type="password" autocomplete="off" placeholder="8-10 characters" pattern="^(?=.{8,})(?=.*[a-z])(?=.*[A-Z])(?=.*[\d])(?=.*[\w]).*$"/> </li> <li> <b>姓名</b> <span class="li-span-name" contenteditable="true">iotzzh</span> </li> <li class="li-input-submit"> <input class="input-submit" type="submit" value="提交"/> </li> </ol> </fieldset> </form> <!--代码展示--> <xmp style="text-align: left;"> <h4>表单描述</h4> <form class="form1" method="post" action="chapter2.html"> <fieldset class="fieldset1"> <legend class="legend1">表单描述</legend> <ol class="ol1"> <li> <label>姓名 </label> <input class="input-name" autofocus required type="text" placeholder="zzh"/> </li> <li> <label>优先级 </label> <input class="input-range" required type="range"/> </li> <li> <label>估算的时间 </label> <input class="input-number" required type="number"/> </li> <li> <label>日期的选择 </label> <input class="input-date" type="date" value="2016-09-01"/> </li> <li> <label>电子邮件 </label> <input class="input-email" type="email" /> </li> <li> <label>URL字段 </label> <input class="input-url" type="url" placeholder="www.iotzzh.com"/> </li> <li> <label>颜色选择 </label> <input class="input-color" type="color"/> </li> <li> <label>密码正则表达 </label> <input class="input-password" type="password" autocomplete="off" placeholder="8-10 characters" pattern="^(?=.{8,})(?=.*[a-z])(?=.*[A-Z])(?=.*[\d])(?=.*[\w]).*$"/> </li> <li> <b>姓名</b> <span class="li-span-name" contenteditable="true">iotzzh</span> </li> <li class="li-input-submit"> <input class="input-submit" type="submit" value="提交"/> </li> </ol> </fieldset> </form> </xmp> </body> </html> ![2789632-3b18269684ea9294.png][] 公众号.png [2789632-6e3eb28981d1b9ff.gif]: /images/20210615/a7466aab2ebc4b1ea583c6a3ec153eea.png [2789632-3b18269684ea9294.png]: /images/20210615/8db8b2ffa7e4458595bead9288becaac.png
还没有评论,来说两句吧...