Web前端开发基础创新实践教程课件：制作个人信息修改页面.pptxVIP

Createapersonalinformationmodificationpage制作个人信息修改页面前端开发技术基础FundamentalsofWebFrontendTechnology

web前端技术基础1datalist控件datalist标签是HTML5中的一个新元素，用于定义输入字段（通常是文本输入框）的预定义选项列表。通常与input元素的list属性一起使用，以提供一组可能的选项供用户选择，从而改善用户体验并减少输入错误。labelfor=city选择城市:/labelinputtype=textid=citylist=citiesname=citydatalistid=citiesoptionvalue=北京optionvalue=上海optionvalue=广州optionvalue=深圳optionvalue=杭州/datalist

web前端技术基础1.2output输出控件output标签是HTML5中的一个元素，用于在表单中显示计算结果、用户输入的值、或者其他类型的输出。通常用于在表单中展示不同类型的输出信息，如计算结果、用户选择的值等。formoninput=x.value=parseInt(a.value)+parseInt(b.value)+parseInt(c.value)0inputtype=rangeid=avalue=50100+inputtype=numberid=bvalue=50+inputtype=numberid=cvalue=10=outputname=xfor=abc/output/formz

web前端技术基础经验小贴士datalist的选项应该是短、简洁的提示，用于帮助用户选择。不适合放置过于复杂或详细的信息。placeholder属性是提供简要提示的有用工具，但在使用时需要注意清晰度、颜色对比度、无障碍性和兼容性，以确保用户在填写表单时获得良好的体验。12

web前端技术基础任务实践本任务完成编辑个人信息页面的制作，页面包含用户名、职位、姓别、所在地区、个人介绍以及兴趣爱好几部分。个人信息所有空间放置在页面中一个大的块中，水平居中，设置阴影效果凸显编辑内容区域。右上角设置一个关闭按钮，用于实现关闭编辑块，整体效果如图所示。任务要求

谢谢观看FundamentalsofWebFrontendTechnology前端开发技术基础Createapersonalinformationmodificationpage