用css制作表单并体验亲和力_html-js-css

概述对于表单，很常用。但是在web standard建站的时候，他的排版往往让人遗忘，到了真正用到的时候就发现让人头疼，当然我也遇到过。我现在要介绍一个用<fieldset></label>标签制作漂亮而且具体亲和力的表单的方法。以下为引用的内容：基本的xH… 对于表单，很常用。但是在web standard建站的时候，他的排版往往让人遗忘，到了真正用到的时候就发现让人头疼，当然我也遇到过。我现在要介绍一个用<fIEldset></label>标签制作漂亮而且具体亲和力的表单的方法。

以下为引用的内容：

基本的xhtml:

<h3>已注册用户登录</h3>
<form action="" method="post" name="apLogin" ID="apLogin">
<fIEldset>
<legend>用户登录</legend>
<div>
   <label for="name">用户名</label>
   <input type="text" name="name" ID="name" size="18" maxlength="30" /><br />
</div>
<div>
   <label for="password">密码</label>
   <input type="password" name="password" ID="password" size="18" maxlength="15" /><br />
</div>
<div class="cookiechk">
   <label><input type="checkBox" name="cookieYN" ID="cookieYN" value="1" /> <a href="#" Title="选择是否记录您的信息">记住我</a></label>
   <input name="login791" type="submit" class="buttom" value="登录" />
</div>
<div class="forgotpass"><a href="#">您忘记密码?</a></div>
</fIEldset>
</form>

看了代码，发现标单描述文字都在<label></label>中，只要让<label></label>标签浮动左对齐，fIEldset包含的<div>清除浮动，就可以实现我们常见的那类布局。

下面是基本的CSS：

<!DOCTYPE <a href="http://www.blue1000.com/bkHTML/c22/" _fcksavedurl="http://www.blue1000.com/bkHTML/c22/" Title="HTML/JavaScript教程">HTML</a> PUBliC "-//W3C//DTD X<a href="http://www.blue1000.com/bkHTML/c22/" _fcksavedurl="http://www.blue1000.com/bkHTML/c22/" Title="HTML/JavaScript教程">HTML</a> 1.0 Strict//EN" "http://www.w3.org/TR/x<a href="http://www.blue1000.com/bkHTML/c22/" _fcksavedurl="http://www.blue1000.com/bkHTML/c22/" Title="HTML/JavaScript教程">HTML</a>1/DTD/x<a href="http://www.blue1000.com/bkHTML/c22/" _fcksavedurl="http://www.blue1000.com/bkHTML/c22/" Title="HTML/JavaScript教程">HTML</a>1-strict.dtd"><<a href="http://www.blue1000.com/bkHTML/c22/" _fcksavedurl="http://www.blue1000.com/bkHTML/c22/" Title="HTML/JavaScript教程">HTML</a> <a href="http://www.blue1000.com/bkHTML/c21/" _fcksavedurl="http://www.blue1000.com/bkHTML/c21/" Title="XML教程">XML</a>ns="http://www.w3.org/1999/x<a href="http://www.blue1000.com/bkHTML/c22/" _fcksavedurl="http://www.blue1000.com/bkHTML/c22/" Title="HTML/JavaScript教程">HTML</a>"><head><Meta http-equiv="Content-Type" content="text/<a href="http://www.blue1000.com/bkHTML/c22/" _fcksavedurl="http://www.blue1000.com/bkHTML/c22/" Title="HTML/JavaScript教程">HTML</a>; charset=gb2312" /><Title>Form demo</Title><style type="text/<a href="http://www.blue1000.com/bkHTML/c23/" _fcksavedurl="http://www.blue1000.com/bkHTML/c23/" Title="CSS教程">CSS</a>"></style></head><body><div ID="formwrapper"><h3>已注册用户登录</h3><form action="" method="post" name="apLogin" ID="apLogin"><fIEldset><legend>用户登录</legend><div><label for="name">用户名</label><input type="text" name="name" ID="name" size="18" maxlength="30" /><br /></div><div><label for="pass<a href="http://www.blue1000.com/bkHTML/c117/" _fcksavedurl="http://www.blue1000.com/bkHTML/c117/" Title="Word教程">word</a>">密码</label><input type="pass<a href="http://www.blue1000.com/bkHTML/c117/" _fcksavedurl="http://www.blue1000.com/bkHTML/c117/" Title="Word教程">word</a>" name="pass<a href="http://www.blue1000.com/bkHTML/c117/" _fcksavedurl="http://www.blue1000.com/bkHTML/c117/" Title="Word教程">word</a>" ID="pass<a href="http://www.blue1000.com/bkHTML/c117/" _fcksavedurl="http://www.blue1000.com/bkHTML/c117/" Title="Word教程">word</a>" size="18" maxlength="15" /><br /></div><div class="cookiechk"><label><input type="checkBox" name="cookieYN" ID="cookieYN" value="1" /> <a href="#" _fcksavedurl="#" Title="选择是否记录您的信息">记住我</a></label><input name="login791" type="submit" class="buttom" value="登录" /></div><div class="forgotpass"><a href="#" _fcksavedurl="#">您忘记密码?</a></div></fIEldset></form><br /><h3>未注册创建帐户</h3><form action="" method="post" name="apForm" ID="apForm"><fIEldset><legend>用户注册</legend><p><strong>您的电子邮箱不会被公布出去,但是必须填写.</strong> 在您注册之前请先认真阅读服务条款.</p><div><label for="name">用户名</label><input type="text" name="name" ID="name" value="" size="20" maxlength="30" />*(最多30个字符)<br /></div><div><label for="Email">电子邮箱</label><input type="text" name="Email" ID="Email" value="" size="20" maxlength="150" /> *<br /></div><div><label for="pass<a href="http://www.blue1000.com/bkHTML/c117/" _fcksavedurl="http://www.blue1000.com/bkHTML/c117/" Title="Word教程">word</a>">密码</label><input type="pass<a href="http://www.blue1000.com/bkHTML/c117/" _fcksavedurl="http://www.blue1000.com/bkHTML/c117/" Title="Word教程">word</a>" name="pass<a href="http://www.blue1000.com/bkHTML/c117/" _fcksavedurl="http://www.blue1000.com/bkHTML/c117/" Title="Word教程">word</a>" ID="pass<a href="http://www.blue1000.com/bkHTML/c117/" _fcksavedurl="http://www.blue1000.com/bkHTML/c117/" Title="Word教程">word</a>" size="18" maxlength="15" />*(最多15个字符)<br /></div><div><label for="confirm_pass<a href="http://www.blue1000.com/bkHTML/c117/" _fcksavedurl="http://www.blue1000.com/bkHTML/c117/" Title="Word教程">word</a>">重复密码</label><input type="pass<a href="http://www.blue1000.com/bkHTML/c117/" _fcksavedurl="http://www.blue1000.com/bkHTML/c117/" Title="Word教程">word</a>" name="confirm_pass<a href="http://www.blue1000.com/bkHTML/c117/" _fcksavedurl="http://www.blue1000.com/bkHTML/c117/" Title="Word教程">word</a>" ID="confirm_pass<a href="http://www.blue1000.com/bkHTML/c117/" _fcksavedurl="http://www.blue1000.com/bkHTML/c117/" Title="Word教程">word</a>" size="18" maxlength="15" />*<br /></div><div><label for="AgreetoTerms">同意服务条款</label><input type="checkBox" name="AgreetoTerms" ID="AgreetoTerms" value="1" /><a href="#" _fcksavedurl="#" Title="您是否同意服务条款">先看看条款？</a> * </div><div class="enter"><input name="create791" type="submit" class="buttom" value="提交" /><input name="submit" type="reset" class="buttom" value="重置" /></div><p><strong>* 在提交您的注册信息时,我们认为您已经同意了我们的服务条款.<br />* 这些条款可能在未经您同意的时候进行修改.</strong></p></fIEldset></form></div></body></<a href="http://www.blue1000.com/bkHTML/c22/" _fcksavedurl="http://www.blue1000.com/bkHTML/c22/" Title="HTML/JavaScript教程">HTML</a>>

总结

以上是内存溢出为你收集整理的用css制作表单并体验亲和力全部内容，希望文章能够帮你解决用css制作表单并体验亲和力所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1025968.html

用css制作表单并体验亲和力

发表评论

评论列表（0条）