- 石家庄邮电职业技术学院专属活动第2期：【校园前端学习笔记】主题征文
- 石家庄邮电职业技术学院社区
学号后四位：0233（必填）
邀请人ID：（非必填）
调查问卷
最终效果
实现计划
- 设置问卷样本轮廓
- 为轮廓添加css样式
- 实现过程
- 创建form表单标签。
- 设置第一个li为姓名，文本框位于右侧；属性为文本属性；默认值为张三；最多输入6个字符。
<li><label>姓名：</label>input class="right" type="text" value="张三" maxlength="6"/></li>3.设置第二个li为出生日期，文本框位于右侧；属性为日期属性。
<li><label>出生日期：</label><input class="right" type="date"/></li>4.设置第三个li为性别，男和女的name相同，但设置其id不同，便可实现性别的单选，并且点击文字也可选择；设置其属性为radio;使其变成可选的。
<li><label>性别:</label><div class="right"><input type="radio" name="female" id="male"/><label for="male">男<input type="radio" name="female" id="female"/><label for="female">女</label for="female"></label for="male"></div>
</li>5.设置第四个li为体重，位于右侧；为number属性只可输入数字最小值为10，最大值为100。
<li><label>体重</label><div class="right"><input type="number" min="10" max="100" />kg</div></li>6.设置第五个li为兴趣，位于右测可多选。
<li><label>兴趣：</label><div class="right"><input type="checkbox" />唱歌<input type="checkbox" />跳舞<input type="checkbox" />游泳</div></li>7.设置第六个li为喜欢的颜色，位置在右侧；属性为color，初始颜色是#ff0000.
<li><label>喜欢的颜色：</label><input class="right" type="color" value="#ff0000" /></li>8.设置第七个li为喜欢的上传头像，位置在右侧属性为file。
<li><label>上传头像：</label><input class="right" type="file"/><div></div>
</li>9.设置第八个li为您的建议，是一个文本域；设置每行最多字数和列数。
<li class="advise"><label>您的建议：</label><textarea name="opinion" cols="30" rows="10"></textarea></li>10.设置提交按钮。
<li class="footer"><input type="submit"/></li>css设置：
- 设置from的宽和边距，设置边框颜色和透明度，设置圆角：border-radius: 50px;设置背景颜色。
- 选中所有ul和li，使填充和边距为0.无属性值
- 选中ul下的li使其高为50.
- Class为right的宽为180px；
- 选择具有焦点的输入元素，溢出时会隐藏。
- From中的footer中的文字位于中间。
- 提交按钮设置宽高边距和鼠标悬于上方时的变化。
- 设置class的高。
- 设置textarea的宽和高。
<style>form{width: 343px;margin: 0 auto;padding: 30px;border: 1px solid rgba(0,0,0,0.2);border-radius: 50px;background: #eee;}ul,li{padding: 0;margin: 0;list-style: none;}ul li{height: 50px;}.right{float: right;width: 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;}</style>项目总结
- 表单中各种标签的运用。
- 为其添加css样式。
