目录一、先晒一下我的“凑活能用”的代码二、这些控件到底是干啥的大白话讲清楚三、写的时候踩的小坑小技巧四、碎碎念收尾作为刚学前端的新手表单这东西说难不难说简单吧细节还挺多的。今天就拿我写的这个“kun的独家登陆页”唠唠表单入门那点事儿~一、先晒一下我的“凑活能用”的代码!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title表单练习/title /head body h1kun的独家网页登陆/h1 姓名input name账号 typetextvalue请输入您的账号br 密码input name密码 typebasswordvalue请输入您的密码br kun爱好br input name坤的爱好 typeradio value唱歌唱歌 input name坤的爱好 typeradio value作曲作曲 input name坤的爱好 typeradio value滑冰滑冰br kun喜欢的颜色br input name颜色 typecheckbox value蓝色 蓝色 input name颜色 typecheckbox value金色 金色 input name颜色 typecheckbox value彩色 彩色br 超话截图input name选择文件 typefilebr input name提交登录 typesubmit input name重置表单 typereset /body /html展示效果二、这些控件到底是干啥的大白话讲清楚文本框密码框就是让用户打字的地方呗。文本框输入账号啥的明明白白密码框就是打码的适合藏小秘密~单选框只能选一个就像选kun的爱好唱歌、作曲、滑冰三选一选了一个另一个就自动取消了关键是 name 得一样不然就变成多选了。复选框可以随便选kun喜欢的颜色蓝色金色彩色全选也没人管你主打一个自由。文件上传让用户传图片/文件用的比如我这里传超话截图浏览器会自动弹出文件选择窗口。三、写的时候踩的小坑小技巧一开始忘了加 form 标签结果发现点提交啥反应都没有后来才知道所有表单控件都得放这个“大盒子”里。单选框的 name 属性一定要一样不然会变成三个都能选的bug白折腾半天。提示文字别用 value 用 placeholder value 会变成用户提交的内容而 placeholder 只是个灰色提示用户一打字就消失更实用。想点文字也能选单选/复选套个 label 标签就行体验直接拉满不然只能点那个小圈用户体验太差了。四、碎碎念收尾表单这东西看着简单其实是网页交互的基础登录、注册、评论全靠它。我这个练习虽然简陋但把核心逻辑都摸到了接下来打算给它加点CSS整个好看的样式不然原生的表单实在太丑了哈哈。对了有没有同是前端新手的小伙伴一起唠唠学习进度