（3）文件导入
attention：上传本地文件，需js代码配合。如果需要上传多个文件，给表单添加mulitiple属性。如果上传图片，给表单添加enctype属性。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文件导入</title> <style> </style> </head> <body> <form enctype="multipart/form-data"> <input type="file" id="myFile" multiple> <input type="submit"> </form> <img src="" id="myPhoto" alt="photo"> </body> <!--js代码展示--> <script> const myFile = document.getElementById('myFile') const myPhoto = document.getElementById('myPhoto') myFile.onchange = ()=>{ console.log(myFile.files) const file = myFile.files[0] const read = new FileReader() //转译文件地址 read.readAsDataURL(file) //文件加载完成就显示出来 read.onload = ()=>{ myPhoto.src = read.result } } </script> </html>
（4）图片按钮
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片按钮</title> <style> </style> </head> <body> <form> <input type="image" src="C:\Users\Gabrielle\Desktop\myPhoto.jpg" width=750 alt="myGimdong"> <!--src里面填写的是我电脑的本地图片绝对路径，请添加你自己的本地图片的绝对路径或者相对路径--> </form> </body> </html>
效果展示：例如你的csdn头像
（5）颜色选择
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>颜色选择</title> <style> </style> </head> <body> <form> <input type="color"> <input type="submit"> </form> </body> </html>
效果：
选择调色板pick颜色，或者手动输入RGB的值，都可以选择颜色。
