使用HTML和CSS创建个人信息提交表单

只会切图的程序猿

已于 2023-12-12 15:58:25 修改

阅读量724

点赞数 8

文章标签： html5 css 前端

于 2023-12-12 15:54:38 首次发布

本文链接：https://blog.csdn.net/qq_63825941/article/details/134951800

版权

  body{
				  background-color: antiquewhite;
			  }
			input{
				text-align: left;
			}
			.t{
				text-align: right;
			}
			.c1{ border: 0px solid black;
			background-color: aliceblue;
				width: 510px;
				height: 380px;
				border-radius: 6.5%;
			}
			h2{
				
			}
			#reset{
				margin-left: 100px;
			}
			center{
				margin-top: 15px;
			}
			#reset, #submit{
				background-color: plum;
				color: white;
				border: 0;
				border-radius: 9.9%;
				width: 56px;
				height: 25px;
				padding-left: 12px;
			}
			td{
				color: grey;
			}

	<body>
		<center>
			<div class="c1">
				<center>
					<h2>注册</h2>
					<table border="0px" cellspacing="0">
						<form>
							<tr>
								<td class="t">
									名字：
								</td>
								<td><input type="text" name="username" /></td>

							</tr>
							<tr>
								<td class="t">
									姓氏：
								</td>
								<td><input type="text" name="lastname" /></td>
							</tr>
							<tr>
								<td class="t">
									登录名：
								</td>
								<td><input type="text" name="username" />(可包含a-z,0-9和下划线)</td>

							</tr>
							<tr>
								<td class="t">
									密码：
								</td>
								<td><input type="password" name="password" />(至少包含6个字符)</td>

							</tr>
							<tr>
								<td class="t">
									再次输入密码：
								</td>
								<td><input type="password" name="password" /></td>

							</tr>
							<tr>
								<td class="t">
									电子邮箱：
								</td>
								<td><input type="email" name="email" />(必须包含@字符)</td>


							</tr>
							<tr>
								<td class="t">
									性别：
								</td>
								<td>
									<input type="radio" name="sex" value="man" />男
									<input type="radio" name="sex" value="woman" />女
								</td>
							</tr>
							<tr>
								<td class="t">
									头像：
								</td>
								<td>
									<input type="file" value="浏览" />
								</td>
							</tr>
							<tr>
								<td class="t">
									爱好：
								</td>
								<td>
									<input type="checkbox" name="chex" value="sport">运动
									<input type="checkbox" name="chex" value="chat">聊天
									<input type="checkbox" name="chex" value="games">玩游戏

								</td>
							</tr>
							<tr>
								<td class="t">出生日期：</td>
								<td>
									<input type="text" name="nian" style="width: 30px ;" />年
									<select value="month">
										<option>选择月份</option>
										<option>1月</option>
										<option>2月</option>
										<option>3月</option>
										<option>4月</option>
										<option>5月</option>
										<option>5月</option>
										<option>6月</option>
										<option>7月</option>
										
									</select>
									<input type="text" name="day" style="width: 20px;" />日
								</td>



							</tr>
							<tr>
								<td colspan="2">
									<center>
										<input type="submit" value="提交" id="submit" />
										<input type="reset" value="重填" id="reset"/>
									</center>
								</td>
							</tr>
						</form>
					</table>
				</center>
			</div>
		</center>


	</body>