学号后四位：0204（必填）
邀请人ID：（非必填）
H5 C3 简易样式表单
## CSS样式
```css
form{
width: 343px;
margin: 0 auto;
padding: 30px;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 5px;
background: #eee;
} /*form表格美化 宽 外边距 内边距 边框线 圆角边框 背景色*/
ul,
li{
padding: 0;
margin: 0;
list-style: none;
} /*所有ul和li元素的样式 内边距 外边距 列表项前无标记*/
ul li{
height: 50px;
} /* ul下的li元素 */
.right{
float: right;
width: 180px;
}/*右浮动 宽180px*/
input:focus{
background-color: rgba(0, 0, 0, 0.2);
overflow: hidden;
}
form .footer{
text-align: center;
}/*居中*/
input[type=submit]{
width: 100px;
height: 30px;
margin-top: 10px;
cursor: pointer;
}
.advise{
height: 150px;
}
textarea{
width: 100%;
height: 100px;
}
```HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表单</title>
</head>
<body>
<form action="#">
<ul>
<li>
<label>姓名：</label>
<input class="right" type="text" value="张三" maxlength="6">
</li>
<li>
<label>出生日期：</label>
<input class="right" type="date">
</li>
<li>
<label>性别：</label>
<div class="right">
<input type="radio" name="male" id="male">
<label for="male">男</label>
<input type="radio" name="male" id="female">
<label for="female">女</label>
</div>
</li>
<li>
<label for="">体重：</label>
<div class="right">
<input type="number" min="10" max="100">kg
</div>
</li>
<li>
<label for="">兴趣：</label>
<div class="right">
<input type="checkbox">唱歌
<input type="checkbox">跳舞
<input type="checkbox">游泳
</div>
</li>
<li>
<label>喜欢的颜色：</label>
<input class="right" type="color" value="#ff0000">
</li>
<li>
<label>上传头像：</label>
<input class="right" type="file">
</li>
<li class="advise">
<label>你的建议：</label>
<textarea name="opinion"cols="30" rows="10"></textarea>
</li>
<li class="footer"></li>
<input type="submit">
</ul>
</form>
</body>
</html>
458
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
