帐号: 密码:
// 设为首页 // 收藏本站 // 请您留言 // 网址导航
远方教程-满足你的求知欲!
站内搜索:
HTML ASP PHP CSS DIV Dreamweaver Photoshop Word Excel PPT SEO技巧
您当前位置:网站首页 >> HTML入门 >> Div+CSS从入门到精通 >> 阅读文章

Div+CSS速成第九天:CSS表单设计

来源:远方教程 作者:远方教程 发布时间:2015-04-09 查看次数:8131 访问[新版]

四、用label标签提升用户体验
label标签常常被大家忽略了,合理利用会使页面的用户体验得到提升,我们可以对表单的说明文字使用label标签,这样当用户点击文字时,光标就定位到表单上了

DIV CSS教程——第9天CSS表单设计

如上图,当鼠标点击姓名文字时,光标就会定位到后边的文本框上了;点击男女文字也会选中相应的选项;同理,复选框和文本域也是一样的。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
</style>
</head>
<body>
<p>
<label for="name">姓名:</label>
<input type="text" name="name" id="name" />
</p>
<p>性别:
<input type="radio" name="sex" id="male" value="radio" /><label for="male">男</label>
<input type="radio" name="sex" id="female" value="radio2" /><label for="female">女</label></p>
<p>爱好:
<input type="checkbox" name="music" id="music" /><label for="music">听音乐</label>
<input type="checkbox" name="web" id="web" /><label for="web">上网</label>
<input type="checkbox" name="book" id="book" /><label for="book">看书</label></p>
<p>
<label for="content">简历:</label>
<textarea name="content" id="content" cols="45" rows="5"></textarea>
</p>
<p>&nbsp;</p>
<p>&nbsp; </p>
</body>
</html>

提示:可以先修改部分代码后再运行

打印 打印 | 关闭 关闭 评论
相关文章
图片新闻
站内搜索  
搜索
猜您喜欢  
最新更新  
阅读排行  
关于我们 | 联系方式 | 大事记 | 免责声明 | | 给我留言
部分广告源自金山联盟2345联盟 QQ咨询 站长之家QQ群:232617873
Copyright 2024 远方教程 © All Rights Reserved.

回顶部