修改个人信息页面设计-优快云博客

本文链接：https://blog.youkuaiyun.com/Andone_hsx/article/details/54003092

这是一个关于修改个人信息页面的设计案例，展示了如何使用HTML、CSS等技术来构建一个完整的表单界面，并包含各种输入字段如文本框、单选按钮、下拉列表等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html>
		<head>
			<title>Dome</title>
			<meta charset="utf-8">
		</head>
		<body>
			<h1>修改个人信息</h1>
			<form method="post">
			 <table border="1px" cellspacing="0px" cellpadding="5px" width="700px" height="400px">
					<tr>
						<td width="125px">姓名：</td>
						<td width="326px"><input type="text" name="txtUsername" value="Mary"></td>
						<td rowspan="7" valign="top" width="247px">
							<details>
								<summary>各项<mark>技能</mark>指数</summary>
									<ul type="none">
										<li>HTML：<meter min="0" max="100" value="100"></meter></li>
										<li>CSS3：<meter min="0" max="100" value="90"></meter></li>
										<li>AJAX：<meter min="0" max="100" value="50"></meter></li>
									</ul>
							</details>
						</td>
					</tr>
					<tr>
						<td>性别：</td>
						<td><input type="radio" name="rdoGender" value="1" id="Female" checked><label for="Female">女士</label>
						<input type="radio" name="rdoGender" value="0" id="Male"><label for="Male">男士</label></td>
					</tr>
					<tr>
						<td>学历：</td>
						<td>
							<select name="selEdu">
								<option value="-1">其他</option>
								<option value="1">专科</option>
								<option value="2">本科</option>
								<option value="3">硕士及以上</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>意向工作城市：</td>
						<td>
							<select  name="selCity" size="5" multiple>
								<option value="1">北京</option>
								<option value="2">上海</option>
								<option value="3">南京</option>
								<option value="4">深圳</option>
							</select>
						</td>
					</tr>
					<tr>
						<td valign="top">个人描述：</td>
						<td>
							<textarea cols="30" rows="5"></textarea>
						</td>
					</tr>
					<tr>
						<td></td>
						<td><input type="checkbox" name="chkInfo" id="Info"><label for="Info">不要公开我的个人信息</label></td>
					</tr>
					<tr>
						<td></td>
						<td><input type="submit" value="保存">
								<input type="reset" value="重填">
						</td>
					</tr>
			 </table>
			</form>
		</body>
</html>

Html练习三