第12篇：表单基础控件

第12篇表单基础控件表单是网页与用户交互的桥梁——注册、登录、搜索、留言都离不开表单。本篇从基础的input控件开始逐步掌握表单的核心构建块。学习目标掌握form标签及常用属性action、method理解input各种type的用法和差异学会正确使用label关联表单控件掌握单选框和复选框的用法了解placeholder的正确使用方式核心知识点一、表单容器form所有表单控件都应该包裹在form标签中。formaction/submitmethodPOST!-- 表单控件放在这里 --inputtypetextnameusernamebuttontypesubmit提交/button/formform核心属性属性作用示例action数据提交的 URL 地址action/registermethod提交方式methodGET/methodPOSTenctype编码方式上传文件时必需enctypemultipart/form-datatarget提交后的页面打开方式target_blankGET vs POSTGETPOST数据位置URL 参数中可见请求体中不可见数据长度有限制约 2KB无限制安全性低数据暴露在 URL较高用途搜索、筛选注册、登录、提交数据!-- GET搜索表单数据在 URL 中可见--formaction/searchmethodGETinputtypesearchnameqplaceholder搜索关键词buttontypesubmit搜索/button/form!-- POST注册表单数据在请求体中--formaction/registermethodPOSTinputtypeemailnameemailinputtypepasswordnamepasswordbuttontypesubmit注册/button/form二、input类型大全input是表单中最灵活的控件通过type属性变换形态。文本类输入!-- 单行文本默认--inputtypetextnameusernameplaceholder请输入用户名!-- 密码输入内容显示为圆点--inputtypepasswordnamepwdplaceholder请输入密码!-- 邮箱移动端会显示 符号快捷输入--inputtypeemailnameemailplaceholderexampleemail.com!-- 搜索部分浏览器会显示搜索图标和清除按钮--inputtypesearchnamequeryplaceholder搜索...!-- URL移动端会显示 .com / .cn 快捷输入--inputtypeurlnamewebsiteplaceholderhttps://example.com!-- 电话移动端会显示数字键盘--inputtypetelnamephoneplaceholder138-0000-0000数字类输入!-- 数字输入带增减按钮--inputtypenumbernameagemin1max120value18!-- 范围滑块 --inputtyperangenamevolumemin0max100value50日期时间类输入!-- 日期选择器 --inputtypedatenamebirthday!-- 时间选择器 --inputtypetimenamemeeting-time!-- 日期时间 --inputtypedatetime-localnameappointment!-- 月份选择器 --inputtypemonthnameexpiry-month!-- 星期选择器 --inputtypeweeknameholiday-week兼容性提示日期时间类输入在桌面端 Safari 和部分旧浏览器中支持不佳。实际项目中通常会使用日期选择组件库。选择类输入!-- 单选框radio一组中只能选一个 --inputtyperadionamegendervaluemaleidmalelabelformale男/labelinputtyperadionamegendervaluefemaleidfemalelabelforfemale女/label!-- 复选框checkbox可以同时选多个 --inputtypecheckboxnamehobbyvaluereadingidhobby-readlabelforhobby-read阅读/labelinputtypecheckboxnamehobbyvaluemusicidhobby-musiclabelforhobby-music音乐/labelinputtypecheckboxnamehobbyvaluesportsidhobby-sportslabelforhobby-sports运动/label其他输入类型!-- 颜色选择器 --inputtypecolornametheme-colorvalue#1976d2!-- 文件上传 --inputtypefilenameavataracceptimage/*!-- 隐藏字段用户不可见提交时随表单发送--inputtypehiddennameuser-idvalue12345三、label标签正确关联控件label为表单控件提供说明文字点击label可以聚焦/选中对应的控件。两种关联方式方式一用for属性关联id推荐labelforusername用户名/labelinputtypetextidusernamenameusername方式二直接包裹控件label用户名inputtypetextnameusername/label为什么 label 很重要场景没有 label有 label点击文字无反应聚焦到输入框点击单选框文字无反应选中单选框屏幕阅读器不知道这个输入框是干嘛的朗读 label 内容触控设备点击区域只有小圆点点击区域包含文字!-- ❌ 错误没有 label可访问性差 --p用户名/pinputtypetextnameusername!-- ✅ 正确label 与 input 关联 --labelforusername用户名/labelinputtypetextidusernamenameusername四、单选框与复选框详解单选框radio一组只能选一个fieldsetlegend性别/legendinputtyperadionamegendervaluemaleidgender-malelabelforgender-male男/labelinputtyperadionamegendervaluefemaleidgender-femalelabelforgender-female女/labelinputtyperadionamegendervalueotheridgender-otherlabelforgender-other其他/label/fieldset关键点同一组的radio必须有相同的name这样浏览器才知道它们是互斥的。复选框checkbox可以同时选多个fieldsetlegend兴趣爱好可多选/legendinputtypecheckboxnamehobbyvaluereadingidhobby-1labelforhobby-1阅读/labelinputtypecheckboxnamehobbyvaluemusicidhobby-2labelforhobby-2音乐/labelinputtypecheckboxnamehobbyvaluesportsidhobby-3checkedlabelforhobby-3运动默认选中/label/fieldset属性作用checked默认选中disabled禁用灰色不可交互value提交时的值五、placeholder的正确用法placeholder提供输入提示当用户开始输入时消失。!-- ✅ 好的 placeholder提供输入示例或格式提示 --inputtypeemailplaceholderyournameexample.cominputtypetelplaceholder138-0000-0000!-- ❌ 差的 placeholder重复 label 的内容 --labelforemail邮箱/labelinputtypeemailidemailplaceholder请输入邮箱!-- 请输入邮箱没有提供额外信息 --placeholder 不是 label 的替代品!-- ❌ 错误用 placeholder 代替 label --inputtypetextplaceholder用户名!-- placeholder 在输入后消失用户会忘记这个字段是什么 --!-- ✅ 正确label placeholder 配合使用 --labelforusername用户名/labelinputtypetextidusernameplaceholder请输入 4-20 位字母或数字六、表单控件通用属性以下属性适用于大多数表单控件属性作用示例name提交时的字段名nameemailvalue默认值/提交值value张三placeholder输入提示placeholder提示文字required必填requireddisabled禁用disabledreadonly只读readonlyautofocus页面加载后自动聚焦autofocusautocomplete自动完成autocompleteemailinputtypetextnameusernameplaceholder请输入用户名requiredautofocusautocompleteusername动手练习练习 1表单控件辨析为以下场景选择合适的input type场景你的选择用户年龄用户头像上传网站主题色选择搜索框出生日期音量调节协议同意是/否性别选择男/女练习 2注册表单创建一个用户注册表单要求包含用户名text必填邮箱email必填密码password必填确认密码password性别radio单选兴趣爱好checkbox多选至少 3 项出生日期date所有控件都有正确的label关联练习 3搜索表单优化创建一个搜索表单要求使用typesearch而非typetext添加placeholder提示搜索语法表单使用GET方法添加一个隐藏字段sourceweb提交按钮使用typesubmit常见误区 ⚠️误区真相“placeholder可以代替label”❌ 不能placeholder 输入后就消失而 label 始终可见“radio不需要相同的name”❌ 必须相同否则浏览器不知道它们是同一组“typeemail会验证邮箱格式”✅ 是的但验证很宽松。生产环境还需要服务器端验证“disabled和readonly一样”❌ 不同disabled 的值不会提交readonly 的值会提交“所有表单都需要form标签”✅ 强烈建议。没有 form 的控件无法提交数据“name属性不重要”❌ 很重要没有 name表单提交时不会包含这个字段“checkbox的value可以不写”可以但提交时只会收到 “on”无法区分选了哪个“autocompleteoff总是有效”现代浏览器会忽略某些字段的 autocomplete“off”如密码速查卡片 input类型速查表type用途移动端键盘text普通文本默认password密码隐藏默认email邮箱带 和 .tel电话数字键盘urlURL带 .comsearch搜索带搜索按钮number数字数字键盘range滑块-date日期日期选择器time时间时间选择器color颜色-file文件上传-radio单选-checkbox多选-hidden隐藏字段-单选框 vs 复选框radiocheckbox选择数量一组只能选 1 个可以同时选多个name 规则同组必须相同同组通常相同默认选中checkedchecked形状圆形方形label 关联模板!-- 推荐for id --labelforinput-id标签文字/labelinputidinput-idnamefield-name!-- 备选直接包裹 --label标签文字inputnamefield-name/label表单提交数据格式GET 请求 /search?qHTMLcategorytutorial POST 请求 请求体qHTMLcategorytutorial表单编写 checklist所有表单控件包裹在form中每个控件都有对应的labelradio同组使用相同的namecheckbox设置了有意义的value使用了合适的input type必填字段标记了requiredplaceholder提供格式示例不重复 label 内容扩展阅读MDN: 元素MDN: 类型MDN:元素MDN: 表单基础MDN: radio 和 checkbox下一步掌握了基础控件后进入第13篇表单进阶控件学习下拉菜单、多行文本和表单分组。