代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<div id="zong">
<form action="check.php？y=100" method="post">
<fieldset>
<legend>必须填写</legend>
<div class="bitian">
<label for="username">用户名：</label>
<input id="username" type="text" name="username" placeholder="用户输入不得少于4个字符"
autofocus
required
>
</div>
<div class="bitian">
<label for="password">密码：</label>
<input id="password" type="password" name="password" placeholder="请输入密码"
required>
</div>
<div class="bitian">
<label for="emil">邮箱：</label>
<input id="emil" type="" name="emil" placeholder="请输入邮箱地址"
required>
</div>
<div class="bitian">
<label for="tel">手机号</label>
<input type="text" name="tel" id="tel" placeholder="请输入手机号"
required>
</div>
</fieldset>
<div class="bitian">
<label for="">性别： </label>
<input id="remale" type="radio" name="gend" ><label for="male">男</label>
<input id="remale" type="radio" name="gend" ><label for="remale">女</label>
<input id="baomi" type="radio" name="gend" checked value="baomi" ><label for="baomi">保密</label>
</div>
<div class="bitian">
<label for="birthday">出生日期</label>
<input type="date" name="birthday" id="birthday" placeholder="请输入出生日期">
</div>
<div class="bitian">
<label for="">爱好体育项目：</label>
<input id="basketball" type="checkbox" name="hobby[]" value="篮球">
<label for="basketball">篮球</label>
<input id="foorball" type="checkbox" name="hobby[]" value="足球">
<label for="foorball">足球</label>
<input id="paiqiu" type="checkbox" name="hobby[]" value="排球">
<label for="paiqiu">排球</label>
</div>
<div class="bitian">
<label for="">所在省份</label>
<select id="shengfen" type="" name="shengfen" >
<option value="山东">山东</option>
<option value="河北">河北</option>
<option value="北京">北京</option>
<option value="河南">河南</option>
</select>
</div>
<button id="tijiao">提交</button>
</form>
</div>
<style >
* {
background-image: url(D:\phpstudy_pro\qtc20191440850\th.jpg);
}
#zong{
font-size: 25px;
width: 650px;
margin: 0 auto;
background-color: #98FB98;
padding: 10px;
}
#tijiao{
margin-left: 320px;
}
.bitian{
text-align: center;
}
#username,#password,#emil,#name,#tel,#birthday,#shengfen{
width: 261px;
height: 32px;
border: 1px solid #A6A6A6 ;
/*设置边框圆角*/
border-radius: 5px;
padding-left: 10px;
}
</style>
</body>
</html>
效果展示
扫一扫
2624
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
