带来一篇用css制造表单并体验亲和力

显示全部楼层 · 发表于 2015-1-15 23:23:07

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

你用什么用的熟练就用什么，讲究的是效率，客户永远不管你用什么，页面就要好看，功能就要好用，还有时间和成本的问题。
关于表单，很经常使用。可是在webstandard建站的时分，他的排版常常让人忘记，到了真正用到的时分就发明让人头疼，固然我也碰到过。我如今要先容一个用<fieldset></label>标签制造大度并且详细亲和力的表单的办法。
基础的xHTML:
<h3>已注册用户登录</h3>
<formaction=""method="post"name="apLogin"id="apLogin">
<fieldset>
<legend>用户登录</legend>
<div>
<labelfor="Name">用户名</label>
<inputtype="text"name="Name"id="Name"size="18"maxlength="30"/><br/>
</div>
<div>
<labelfor="password">暗码</label>
<inputtype="password"name="password"id="password"size="18"maxlength="15"/><br/>
</div>
<divclass="cookiechk">
<label><inputtype="checkbox"name="CookieYN"id="CookieYN"value="1"/><ahref="#"title="选择是不是纪录您的信息">记着我</a></label>
<inputname="login791"type="submit"class="buttom"value="登录"/>
</div>
<divclass="forgotpass"><ahref="#">您健忘暗码?</a></div>
</fieldset>
</form>
看了代码，发明标单形貌笔墨都在<label></label>中，只需让<label></label>标签浮动左对齐，fieldset包括的<div>扫除浮动，就能够完成我们罕见的那类结构。
上面是基础的CSS：

<!DOCTYPE<ahref="http://www.blue1000.com/bkhtml/c22/"title="HTML/JavaScript教程">HTML</a>PUBLIC"-//W3C//DTDX<ahref="http://www.blue1000.com/bkhtml/c22/"title="HTML/JavaScript教程">HTML</a>1.0Strict//EN""http://www.w3.org/TR/x<ahref="http://www.blue1000.com/bkhtml/c22/"title="HTML/JavaScript教程">HTML</a>1/DTD/x<ahref="http://www.blue1000.com/bkhtml/c22/"title="HTML/JavaScript教程">HTML</a>1-strict.dtd"><<ahref="http://www.blue1000.com/bkhtml/c22/"title="HTML/JavaScript教程">HTML</a><ahref="http://www.blue1000.com/bkhtml/c21/"title="XML教程">XML</a>ns="http://www.w3.org/1999/x<ahref="http://www.blue1000.com/bkhtml/c22/"title="HTML/JavaScript教程">HTML</a>"><head><metahttp-equiv="Content-Type"content="text/<ahref="http://www.blue1000.com/bkhtml/c22/"title="HTML/JavaScript教程">HTML</a>;charset=gb2312"/><title>Formdemo</title><styletype="text/<ahref="http://www.blue1000.com/bkhtml/c23/"title="CSS教程">CSS</a>"></style></head><body><divid="formwrapper"><h3>已注册用户登录</h3><formaction=""method="post"name="apLogin"id="apLogin"><fieldset><legend>用户登录</legend><div><labelfor="Name">用户名</label><inputtype="text"name="Name"id="Name"size="18"maxlength="30"/><br/></div><div><labelfor="pass<ahref="http://www.blue1000.com/bkhtml/c117/"title="Word教程">word</a>">暗码</label><inputtype="pass<ahref="http://www.blue1000.com/bkhtml/c117/"title="Word教程">word</a>"name="pass<ahref="http://www.blue1000.com/bkhtml/c117/"title="Word教程">word</a>"id="pass<ahref="http://www.blue1000.com/bkhtml/c117/"title="Word教程">word</a>"size="18"maxlength="15"/><br/></div><divclass="cookiechk"><label><inputtype="checkbox"name="CookieYN"id="CookieYN"value="1"/><ahref="#"title="选择是不是纪录您的信息">记着我</a></label><inputname="login791"type="submit"class="buttom"value="登录"/></div><divclass="forgotpass"><ahref="#">您健忘暗码?</a></div></fieldset></form><br/><h3>未注册创立帐户</h3><formaction=""method="post"name="apForm"id="apForm"><fieldset><legend>用户注册</legend><p><strong>您的电子邮箱不会被发布进来,可是必需填写.</strong>在您注册之前请先仔细浏览服务条目.</p><div><labelfo</p>

12下一页

对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。

显示全部楼层 · 发表于 2015-1-16 00:48:16

Table中布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不利于直观。而Div更能体现样式和结构相分离，结构的重构性强。
r="Name">用户名</label><inputtype="text"name="Name"id="Name"value=""size="20"maxlength="30"/>*(最多30个字符)<br/></div><div><labelfor="Email">电子邮箱</label><inputtype="text"name="Email"id="Email"value=""size="20"maxlength="150"/>*<br/></div><div><labelfor="pass<ahref="http://www.blue1000.com/bkhtml/c117/"title="Word教程">word</a>">暗码</label><inputtype="pass<ahref="http://www.blue1000.com/bkhtml/c117/"title="Word教程">word</a>"name="pass<ahref="http://www.blue1000.com/bkhtml/c117/"title="Word教程">word</a>"id="pass<ahref="http://www.blue1000.com/bkhtml/c117/"title="Word教程">word</a>"size="18"maxlength="15"/>*(最多15个字符)<br/></div><div><labelfor="confirm_pass<ahref="http://www.blue1000.com/bkhtml/c117/"title="Word教程">word</a>">反复暗码</label><inputtype="pass<ahref="http://www.blue1000.com/bkhtml/c117/"title="Word教程">word</a>"name="confirm_pass<ahref="http://www.blue1000.com/bkhtml/c117/"title="Word教程">word</a>"id="confirm_pass<ahref="http://www.blue1000.com/bkhtml/c117/"title="Word教程">word</a>"size="18"maxlength="15"/>*<br/></div><div><labelfor="AgreeToTerms">批准服务条目</label><inputtype="checkbox"name="AgreeToTerms"id="AgreeToTerms"value="1"/><ahref="#"title="您是不是批准服务条目">先看看条目？</a>*</div><divclass="enter"><inputname="create791"type="submit"class="buttom"value="提交"/><inputname="Submit"type="reset"class="buttom"value="重置"/></div><p><strong>*在提交您的注册信息时,我们以为您已批准了我们的服务条目.<br/>*这些条目大概在未经您批准的时分举行修正.</strong></p></fieldset></form></div></body></<ahref="http://www.blue1000.com/bkhtml/c22/"title="HTML/JavaScript教程">HTML</a>>
运转代码复制代码另存代码――您能够运转代码观察殊效，您也能够复制大概另存源代码。本代码由天极网页陶吧供应。</p>

上一页12

支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。

显示全部楼层 · 发表于 2015-3-11 03:48:14

是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 带来一篇用css制造表单并体验亲和力

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子

带来一篇用css制造表单并体验亲和力