【HTML】表单+表格写一个注册界面

最新推荐文章于 2022-08-25 17:23:02 发布

一只快乐的野指针D

最新推荐文章于 2022-08-25 17:23:02 发布

阅读量1.1w

点赞数 10

文章标签： HTML

本文链接：https://blog.csdn.net/sjhdxpz/article/details/84638841

版权

蹭课蹭来了个作业

以上是注册界面的样式及要求。

有两个想法

一是设计外表格为8*2（八行两列），每个单元格又嵌套一个小表格（1*2），小表格第一列设置对齐方式为向右对齐，第二列向左对齐（因为图片中用户名，密码等右边是对齐的，而文本框这些左边也是对齐的）。接下来的代码就是用这个方法的。

二是外表格设计为1*2的，然后左右两列都嵌套一个8*2的内表格。对齐方式同上。

话不多说，直接上代码吧。

关于行内样式和内嵌样式混用这一点，因为我不记得某些属性对应的CSS属性了，所以emmmm.......

<!DOCTYPE html>
<html>
	<head>
		<title>作业--注册界面</title>
		<meta charset="utf-8">
		<style type="text/css">
			caption{
				font:30px 宋体 black;
			}
			table{
				margin:auto;
			}
			
			.table1{
				margin:0px 10px;
			}
			td{
				padding:5px;
			}
			input{
				border:solid 1px #436EEE;
			}
			#button{
				background-color:#71C671;
				border-radius:8px;
				text-align:center;
				height:40px;
				width:130px;
			}
			
			#right{
				align:right;
			}
			
			#left{
				align:left;
			}
			
		</style>
	</head>
	<body>
		<table>
			<caption align="center">注册</caption>
			<tr>
				<td colspan="2">	<!--第一行跨两列-->
					<table class="table1">	<!--table1用于跨两列的表格中，不能设置margin为auto,不然不能和别的文字向右对齐-->
						<tr>
							<td class="right">	<!--向右对齐-->
								用户名：
							</td>
							<td class="left">	<!--向左对齐-->
								<form>
									<!--最大输入长度为6，placeholder属性设置提示内容，当有输入时不显示提示，没有输入则显示，required属性表示此项为必填项-->
									<input type="text" maxlength="6" placeholder="请输入不超过6位的字符" required="required"/>
								</form>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td>
					<table>
						<tr>
							<td class="right"> 	
								密&nbsp;&nbsp;&nbsp;码：
							</td>
							<td class="left">
								<form>
									<input type="password" maxlength="16" placeholder="请输入6-16位的数字与字母" required="required"/>
								</form>
							</td>
						</tr>	
					</table>
				</td>
				<td>
					<table>
						<tr>
							<td class="right">
								真实姓名：
							</td>
							<td class="left">
								<form>
									<input type="text">
								</form>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td>
					<table>
						<tr>
							<td class="right">
								确认密码：
							</td>
							<td class="left">
								<form>
									<!--密码框-->
									<input type="password"/>
								</form>
							</td>
						</tr>
					</table>
				</td>
				<td>
					<table>
						<tr>
							<td class="right">
								手机号码：
							</td>
							<td class="left">
								<form>
									<!--pattern的值为正则表达式（好像是的吧），意思是输入11位0-9之间的数字-->
									<input type="text"  placeholder="请输入11位数字 "pattern="[0-9]{11}"/>
								</form>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<table class="table1">
						<tr>
							<td class="right">
								性&nbsp;&nbsp;&nbsp;别：
							</td>
							<td class="left">
								<form>
									<!--单选按钮，要求name的值要一样，不然就不是单选了-->
									<input type="radio" name="sex" value="男" />男
								</form>
							</td>
							<td>
								<form>
									<input type="radio" name="sex" value="女" />女
								</form>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td>
					<table>
						<tr>
							<td class="right">
								民&nbsp;&nbsp;&nbsp;族：
							</td>
							<td class="left">
								<form>
									<input type="text" list="nation" />
									<!--这个叫啥我忘了......，跟select是差不多的功能，但是和select不一样的是，如果选项中没有你要选的，可以自己在文本框中填写-->
									<datalist id="nation">
										<option>汉族</option>
										<option>壮族</option>
										<option>苗族</option>
										<option>彝族</option>
									</datalist>
								</form>
							</td>
						</tr>
					</table>
				</td>
				<td>
					<table>
						<tr>
							<td class="right">
								邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱：
							</td>
							<td class="left">
								<form>
									<input type="text" name="email" size="20"/>
								</form>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<table class="table1">
						<tr>
							<td align="right">
								爱&nbsp;&nbsp;&nbsp;好：
							</td>
							<td>
								<form>
									<input type="checkbox" name="basketball"/>篮球
									<input type="checkbox" name="football"/>足球
									<input type="checkbox" name="wushu"/>武术
									<input type="checkbox" name="swimming"/>游泳
								</form>
							</td>
						</tr>
					</table>
				</td>
				
			</tr>
			<tr>
				<td>
					<table>
						<tr>
							<td class="right">
								国&nbsp;&nbsp;&nbsp;家：
							</td>
							<td class="left">
								<form>
									<input type="text" list="country" />
									<datalist id="country">
									<option value="CN" selected="selected">中国</option>
									<option value="USA">美国</option>
									<option value="French">法国</option>
									<option value="Japan">日本</option>
									</datalist>
								</form>
							</td>
						</tr>
					</table>
				</td>
				<td>
					<table>
						<tr>
							<td class="right">
								城&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;市：
							</td>
							<td class="left">
								<form>
									<input type="text" list="city" />
									<datalist name="city">
									<option>上海</option>
									<option selected="selected">北京</option>
									<option>南京</option>
									<option>杭州</option>
									</datalist>
								</form>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr height="100">
				<td align="center" valign="bottom">
					<form>
						<input type="submit" id="button" value="立即注册" />
					</form>
				</td>
				<td align="center" valign="bottom">
					<form>
						<input type="reset" id="button" value="重置" />
					</form>
				</td>
			</tr>
		</table>
	</body>
</html>

我自己是不怎么给代码写注释的，然而这毕竟是放出来给别人看的，还是加点注释解释一下自己在干嘛吧。于是加了注释后，我运行了下打算截图，结果却变成了这样.....

我在style中定义的样式失效了？？？？黑人问号，然后我突然想起来CSS的注释是用 // 的，而我用的是HTML的，好吧，于是我就改过来了，结果还是一样。我就把style里的注释都删了，就得到了没写注释之前，正确的页面-_-

为什么会这样？？？？难道不能在style中写注释？？

好的，我知道原因了。style里的注释要用/* */。

------------------------------------------------------------------------------------------------------------------------------------------------------------------

看了下同学的布局和页面，然后，-_-我写的是什么垃圾页面啊......