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>
