zhensolid
/
Python-100-Days


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单的例子 - 注册</title>
		<style>
			/* 属性选择器 */
			/* form input 后代选择器 */
			/* form>input 儿子选择器 */
			form input[type=text], form input[type=password] {
				border: none;
				outline: none;
				border-bottom: 1px dotted darkgray;
			}
			/* form~input 兄弟选择器 */
			/* form+input 相邻兄弟选择器 */
			form~p>input[type=text] {
				outline: none;
				border: 1px solid lightgray;
			}
			form~p>input[type=text]:focus {
				outline: none;
				border: 1px solid #00FFFF;
			}
			.button {
				display: inline-block;
				color: white;
				background-color: red;
				border: none;
				width: 120px;
				height: 40px;
			}
		</style>
	</head>
	<body>
		<figure>
			<img src="images/bok-choi.jpg" alt="">
			<figcaption>图1. 这是一个图片</figcaption>
		</figure>
		<form action="" method="post" enctype="multipart/form-data">
			<fieldset>
				<legend>用户基本信息</legend>
				<p>
					用户名:
					<input type="text" name="username" placeholder="用户名由6-20个字符构成" required>
				</p>
				<p>
					密码：
					<input type="password" name="password" required>
				</p>
				<p>
					确认密码：
					<input type="password" name="repassword" required>
				</p>
				<p>
					性别：
					<input type="radio" name="sex" value="1" checked>男
					<input type="radio" name="sex" value="0">女
				</p>
				<p>
					爱好：
					<input type="checkbox" name="fav" value="阅读" checked>阅读
					<input type="checkbox" name="fav" value="旅游">旅游
					<input type="checkbox" name="fav" value="美食" checked>美食
					<input type="checkbox" name="fav" value="运动">运动
				</p>
				<p>
					省份：
					<select name="province">
						<option value="110000">北京</option>
						<option value="120000">天津</option>
						<option value="310000">上海</option>
						<option value="500000">重庆</option>
						<option value="510000" selected>四川省</option>
					</select>
				</p>
				<p>
					生日：
					<input type="date" name="birthday">
				</p>
			</fieldset>
			<fieldset id="">
				<legend>用户附加信息</legend>
				<p>
					邮箱：
					<input type="email" name="email" required>
				</p>
				<p>
					头像：
					<input type="file" name="photo">
				</p>
				<p>
					自我介绍：
					<textarea cols="30" rows="10" name="intro"></textarea>
				</p>
				<p>
					<input class="button" type="submit" value="确认注册">
					<input class="button" type="reset" value="重新填写">
				</p>
			</fieldset>
		</form>
		<p>
			<input type="text">
		</p>
	</body>
</html>