26 , CSS 构造表单

1. 表单标签使用

2. 下拉菜单背景

3. 滚动条的使用

4. 结构化表单布局

1 1 1 1. . . . 表单标签的使用

<label for=”name”>姓名: <input type=”text” name=”name”id=”name”/>

2 2 2 2. . . . 去掉默认的表单间隔

Form {

Margin: 0;

Padding: 0;

}

3 3 3 3. . . . 给文本框添加漂亮的边框

Input,textarea {

Border: 3px double #333;

}

4. 给下拉菜单设置背景色

select {

background:red;

}

. 5. 给文本区域添加滚动条

textarea {

SCROLLBAR-FACE-COLOR: #333;

SCROLLBAR-HIGHLIGHT-COLOR: #666;

SCROLLBAR-SHADOW-COLOR: #333;

SCROLLBAR-3DLIGHT-COLOR: #999;

SCROLLBAR-ARROW-COLOR: #999;

SCROLLBAR-TRACK-COLOR: #000;

SCROLLBAR-DARKSHADOW-COLOR: #000;

}

6 6 6 6. . . . 表单外边框设置 t fieldset  legend

Fieldset {

Margin:0 0 10px 0;

Padding: 5px;

Border: 1px solid #333;

}

Legend {

Background-color: #ddd;

Margin:0;

Padding: 5px;

Border-style: solid;

Border-width: 1px;

Border-color: #fff #aaa #666 #fff;

}

Fieldset {

Background: #ddd;

}

7. 结构化表单布局

<form id="regForm">

<fieldset>

<legend>登陆信息</legend>

<div class="dataArea frist">

<label for="username"> 用户 名 ： </label><input type="text"

id="username" class="input" />

</div>

<div class="dataArea">

<label for="password"> 密 码 ： </label><input type="text"

id="password" class="input" />

</div>

<div class="dataArea">

<label for="passwordVerify"> 确 认 密 码 ： </label><input

type="text" id="passwordVerify" class="input" />

</div>

</fieldset>

<fieldset>

<legend>个人信息</legend>

<div class="dataArea frist">

<label for="nickname"> 昵 称 ： </label><input type="text"

id="nickname" />

</div>

<div class="dataArea">

<label for="email" class="hint"> 电子邮 件 ： </label><input

type="text" id="email" />

</div>

<div class="subArea">

<input type="submit" value="注册 " /> <input type="button"

value="返回" />

</div>

</fieldset>

</form>

#regForm fieldset {

padding:0 20px 10px;

border:0;

border-top:1px #d0d0bf solid;

}

#regForm legend {

padding:0 10px;

font-weight:bold;

}

#regForm .dataArea {

padding:2px 0;

}

#regForm .frist {

padding:8px 0 2px;

}

#regForm .subArea input {

padding:1px 4px;

}

#regForm label {

width:110px;

text-align:right;

float:left;

}

1 表单标签的使用

<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	label{
	background: red;
		display: block;
	}
</style>
</head>

<body>
<form>
	<label for="username">用户名：<input type="text" id="username" name="username"></label>
	<label for="sex1"><input type="radio" value="男" id="sex1" name="sex"/>男</label><label for="sex2"><input type="radio" value="女" id="sex2" name="sex2"/>女</label>
</form>
只要点用户名就能够把光标定位在里面,label可以布局
</body>
</html>

　　2 去掉默认的表单间隔

<!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=utf-8" />
<title>去掉默认的表单间隔</title>
<style type="text/css">
	form{
		margin: 20px;
		padding: 20px;
	}
</style>
</head>

<body>
<form>
	<input type="text"/>
</form>

</body>
</html>

　　3给文本框添加漂亮的边框

<!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=utf-8" />
<title>给文本框添加漂亮的边框</title>
<style type="text/css">
	form{
	
	}
	input,textarea{
		border:2px solid black;
	}
</style>
</head>

<body>
<form>
	<input type="text"/>
	<textarea cols="20" rows="8">
		
	</textarea>
</form>

</body>
</html>

　　4给下拉菜单设置背景色

<!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=utf-8" />
<title>给下拉菜单设置背景色,没成功</title>
<style type="text/css">

	select option a.{
		background: green；
	}
	select option b.{
		background: red；
	}
	select option c.{
		background: blue；
	}
</style>
</head>

<body>
<form>
	<select>
		<option class="a">上海</option>
		<option class="b">盐城</option>
		<option class="c">北京</option>
	</select>
</form>

</body>
</html>

　　5给文本区域添加滚动条

<!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=utf-8" />
<title>给文本区域添加滚动条</title>
<style type="text/css">
	form{
	
	}
	textarea{
	width: 300px;
	height: 150px;
	SCROLLBAR-FACE-COLOR: #333;
SCROLLBAR-HIGHLIGHT-COLOR: #666;
SCROLLBAR-SHADOW-COLOR: #333;
SCROLLBAR-3DLIGHT-COLOR: #999;
SCROLLBAR-ARROW-COLOR: #999;
SCROLLBAR-TRACK-COLOR: #000;
SCROLLBAR-DARKSHADOW-COLOR: #000;
	}
</style>
</head>

<body>
<form>
  <textarea>
  	
  </textarea>
</form>
ietester的IE8能显示出来
</body>
</html>

　　6表单外边框设置 t fieldset  legend

<!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=utf-8" />
<title>给文本区域添加滚动条</title>
<style type="text/css">
	Fieldset {
Margin:0 0 10px 0;
Padding: 5px;
Border: 1px solid #333;
}
Legend {
Background-color: #ddd;
Margin:0;
Padding: 5px;
Border-style: solid;
Border-width: 1px;
Border-color: #fff #aaa #666 #fff;
}
Fieldset {
Background: #ddd;
}
</style>
</head>

<body>
<form>
 <fieldset>
<legend>登陆信息</legend>
</fieldset>
</form>

</body>
</html>

　　7结构化表单布局

<!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=utf-8" />
<title>结构化表单布局</title>
<style type="text/css">
#regForm fieldset {
padding:0 20px 10px;
border:0;
border-top:1px #d0d0bf solid;
}
#regForm legend {
padding:0 10px;
font-weight:bold;
}
#regForm .dataArea {
padding:2px 0;
}
#regForm .frist {
padding:8px 0 2px;
}
#regForm .subArea input {
padding:1px 4px;
}
#regForm label {
width:110px;
text-align:right;
float:left;
}
</style>
</head>

<body>
<form id="regForm">
<fieldset>
<legend>登陆信息</legend>
<div class="dataArea frist">
<label for="username"> 用户 名 ： </label><input type="text"
id="username" class="input" />
</div>
<div class="dataArea">
<label for="password"> 密 码 ： </label><input type="text"
id="password" class="input" />
</div>
<div class="dataArea">
<label for="passwordVerify"> 确 认 密 码 ： </label><input
type="text" id="passwordVerify" class="input" />
</div>
</fieldset>
<fieldset>
<legend>个人信息</legend>
<div class="dataArea frist">
<label for="nickname"> 昵 称 ： </label><input type="text"
id="nickname" />
</div>
<div class="dataArea">
<label for="email" class="hint"> 电子邮 件 ： </label><input
type="text" id="email" />
</div>
<div class="subArea">
<input type="submit" value="注册 " /> <input type="button"
value="返回" />
</div>
</fieldset>
</form>


</body>
</html>

　　7结构化表单布局2

<!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=utf-8" />
<title>结构化表单布局</title>
<style type="text/css">
	label{
		background: red;
		width: 110px;
		text-align: right;
		float: left;
	}
</style>
</head>

<body>
<form id="regForm">
<fieldset>
<legend>登陆信息</legend>
<div class="dataArea frist">
<label for="username"> 用户 名 ： </label><input type="text"
id="username" class="input" />
</div>
<div class="dataArea">
<label for="password"> 密 码 ： </label><input type="text"
id="password" class="input" />
</div>
<div class="dataArea">
<label for="passwordVerify"> 确 认 密 码 ： </label><input
type="text" id="passwordVerify" class="input" />
</div>
</fieldset>
<fieldset>
<legend>个人信息</legend>
<div class="dataArea frist">
<label for="nickname"> 昵 称 ： </label><input type="text"
id="nickname" />
</div>
<div class="dataArea">
<label for="email" class="hint"> 电子邮 件 ： </label><input
type="text" id="email" />
</div>
<div class="subArea">
<input type="submit" value="注册 " /> <input type="button"
value="返回" />
</div>
</fieldset>
</form>


</body>
</html>

　　

posted on 2019-03-31 09:17  柳志军  阅读(172)  评论(0)    收藏  举报