本文介绍了一个使用HTML5和CSS3构建的友好型表单设计案例。该表单无需复杂的JavaScript代码，通过HTML5新增的表单元素如日期选择器、颜色选择器等，结合CSS3样式实现美观且易用的表单界面。
此表单由html5+css3制作。代码简单，且界面美观。省去了很多js的编写。
友好的表单.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>
公众号.png
扫一扫
901
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
