HTML表单提交实现右对齐无需CSS和DIV

最新推荐文章于 2023-08-02 10:48:02 发布

必看吧

最新推荐文章于 2023-08-02 10:48:02 发布

阅读量4.9k

点赞数 10

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/qq_43665697/article/details/98167339

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

对于刚学HTML的同学刚开始利用表格也可以实现表单右对齐

效果如下：

代码如下(用了css调了下大小整体布局是表格实现的):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>会员注册</title>
		<style type="text/css">
			.a {
				width: 220px;
				
			}
			.b{
				width: 220px;
				height: 120px;
			}
		</style>
	</head>
	<body bgcolor="antiquewhite">
 
		<form action="">
			<h2 align="center">会员注册</h2>
			<table align="center">
				<tr>
					<td align="right">用户名：</td>
					<td><input type="text" name="username" value="" class="a"></td>
					<td>只能以$_或字母开头6-16位字母或数字组合</td>
				</tr>
				<tr>
					<td align="right">密码：</td>
					<td><input type="password" name="password" class="a"></td>
					<td>必须以大写字母开头6-16位字母或数字组合</td>
				</tr>
				<tr>
					<td align="right">确认密码：</td>
					<td><input type="password" name="passwords" class="a"></td>
					<td>请再次确认密码</td>
				</tr>
				<tr>
					<td align="right">姓名：</td>
					<td><input type="text" name="name" value="" class="a"></td>
				</tr>
				<tr>
					<td align="right">年龄：</td>
					<td><input type="text" name="name" value="" class="a"></td>
				</tr>
				<tr>
					<td align="right">性别：</td>
					<td><input type="radio" name="sex" value="m">男<input type="radio" name="sex" value="w">女</td>
				</tr>
				<tr>
					<td align="right">身份证号：</td>
					<td><input type="text" name="idcard" value="" class="a"></td>
					<td>请输入正确的身份证账号,以便核实您的身份</td>
				</tr>
				<tr>
					<td align="right">出生日期：</td>
					<td><input type="date" name="date" value="" class="a"></td>
				</tr>
				<tr>
					<td align="right">居住地址：</td>
					<td>
						<select name="city">
							<option value="" selected hidden>---城市---</option>
							<option value="tj">天津</option>
							<option value="bj">北京</option>
							<option value="bd">保定</option>
						</select>
						<select name="county">
							<option value="" selected hidden>---区县---</option>
							<option value="tj">安新</option>
							<option value="bj">雄县</option>
							<option value="bd">容城</option>
						</select>
 
					</td>
					<td><input type="text" name="address" placeholder="请输入具体地址" class="a"></td>
				</tr>
				<tr>
					<td align="right">上传头像：</td>
					<td><input type="file" name="head" value=""></td>
				</tr>
				<tr>
					<td align="right">个人简介：</td>
					<td>
						<textarea rows="" cols="" class="b" >1</textarea></td>
				</tr>
				<tr>
					<td></td>
	                <td><button type="submit">提交</button>&nbsp;&nbsp;&nbsp; <input type="reset" value="重置" /></td>
				</tr>
 
			</table>
		</form>
 
	</body>
</html>