通过阅读和学习书籍《CSS3实战》总结
《CSS3实战》/成林著.—北京机械工业出版社2011.
UI元素的状态一般包括：可用、不可用、选中、未选中、获取焦点、失去焦点、锁定、待机等。
UI设计的一个核心就是让表单更可用、易用和好用。表单设计应该符合三层模型，即表单应该具有三种属性：感知（页面显示的布局）、对话（内容呈现的问题和回答）、关系（交互的任务结构）。
设计并实现简洁、美观、可用性好、符合Web标准的表单，是Web设计师追求的目标。
<fieldset id="login"> <legend>用户登录</legend> <form action="" method="POST" class="form"> <label for="name">姓名 <input name="name" type="text" id="name" value="" /> </label> <label for="password">密码 <input name="password" type="text" id="password" value="" /> </label> <input type="image" class="button" src="images/login1.gif" /> </form></fieldset>
<style type="text/css"> h1{ font-size:20px; } #login { width:400px; padding:1em 2em 0 2em; font-size:12px; }label { /*表单项中标签样式*/ line-height:26px; display:block; /*label是一个行内元素，增加该声明，确保每个表单项独立一行*/ font-weight:bold; }#name, #password { /*文本框公共样式*/ border:1px solid #ccc; width:160px; height:22px; /*固定高度*/ padding-left:20px; /*挤出位置*/ margin:6px 0; line-height:20px; /*让输出文本居中*/ }#name { background:url(images/name.gif) no-repeat 2px 2px; }#password { background:url(images/password.gif) no-repeat 2px 2px; }.button { margin:6px 0; }</style>当用户登录成功后，不妨通过脚本把文本框设置为不可用状态（disabled=“disabled”）状态，通过E：disabled选择器 让文本框显示为灰色，以告诉用户该文本框不可用了。
HTML：在文本框中补加disabled属性
<fieldset id="login"> <legend>用户登录</legend> <form action="" method="POST" class="form"> <label for="name">姓名 <input name="name" type="text" id="name" value="" disabled="disabled" /> </label> <label for="password">密码 <input name="password" type="text" id="password" value="" disabled="disabled" /> </label> <input type="image" class="button" src="images/login1.gif" /> </form></fieldset>
CSS：在基础样式上添加如下样式
#login input:disabled#name { /*姓名文本框处于不可用状态时的样式*/ background:#ddd url(images/name1.gif) no-repeat 2px 2px; border:1px solid #fff;}#login input:disabled#password { /*密码域处于不可用状态时的样式*/ background:#ddd url(images/password1.gif) no-repeat 2px 2px; border:1px solid #fff;}
<style type="text/css">body { font-family: Helvetica, arial, sans-serif; margin: 0px 0px 0px 15px; font-size: 14px; background-color: #ffffff}/*设计文本框外框样式*/div.wrapper { background-image:url(images/bg.gif); background-repeat:no-repeat; width:348px; height:384px; margin-left:14px; padding-top:75px;}/*设计标题样式*/div.ribbon { background-image:url(images/ribbon.png); background-repeat:no-repeat; width:358px; height:45px; float:left; margin-top:25px; margin-left:10px; padding-left:25px; padding-top:5px; color:#ffffff; font-weight:bold;}/*设计Logo效果*/div.logo { background:url(images/logo.png) no-repeat; width:330px; height:115px;}div.loginwrapper { margin-left:40px; }/*设计动态文本框效果*/span.usertext { color:#478fab; font-weight:bold;}input.textbox { background:url(images/text_field.png) 0px -25px; width:264px; height:20px; border:0px; padding-top:5px; padding-left:4px;}input.textbox:hover { background:url(images/text_field.png) 0px 0px; border:0px;}div.bottomwrapper { margin-left:40px; margin-top:50px;}a:link, a:visited { color:#ffffff; text-decoration:none;}a:hover { color:#95ddf9; }/*设计动态按钮效果*/input.button { background:url(images/login_btn.png) 0px 0px; width:92px; height:31px; border:0px; float:right; margin-right:20px; margin-top:5px;}input.button:hover { background:url(images/login_btn.png) 0px -31px; }input.button:active { background:url(images/login_btn.png) 0px -62px; }</style>HTML：
<form id="form1" name="form1" method="post" action=""> <fieldset> <legend>学生信息登记表</legend> <p class="top"> <label for="textfield" class="title">姓名：</label> <input type="text" name="textfield" id="textfield" /> </p> <p> <label for="textarea" class="title">备注：</label> <textarea name="textarea" id="textarea" cols="45" rows="5"></textarea> </p> <p><span class="title">兴趣：</span> <label for="checkbox">文学</label> <input type="checkbox" name="checkbox" class="checkbox" id="checkbox" /> <label for="checkbox2">艺术</label> <input type="checkbox" name="checkbox2" class="checkbox" id="checkbox2" /> <label for="checkbox3">体育</label> <input type="checkbox" name="checkbox3" class="checkbox" id="checkbox3" /> <label for="checkbox4">其他</label> <input type="checkbox" name="checkbox4" class="checkbox" id="checkbox4" /> </p> <p><span class="title">性别：</span> 女 <input type="radio" name="radio" id="radio" value="radio" /> 男 <input type="radio" name="radio" id="radio" value="radio2" /> </p> <p> <label for="select" class="title">专业：</label> <select name="select" id="select"> <option value="1">法律</option> <option value="2">英语</option> <option value="3">计算机</option> <option value="4">财会</option> </select> </p> <p class="center"> <input type="submit" name="button" id="button" value="提交" /> <input type="reset" name="button2" id="button2" value="重置" /> </p> </fieldset></form>
CSS样式：
<style type="text/css">h1 { font-size:20px; }fieldset { width:615px; height:346px; background:url(images/bg7.png) no-repeat center; padding:12px; border:none;} /*表单框样式*//*清除默认的图注，以背景效果显示会更好看*/fieldset legend { display:none; }/*以下是各类表单域样式*/#textfield { width:16em; border:solid 1px #aaa; position:relative; top:-3px;}#textarea { width:25em; height:3em; border:solid 1px #aaa;}.checkbox { border:solid 1px #d8bca9; position:relative; top:3px; left:-2px;}select { border:solid 1px #d8bca9; }#radio { border:solid 1px #d8bca9; position:relative; top:3px; left:-1px;}/*以下是几个辅助设计的样式表*/.title { width:160px; float:left; font-weight:bold; margin-left:20px;}.top { margin-top:80px; }.center { text-align:center; }</style>.title { width:100px; float:left; text-align:right; font-weight:bold; margin:0 40px;}对于用户来说，单行布局会更友好，更好用。因为它会降低用户视线左右移动的频率。
form { width:615px; height:450px; background:url(images/bg8.png) no-repeat center; padding:12px 0 12px 40px;}fieldset { border:none; }fieldset legend { display:none; }/*重设该样式表，让标签文本块状显示*/.title { display:block; font-weight:bold;}CSS：
.red { color:red; margin-left:-10px; padding-right:2px;}HTML：
<p class="top"> <label for="textfield" class="title"><span class="red">*</span>姓名</label> <input type="text" name="textfield" id="textfield" /> </p>
HTML:
<p class="top"> <label for="textfield" class="title"><span class="red">*</span>姓名</label> <input type="text" name="textfield" id="textfield" /><span class="error">请填写真实姓名，不要输入别名或者昵称</span> </p>
CSS：
.error { color:white; background:red; padding:2px; margin:0 4px;}最终网页代码：
<!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" /><title>设计友好、易用的表单</title><style type="text/css">h1 { font-size:20px; }form { width:615px; height:501px; background:url(images/bg10.png) no-repeat center; padding:12px 0 12px 40px;}fieldset { border:none; }fieldset legend { display:none; }#textfield { width:16em; border:solid 1px #aaa; position:relative; top:-3px;}#textarea { width:30em; height:6.4em; border:solid 1px #aaa;}.checkbox { border:solid 1px #d8bca9; position:relative; top:3px; left:-2px;}select { border:solid 1px #d8bca9; }#radio { border:solid 1px #d8bca9; position:relative; top:3px; left:-1px;}.title { display:block; font-weight:bold;}.top { margin-top:70px; }.top1 { margin-top:8px; }.center { text-align:center; }.red { color:red; margin-left:-10px; padding-right:2px; display:none;}.error { color:white; background:red; padding:2px; margin:0 4px;}.hide { display:none;}.tip { color:white; background:blue; padding:2px; margin:0 4px;}h3 { color:#990; margin:3px 0;}p { margin:0; padding:4px 0;}input { padding:4px;}</style></head><body><h1>设计友好、易用的表单</h1><form id="form1" name="form1" method="post" action=""> <fieldset> <legend>学生信息登记表</legend> <h3 class="top">必填信息</h3> <p> <label for="textfield" class="title"><span class="red">*</span>姓名</label> <input type="text" name="textfield" id="textfield" /><span class="tip hide">请填写真实的汉字姓名</span> </p> <p><span class="title"><span class="red">*</span>性别</span>男 <input type="radio" name="radio" id="radio" value="radio" checked="checked" /> 女 <input type="radio" name="radio" id="radio" value="radio2" /> </p> <p> <label for="select" class="title"><span class="red">*</span>专业</label> <select name="select" id="select"> <option value="1">法律</option> <option value="2">英语</option> <option value="3">计算机</option> <option value="4">财会</option> <option value="5" selected="selected" >其他</option> </select> </p> <h3 class="top1">选填信息</h3> <p><span class="title">兴趣</span> <label for="checkbox">文学</label> <input type="checkbox" name="checkbox" class="checkbox" id="checkbox" /> <label for="checkbox2">艺术</label> <input type="checkbox" name="checkbox2" class="checkbox" id="checkbox2" /> <label for="checkbox3">体育</label> <input type="checkbox" name="checkbox3" class="checkbox" id="checkbox3" /> <label for="checkbox4">其他</label> <input type="checkbox" name="checkbox4" class="checkbox" id="checkbox4" /> </p> <p> <label for="textarea" class="title">备注</label> <textarea name="textarea" id="textarea" cols="45" rows="5"></textarea> </p> <p class="center"> <input type="submit" name="button" id="button" value="提交" /> <input type="reset" name="button2" id="button2" value="重置" /> </p> </fieldset></form></body></html>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
