HTMLCSS_form表单

最常用的表单结构：

 

 

  <form action="" method="post" class="def_form "> <dl> <dt>用户名</dt> <dd> <input type="text" class="" /><span>请输入用户名</span> </dd> </dl> <dl> <dt>密码</dt> <dd> <input type="password" class="" /> </dd> </dl> <dl> <dt>性别</dt> <dd> <label><input type="radio" value="" name="sex" checked="checked"/> 男</label> <label><input type="radio" value="" name="sex" /> 女</label> </dd> </dl> <dl> <dt>爱好</dt> <dd> <label><input type="checkbox" /> 篮球</label> <label><input type="checkbox" /> 足球</label> </dd> </dl> <dl> <dt>城市</dt> <dd> <select> <option>北京</option> <option>上海</option> <option>南京</option> </select> </dd> </dl> <dl> <dt>简介</dt> <dd> <textarea>!!!</ textarea> </dd> </dl> <dl> <dt> </dt> <dd> <input type="submit" value="提交" /> </dd> </dl> </form>

 

样式：

　　如果要用不同的表单样式，就别写一个form_s_[a-z]进行覆盖，如果是针对form中某类元素设置，则用模块如：m_span_[a-z]；

 

/* form.css */ /* 缩写 def_ default m_ module p_ plugin s_ style */ /* form_default */ .def_form{} .def_form dl{} .def_form dt{float: left;} .def_form dd{} /* form_module_rad */ .form_m_rad input[type="text"], .form_m_rad input[type="password"], .form_m_rad textarea, .form_m_rad textarea.s_rad .form_m_rad input.s_rad{ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #7F9DB9; } /* form_module_focus */ .form_m_focus input[type="text"]:focus, .form_m_focus input[type="password"]:focus, .form_m_focus textarea:focus, .form_m_focus textarea.s_focus, .form_m_focus input.s_focus:focus{ outline-width:0 !important; /* for chrome safari */ -moz-box-shadow: 0 0 8px rgba(82, 168, 236, 0.5); -webkit-box-shadow: 0 0 8px rgba(82, 168, 236, 0.5); box-shadow: 0 0 8px rgba(82, 168, 236, 0.5); border-color: rgba(82, 168, 236, 0.75) !important; } /* custom -- form_style_a */ .form_s_a dl{ margin-bottom: 10px; } .form_s_a dt{ padding-right: 10px; width: 80px; text-align: right; } .form_s_a dd{ margin: 0 10px; } .form_s_a dd input[type="text"], .form_s_a dd input[type="password"], .form_s_a dd input.style_wh /* for browsers which is not support [type] */ { width: 200px; height: 24px; } .form_s_a dd span, .form_s_a dd span.info{ font-size: 12px; color: #ccc; } /* custom -- module */ .m_span_a dd span{color: red;} .m_span_b dd span{color: blue;}