0
点赞
收藏
分享

微信扫一扫

html之b站pink老师注册页面案例

mjjackey 2022-04-22 阅读 28
html

看完了html部分,根据课程案例图片敲了敲代码
最后效果如下:
在这里插入图片描述
在这里插入图片描述

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h3>青春不常在,抓紧谈恋爱</h3>
		<table>
			<tr>
				<td>性别</td>
				<td>
					<form>
						<input name="sex" type="radio" id="nan"/><label for="nan"></label>
						<!--input中的id名需要和label中得for一样,这样用户在选择时,即使鼠标是放在男女上也可以进行选择-->
						<input name="sex" type="radio" id="nv"/><label for="nan"></label>
					</form>
				</td>
			</tr>
			<tr>
				<td>生日</td>
				<td>
					<form>
						<select name="year">
							<option value="--请选择年--" selected="selected">--请选择年--</option>
							<option value="2000">2000</option>
							<option value="1999">1998</option>
							<option value="1998">1999</option>
						</select>
						<select name="month">
							<option value="--请选择月--" selected="selected">--请选择月--</option>
							<option value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>
							<option value="4">4</option>
							<option value="5">5</option>
							<option value="6">6</option>
							<option value="7">7</option>
							<option value="8">8</option>
							<option value="9">9</option>
							<option value="10">10</option>
							<option value="11">11</option>
							<option value="12">12</option>
						</select>
						<select name="day">
							<option value="--请选择日--" selected="selected">--请选择日--</option>
							<option value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>
							<option value="4">4</option>
							<option value="5">5</option>
						</select>
					</form>
				</td>
			</tr>
			<tr>
				<td>所在地区</td>
				<td>
					<form>
						<input name="diqu" type="text" value="北京斯密达"/>
					</form>
				</td>
			</tr>
			<tr>
				<td>婚姻状况</td>
				<td>
					<form>
						
						<input name="hyzk" type="radio" checked="checked"/>未婚
						<input name="hyzk" type="radio"/>已婚
						<input name="hyzk" type="radio"/>离婚
					</form>
				</td>
			</tr>
			<tr>
				<td>学历</td>
				<td>
					<form>
						<input name="xueli" type="text" value="幼儿园"/>
					</form>
				</td>
			</tr>
			<tr>
				<td>喜欢的类型</td>
				<td>
					<form >
						<input name="style" type="checkbox" />妩媚的
						<input name="style" type="checkbox" />可爱的
						<input name="style" type="checkbox" />小鲜肉
						<input name="style" type="checkbox" />老腊肉
						<input name="style" type="checkbox" />都喜欢
					</form>
				</td>
			</tr>
			<tr>
				<td>自我介绍</td>
				<td>
					<form>
						<textarea name="zwjs" cols="30" rows="2">自我介绍</textarea>
						<!--文本域中的提示文字不能使用value属性,而是直接写在textarea标签的开头和结尾中间。-->
					</form>
				</td>
			</tr>
			<tr>
				<td></td>
				<td>
					<form>
						<input name="tijiao" type="submit" value="免费注册" />
					</form>
				</td>
			</tr>
			<tr>
				<td></td>
				<td>
					<form>
						<input name="tongyi" type="checkbox" checked="checked" />我同意注册条款和会议加入条件
					</form>
				</td>
			</tr>
			<tr>
				<td></td>
				<td>
					<a href="#">我是会员,立即登录
				</td>
			</tr>
			<tr>
				<td></td>
				<td>
					<h2>我承诺</h2>
					<ul>
						<li>年满18岁</li>
						<li>抱着严肃的态度</li>
						<li>真诚寻找另一半</li>
					</ul>
				</td>
			</tr>
		</table>
	</body>
</html>

举报

相关推荐

0 条评论