实例
<!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 type="text/css">
#submit,#reset{
height: 25px;
width: 80px;
border-radius:5px;
background:orange;
color: white;
box-shadow: 2px 2px 1px #CCCCCC;
}
form table{
border-bottom-left-radius: 80px;
border-bottom-right-radius: 25px;
border-top-left-radius: 25px;
border-top-right-radius: 80px;
}
</style>
</head>
<body>
<form action="#" method="post">
<table border="0" cellspacing="0" cellpadding="10" align="center"style="background: skyblue;"width="500">
<caption><h1>用户登录</h1> </caption>
<tr>
<td colspan="2"><hr width="420"></td>
</tr>
<tr>
<td >
<label for="phone" > 邮箱：</label>
</td>
<td>
<input type="text" name="" value="" placeholder="请输入账户名或手机号" id="phone" size="50" />
</td>
</tr>
<tr>
<td >
<label for="pwd">密码：</label>
</td>
<td>
<input type="password" name="pwd" value="" placeholder="字母和数字的组合至少16个字符" id="pwd" size="50"/>
</td>
</tr>
<tr>
<td >
性别：
</td>
<td>
<label ><input type="radio" name="sex" id="boy" value="boy" />男</label>
<label for="gril"><input type="radio" name="sex" id="gril" value="gril" />女</label>
<label><input type="radio" name="sex" id="secrecy" value="secrecy" checked="checked" />保密</label>
</td>
</tr>
<tr>
<td >
兴趣：
</td>
<td>
<label ><input type="checkbox" name="hobby[]" id="boy" value="html"/>HTML</label>
<label ><input type="checkbox" name="hobby[]" id="gril" value="JavaScript" />JavaScript</label>
<label><input type="checkbox" name="hobby[]" id="sex" value="PHP" />PHP</label>
<label><input type="checkbox" name="hobby[]" id="sex" value="MYSQL" />MYSQL</label>
</td>
</tr>
<tr>
<td >
级别：
</td>
<td>
<select name="level">
<option value="1" selected="selected">小白</option>
<option value="2">菜鸟</option>
<option value="3">精通</option>
<option value="4">大神</option>
</select>
</td>
</tr>
<tr>
<td >
头像：
</td>
<td>
<img src="http://img1.3lian.com/gif/more/11/201211/71c7ff3d967016c80a4667c0b169f62a.jpg" alt="头像预览" width="40" />
<input type="file" name="img" id="img" value="" accept="image/*"/>
</td>
</tr>
<tr>
<td >个人简介</td>
<td>
<textarea name="info" rows="10" cols="50" placeholder="基本情况简介"></textarea>
</td>
</tr>
<tr>
<td colspan="2"><hr></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="submit" id="submit" value="提交" />
<input type="reset" name="reset" id="reset" value="重置" />
</td>
</tr>
</table>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
