二、实验内容
- 创建一个表单，包含下面的组建元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>copy</title>
<style>
#app{
font-size: 40px;
color: blue;
}
#a1{
color: red;
}
</style>
</head>
<body>
<form action="http://localhost:8080/jd/register">
<span id="app">手机品牌调查表</span>
<br>
请输入您的姓名: <input type="text">
<br>
性别: <input type="radio" name="sex" value="1" checked> 男
<input type="radio" name="sex" value="2"> 女
<br>
邮箱: <input type="text">
<br>
1.您使用过多少部手机:
<select>
<option>一部</option>
<option>两部</option>
<option>三部</option>
<option>四部</option>
<option>五部及以上</option>
</select>
<br>
<span id="a1">
2.最早什么事时候开始使用手机的:
</span>
<input type="date">
<br>
<span id="a1">
3.如果您更换手机,你会选择哪部品牌
</span>
<br>
<input type="checkbox" name="pingpai"> 苹果
<input type="checkbox" name="pingpai"> 华为
<input type="checkbox" name="pingpai"> HTC
<input type="checkbox" name="pingpai"> OPPO
<input type="checkbox" name="pingpai"> 三星
<input type="checkbox" name="pingpai"> 摩托罗拉
<br>
3.如果您更换手机,您将关注下列哪些功能是否具备?
<br>
<input type="checkbox" name="gongneng"> 影视音乐
<input type="checkbox" name="gongneng"> 游戏娱乐
<input type="checkbox" name="gongneng"> 摄像功能
<br>
<input type="checkbox" name="gongneng"> 信息存储容量
<input type="checkbox" name="gongneng"> 机型外观
<input type="checkbox" name="gongneng"> 电池使用时间
<br>
4.请您描述以下在您心目中一部理想的手机是哪种类型
<br>
<textarea rows="5" cols="30"></textarea>
<br>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</body>
</html>
- 完成多个图片文件上传功能。显示图片预览（小图）。界面可以参考下面（样式不一定和参考界面一样，下面的界面用到了部分CSS，本实验不要求强制使用）:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>copy</title>
</head>
<body>
<!--img标签用于显示预览图片-->
<img :src="imageUrl" alt="" style="width: 300px;height: 80px;border: 1px dashed #ccc">
<div>
<!--//input的name值是接口中的参数名-->
<input type="file" name="pic" ref="imgInput" @change="saveSrc()">
</div>
</body>
</html>
或者用Vue.js来实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>copy</title>
<script src="caopeng/vue-2.4.0.js"></script>
</head>
<body>
<div class="container" id="app">
<form>
<div class="form-group">
<label for="exampleInputFile">图片</label>
<input type="file" id="exampleInputFile" @change="show($event)"><br>
<input type="button" v-show="isScan" @click="scan" value="预览">
<img :src="src" v-if="isShow">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
isShow:false,
src:"",
isScan:false
},
methods: {
show(e){
this.isScan = true;
let file = e.currentTarget.files[0];
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = ()=>{
this.src = reader.result;
}
},
scan(){
this.isShow = true;
}
}
});
</script>
</body>
</html>
664
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
