07_08表单Demo4

最新推荐文章于 2021-11-12 09:37:44 发布
原创最新推荐文章于 2021-11-12 09:37:44 发布 · 283 阅读
0 ·
CC 4.0 BY-SA版权
XHTML+CSS 专栏收录该内容
42 篇文章
订阅专栏
<!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>
</head>
<style type="text/css">
*{ margin: 0; padding: 0; }
table{ border-collapse:collapse;}
th{ font-weight:normal;}

form{ margin:50px auto; width: 600px; height: 625px; font-family:宋体;}
/*控制列宽*/
form table .col1{ width: 88px;}
form table .col2{ width: 251px;}
form table .col3{ width: 261px;}
/*控制行高*/
form table .row1{ height: 44px;}
form table .row2{ height: 48px;}
form table .row3{ height: 45px;}
form table .row4{ height: 41px;}
form table .row5{ height: 40px;}
form table .row6{ height: 51px;}
form table .row7{ height: 37px;}
form table .row8{ height: 45px;}
form table .row9{ height: 45px;}
form table .row10{ height: 64px;}
form table .row11{ height: 62px;}
form table .row12{ height: 43px;}
form table .row13{ height: 37px;}
form table .row14{ height: 23px;}
/*列样式*/
form table tr th{ font-size:14px; text-align:right; color:#727272; vertical-align:top;}
form table tr td{ font-size:12px; text-align:left; color:#464646; vertical-align:top;}
form table tr th .star{ font-size:5px; color:#ff3342;}
form table tr td input{ width: 223px; height: 27px; border: 1px solid #d7d7d7; font-size:11px; }
form table tr td select{ font-size:12px;height: 20px;}
form table tr td .area{ width: 65px; height: 20px;}
form table tr td .area_margin{ margin-left: 8px;}
form table tr td .inputradio{ width: 12px;height: 12px;}
form table tr td .inputradio_margin{ margin-left: 17px;}
form table tr td .birth_year{width: 54px; font-size:12px;}
form table tr td .birth_month{width: 40px; font-size:12px;}
form table tr td .birth_day{width: 40px; font-size:12px;}
form table tr td textarea{ width: 223px; height: 51px;}
form table tr td .zhengjian{width: 66px; }
form table tr td .explain{color:#1f81ca; border:none; padding-left: 25px;}
</style>
<body>
<form action="#">
	<table>
		<tbody>
			<tr>
				<th class="col1 row1"><span class="star">*</span>昵称：</th>
				<td class="col2"><input type="text" /></td>
				<td class="col3"><span class="explain">4-20个字符，支持中英文、数字、"_"或减号</span></td>
			</tr>
			<tr>
				<th class="row2">真实姓名：</th>
				<td><input type="text" /></td>
				<td>
                	<select name="namevisible" id="" class="explain">
                		<option value="">我关注的人可见</option>
                		<option value="" selected="selected">所有人可见</option>
                		<option value="">仅好友可见</option>
                	</select>
                </td>
			</tr>
			<tr>
				<th class="row3"><span class="star">*</span>所在地：</th>
				<td>
                	<select name="" id="" class="area">
                		<option value="" selected="selected">北京</option>
                		<option value="">上海</option>
                		<option value="">...</option>
                	</select><select name="" id="" class="area area_margin">
                		<option value="" selected="selected">北京</option>
                		<option value="">...</option>
                		<option value="">...</option>
                	</select>
                </td>
				<td></td>
			</tr>
			<tr>
				<th class="row4"><span class="star">*</span>性别：</th>
				<td><input type="radio"  value="man" name="sex" class="inputradio"/>男<input type="radio" value="woman" name="sex" class="inputradio inputradio_margin" />女</td>
				<td></td>
			</tr>
			<tr>
				<th class="row5">生日：</th>
				<td>
                	<select name="birth" id="" class="birth_year">
                		<option value=""  selected="selected">1990</option>
                		<option value="">..</option>
                		<option value="">..</option>
                	</select>
                    年
                	<select name="birth" id="" class="birth_month">
                		<option value="" selected="selected">01</option>
                		<option value="">..</option>
                		<option value="">..</option>
                	</select>
                    月
                	<select name="birth" id="" class="birth_day">
                		<option value="" selected="selected">01</option>
                		<option value="">..</option>
                		<option value="">..</option>
                	</select>
                    日
                </td>
				<td>
                	<select name="birthvisible" id="" class="explain">
                		<option value="" >好友可见</option>
                		<option value="">所有人可见</option>
                		<option value="" selected="selected">保密</option>
                	</select>
                </td>
			</tr>
			<tr>
				<th class="row6">博客地址：</th>
				<td><input type="text" /></td>
				<td>
                	<select name="blogvisible" id="" class="explain">
                		<option value="" >我关注的人可见</option>
                		<option value="" selected="selected">所有人可见</option>
                		<option value="">仅好友可见</option>
                	</select>
                </td>
			</tr>
			<tr>
				<th class="row7">常用邮箱：</th>
				<td><input type="text"></td>
				<td>
                	<select name="mailvisible" id="" class="explain">
                		<option value="" selected="selected">我关注的人可见</option>
                		<option value="">所有人可见</option>
                		<option value="">仅好友可见</option>
                	</select>
                </td>
			</tr>
			<tr>
				<th class="row8">QQ：</th>
				<td><input type="text /"></td>
				<td>
                	<select name="QQvisible" id="" class="explain">
                		<option value="" selected="selected">我关注的人可见</option>
                		<option value="">所有人可见</option>
                		<option value="">仅好友可见</option>
                	</select>
                </td>
			</tr>
			<tr>
				<th class="row9">MSN：</th>
				<td><input type="text" /></td>
				<td></td>
			</tr>
			<tr>
				<th class="row10">一句话介绍：</th>
				<td>
                	<textarea name="" id="" cols="30" rows="10"></textarea>
                </td>
				<td></td>
			</tr>
			<tr>
				<td class="row11"></td>
				<td>
                	............................
                    <br />
                    以下信息，可作为通过客服取回账号的依据
                </td>
				<td></td>
			</tr>
			<tr>
				<th class="row12">证件类型：</th>
				<td>
                	<select name="" id="" class="zhengjian">
                		<option value="" selected="selected">身份证</option>
                		<option value="">护照</option>
                		<option value="">手机号</option>
                	</select>
                </td>
				<td></td>
			</tr>
			<tr>
				<th class="row13">证件号码：</th>
				<td><input type="text" /></td>
				<td></td>
			</tr>
			<tr>
				<td class="row14"></td>
				<td><img src="img/reg.png" alt="" /></td>
				<td></td>
			</tr>
		</tbody>
	</table>
</form>
</body>
</html>