<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
<style type="text/css">
form.stylin_form1{
/*表单整体宽度*/
width: 14em;
/*在容器中居中*/
margin: 20px auto;
border:1px solid #bbb7ae;
padding: .5em .5em .15em;
}
.stylin_form1 h3{
/*表单主标题*/
margin:0;
padding: 0 0 .2em .2em;
font-weight: 600;
color:#bbb7ae;
}
.stylin_form1 fieldset{
/*包含控件与标注*/
margin: 0;
padding:0 0 .2em 0;
width:100%;
border:0;
}
/*legend元素的位置不同寻常，所以把它的文本包含在一个块级span中，转而为span设定样式*/
.stylin_form1 legend{
width: 100%;
padding:0 0 .2em 0;
width: 100%;
border:0;
}
.stylin_form1 legend span{
/*设定标题文本的样式*/
display: block;
font-size: 1em;
padding: .3em 0;
/*灰色条*/
background:#bbb7ae;
}
/*通过上面为form设定内边距，它为所包含的内容都与边界空开距离，注意：legend默认位置是由浏览器决定的，为了能够修改它，将它包含在span里面，并将该元素设定成display:block*/
.stylin_form1 section{
/*强制section包含表单控件及其标注*/
overflow: hidden;
padding: .2em 0 .4em 0;
/*根据需求在每个section间增加间距*/
border-bottom: 8px solid #e7e5df;
}
.stylin_form1 section:last-child{
/*为每组最后一个section没有边框*/
border-bottom: 0px;
}
/*表单控件标注*/
.stylin_form1 section label,
.stylin_form1 section h4{
/*h4是复选框和单选框按钮组的标题*/
display: block;
clear: both;
/*右外边距确保标注文本在碰到input之前会换行*/
margin:.3em .3em 0 0;
padding-bottom: .1em;
font-size: .8em;
/*这是什么字体？？？*/
font-family: 'Droid Sans';
font-weight: 400;
line-height: 1.1;
}
/*星号表示必填字段*/
.stylin_form1 section label span,
.stylin_form1 h4 span{
font-size: .75em;
vertical-align: text-top;
color: #f00;
}
.stylin_form1 section p.note{
/*说明星号是必填字段的文本*/
font-size:.7em;
color:#f00;
margin:0;
padding: 0 0 .3em 0;
}
.stylin_form1 section input,
.stylin_form1 section textarea,
.stylin_form1 section select{
margin: .2em .5em .2em 0;
/*给input中的文本添加间距*/
padding:.2em .4em ;/*输入字体距离上下文本框的距离*/
color:#000;/*输入的字体是黑色*/
box-shadow: 1px 1px 3px #ccc;
font-size: .8em;
/*针对Fire-fox 没有这条声明会在textarea上使用Courier*/
font-family: inherit;
/*去掉默认蓝色聚焦轮廓线*/
outline: none;
}
/*设定文本字段（文本 密码 日期 文本区等）的样式，并加圆角*/
.stylin_form1 section input,
.stylin_form1 section textarea{
width: 12em;/*文本框的宽度*/
/*设定字段宽度*/
border: 1px solid #bbb7ae;
border-radius: 3px;
/*圆角边距*/
}
.stylin_form1 section textarea{
height:5em;/*另外设定textarea的高度*/
margin-top: .3em;
/*与上面lable的间距*/
line-height: 1.1em;/*里边文本的行距*/
}
.stylin_form1 section p{
/*控件使用说明*/
margin:.3em .5em 0;
clear: both;
font-size: .7em;
line-height: 1.1;
color:#0f0;
}
.stylin_form1 section p.error{
color:#f00;
/*添加erro类，把文字说明设定为红色*/
}
/*上面为所有控件的可见盒子（text、date、textarea和select）都设定相同的宽度，未说明文字应用了样式，并给每个section元素添加利润交款的边框，让它们保持适当距离。
某些标注后面的星号表示这是必填的，将星号包含在span中，以便调整它与标注文本之间的相对位置*/
/*控件/标注的内包装*/
.stylin_form1 section section{
/*强制元素包围浮动标准*/
overflow: hidden;
margin:.2em 0 .3em .4em;
padding: 0 0 .1em 0;
border-bottom: none;
}
.stylin_form1 section section input{
/*单选按钮或复选框*/
float:left;
clear:both;
/*重设继承宽度*/
width: auto;
/*顶部与标注对齐，左侧防止input溢出*/
margin:.1em 0 0em .3em;
}
.stylin_form1 section section label{
float:left;
/*重设继承的值*/
/*clear：none;*/
width: 15em;
/*在相邻的复选框之间，复选框与标注之间增加间距*/
margin:.15em 0 0 .6em;
/*重设继承的值*/
font-weight: normal;
font-size: .7em;
line-height: 1.2;
}
.stylin_form1 section select{
margin:.4em;
font-size:.85em;
}
.stylin_form1 section input[type="submit"]{
/*提交按钮*/
/*覆盖为其他字段设定的宽度*/
width: auto;
margin: .4em .3em 0 0;
font-size: 1em;
font-weight: 800;
color:#fff;
background-color: #bbb7ae;
/*将鼠标位于按钮之上时，把光标变成小手形状*/
cursor: pointer;
}
.stylin_form1 >section:last-child{
/*居中提交按钮*/
text-align:center;
}
/*标注都在控件的下方——>标注与控件并排显示。
每一组单选按钮和复选按钮的标题，看起来很像表单第一个控件组里的标注。但实际上它们是h4的元素。
然后，给这里每个复选框和单选按钮的小标注另外设定样式，为了能够让选项列表与其他元素对齐，我们也设定了相应的样式。至于提交按钮，它的宽度不在继承前面设定给其他的input的规则，并且在表单底部居中。*/
form.stylin_form1.labels_left{
/*加宽表单，为标注腾出地方*/
width: 22em;
}
form.stylin_form1.labels_left label,
form.stylin_form1.labels_left h4{
/*把标注浮动到控件左侧*/
float: left;
width:8em;
}
form.stylin_form1.labels_left p{
/*缩进控件说明，以便它位于控件正下方*/
margin: 0 0 0 9.35em;
padding: .3em 0 0 0;
/*确保说明不会跟着浮动的标注和控件走*/
clear: both;
}
form.stylin_form1.labels_left p.note{
/*必填字段文本下方的间距*/
margin:0 0 .2em 0;
}
/*每个单选按钮或复选框及其标注的内包装*/
form.stylin_form1.labels_left section section{
width:10em;
margin-left:6.5em;
padding-top: 0;
}
form.stylin_form1.labels_left section section input{
/*单选按钮或复选按钮的宽度*/
width:1.25em;
margin-left:0;
}
.stylin_form1.labels_left section input,
.stylin_form1.labels_left section textarea,
.stylin_form1.labels_left section select{
/*让控件成为第二框*/
float: left;
width:12em;
}
.stylin_form1.labels_left section{
/*缩进选项列表*/
margin-left:.2em;
}
/*防止提交表单按钮继承浮动的行为*/
.stylin_form1.labels_left > section input[type=submit]{
float:none;
}
</style>
</head>
<body>
<!--必要的form标签-->
<form class="stylin_form1" action="process_form.php" method="post">
<h3>A Stylin' Form</h3>
<!--控件组，即各种控件的容器-->
<fieldset>
<!--控件组的说明文件，或标题-->
<legend><span>Part 1 •Basic Control</span></legend>
<!--开始单行文文输入控件-->
<section>
<p class="note">* indicates required field</p>
<!--for属性把标注与控件关联起来，它的值必须与控件ID值相同-->
<label for="user_name">User Name<span>*</span></label>
<!--text属性让这个控件可以输入文本-->
<input type="text" id="user_name" name="user_name"/>
<p>Please select a user name</p>
</section>
<!--开始密码控件-->
<section>
<label for="password">Password<span>*</span></label>
<!--密码显示为掩码-->
<input type="password" id="password" name="password"
maxlength="20"/>
<p>Passeord must be 8 or more characters</p>
</section>
<!--开始多行文本输入控件-->
<section>
<label for="description">Description</label>
<textarea id="description" name="description"
placeholder="Enter the description here."></textarea>
</section>
<!--开始HTML5 日期控件-->
<section>
<label for="description">Date</label>
<input type="date" id="special_date" name="event_date"
min="2012-09-05" />
</section>
</fieldset>
<!--下面是单选框和复选框-->
<fieldset>
<legend><span>Part 2 •Multiple-Choice Controls</span></legend>
<!--开始复选框-->
<section>
<h4>Select Any Number</h4>
<section>
<input type="checkbox" id="check1" name="checkset" value="1"
tabindex="4" />
<label for="check1">Choice1 is pre-checked</label>
</section>
<section>
<input type="checkbox" id="check2" name="checkset" value="2">
<label for="check2">Choice 2 is pre-checked</label>
</section>
<section>
<input type="checkbox" id="check3" name="checkset" value="3">
<label for="check3">Choice 3—add as many as you need!</label>
</section>
<p>You must choose one or more</p>
</section>
<!--开始单选菜单-->
<section>
<h4>Select Only One</h4>
<section>
<input checked="checked" id="radio1" name="radioset"
type="radio" value="Choice_1"/>
<label for="radio1">Choice 1 is pre-selected and
shows the text wraps nicely if it goes to multiple lines.</label>
</section>
<section>
<input id="radio2" name="radioset" type="radio"
value="Choice_2" />
<label for="radio2">Choice 2</label>
</section>
<section>
<input id="radio3" name="radioset" type="radio"
value="Choice_3" />
<label for="radio3">Choice 3</label>
</section>
</section>
<!--开始选项列表（下拉列表）-->
<section>
<label for="select_choice">Select Your Choice</label>
<select id="select_choice" name="select_choice">
<option value="0">None</option>
<option value="1">Choice 1</option>
<option value="2">Choice 2</option>
<option value="3">Choice 3</option>
<option value="4">Choice 4</option>
</select>
</section>
</fieldset>
<!--开始提交按钮-->
<section>
<input type="submit" value="Submit This Form" />
</section>
</form>
</body>
</html>
表单
最新推荐文章于 2025-03-31 12:53:38 发布
扫一扫
122
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
