2018.6.21 css的应用---注册表格

参与css样式表格的注册表单

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>注册信息</title>
	
	<style>
		#info{
			font-size: 20px;
			color: red;
		}
		
		#sub{
			font-family: "微软雅黑";
			font-size: 25px;
			color: aqua;
		}
		
		#res{
			font: "arial black";
			font-synthesis: ;
			font-size: 20px;
		}
	</style>
	
</head>

<body>
	<form action="#" method="post">
		<table align="center" width="700px" height="300px" border="1" cellspacing="" cellpadding="">
			<tr id="info">
				<th colspan="3">填写用户注册信息</th>
			</tr>
			<tr>
				<td>用户名:</td>
				<td width="6px"><input type="text" name="uname" placeholder="请输入名字" /></td>
				<td>登录用户名</td>
			</tr>
			<tr>
				<td>密码:</td>
				<td><input type="password" name="pwd" id="pwd" placeholder="请输入密码" />
					<td>登录密码,6个以上字母数字组合,不区分大小写</td>
			</tr>
			<tr>
				<td>注册邮箱</td>
				<td><input type="text" name="email" id="email" value="" /></td>
				<td>录入后不可修改</td>
			</tr>
			<tr>
				<td>性别</td>
				<td><input type="radio" name="sex" id="sex" value="man" />男<input type="radio" name="sex" id="sex" value="woman" />女 </td>
				<td>选择你的性别</td>
			</tr>
			<tr>
				<td>出生年月</td>
				<td>
					<select name="year">
						<option value="">2003</option>年
						<option>2004</option>
						<option>2005</option>
						<option>2006</option>
					</select>年
					<select name="month">
						<option value="">1</option>年
						<option>2</option>
						<option>3</option>
						<option>4</option>
					</select>月

				</td>
				<td>选择你的出生年月</td>
			</tr>
			<tr>
				<td>兴趣标签</td>
				<td align="center">
					<input type="checkbox" name="" id="" value="" />生活
					<input type="checkbox" name="" id="" value="" />娱乐
					<input type="checkbox" name="" id="" value="" />体育
					<br />
					<input type="checkbox" name="" id="" value="" />财经
					<input type="checkbox" name="" id="" value="" />时尚
					<input type="checkbox" name="" id="" value="" />新闻
				</td>
				<td>选择你感兴趣的标签</td>
			</tr>
			<tr>
				<td>头像</td>
				<td><input type="file" name="head" id="" value="浏览" /></td>
				<td>选取你的头像文件</td>
			</tr>
			<tr>
				<td>个人简介</td>
				<td>
					<textarea name="jieshao " rows="3" cols="30"></textarea>
				</td>
				<td>请添加你的个人简介情况</td>
			</tr>
		</table>
		<br />
		<fieldset>
			<legend>hhh</legend>
			<input type="button" name="" id="" value="表格" />
		</fieldset>
		<p align="center">
		<input  type="reset" name="res" id="res" value="取消" />
		<input  type="submit" name="sub" id="sub" value="提交" />
		</p>
	</form>
</body>
<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>注册信息</title>
		
		<style>
			#info{
				font-size: 20px;
				color: red;
			}
			
			#sub{
				font-family: "微软雅黑";
				font-size: 25px;
				color: aqua;
			}
			
			#res{
				font: "arial black";
				font-synthesis: ;
				font-size: 20px;
			}
		</style>
		
	</head>

	<body>
		<form action="#" method="post">
			<table align="center" width="700px" height="300px" border="1" cellspacing="" cellpadding="">
				<tr id="info">
					<th colspan="3">填写用户注册信息</th>
				</tr>
				<tr>
					<td>用户名:</td>
					<td width="6px"><input type="text" name="uname" placeholder="请输入名字" /></td>
					<td>登录用户名</td>
				</tr>
				<tr>
					<td>密码:</td>
					<td><input type="password" name="pwd" id="pwd" placeholder="请输入密码" />
						<td>登录密码,6个以上字母数字组合,不区分大小写</td>
				</tr>
				<tr>
					<td>注册邮箱</td>
					<td><input type="text" name="email" id="email" value="" /></td>
					<td>录入后不可修改</td>
				</tr>
				<tr>
					<td>性别</td>
					<td><input type="radio" name="sex" id="sex" value="man" />男<input type="radio" name="sex" id="sex" value="woman" />女 </td>
					<td>选择你的性别</td>
				</tr>
				<tr>
					<td>出生年月</td>
					<td>
						<select name="year">
							<option value="">2003</option>年
							<option>2004</option>
							<option>2005</option>
							<option>2006</option>
						</select>年
						<select name="month">
							<option value="">1</option>年
							<option>2</option>
							<option>3</option>
							<option>4</option>
						</select>月

					</td>
					<td>选择你的出生年月</td>
				</tr>
				<tr>
					<td>兴趣标签</td>
					<td align="center">
						<input type="checkbox" name="" id="" value="" />生活
						<input type="checkbox" name="" id="" value="" />娱乐
						<input type="checkbox" name="" id="" value="" />体育
						<br />
						<input type="checkbox" name="" id="" value="" />财经
						<input type="checkbox" name="" id="" value="" />时尚
						<input type="checkbox" name="" id="" value="" />新闻
					</td>
					<td>选择你感兴趣的标签</td>
				</tr>
				<tr>
					<td>头像</td>
					<td><input type="file" name="head" id="" value="浏览" /></td>
					<td>选取你的头像文件</td>
				</tr>
				<tr>
					<td>个人简介</td>
					<td>
						<textarea name="jieshao " rows="3" cols="30"></textarea>
					</td>
					<td>请添加你的个人简介情况</td>
				</tr>
			</table>
			<br />
			<fieldset>
				<legend>hhh</legend>
				<input type="button" name="" id="" value="表格" />
			</fieldset>
			<p align="center">
			<input  type="reset" name="res" id="res" value="取消" />
			<input  type="submit" name="sub" id="sub" value="提交" />
			</p>
		</form>
	</body>
</html>
原文地址:https://www.cnblogs.com/qichunlin/p/9175078.html