目录一、表单标签基础概念二、input 标签的多种类型1) 文本框text2) 密码框password3) 单选框radio4) 复选框checkbox5) 按钮button / submit / reset / file三、label 标签的使用四、select 标签下拉菜单五、textarea 标签六、无语义标签div span七、总结在Web开发中表单是与服务器进行交互的核心组件。本文将结合代码示例带你系统学习HTML中的表单标签及其相关布局技术涵盖form、input、label、select等核心元素的使用方法。一、表单标签基础概念表单标签用于完成服务器的一次交互主要分为两个部分表单域包含表单元素的区域重点是form标签。表单控件输入框、提交按钮等重点是input标签。form action/formaction后面接网页地址学完后端后即可理解此处先跳过 提示F12Fn可以查看网页源代码方便调试。二、input 标签的多种类型input标签通过type属性控制输入类型以下是常见用法1) 文本框text用于单行文本输入姓名input typetext效果用户输入任意文本如yyyyijionklmlklm。2) 密码框password用于密码输入内容显示为星号或圆点密码input typepassword效果输入shatian显示为******。3) 单选框radio用于多选一的场景需设置相同name属性性别input typeradio namegender男 input typeradio namegender checkedchecked女✅checkedchecked表示默认选中。4) 复选框checkbox用于多选场景爱好 input typecheckbox吃饭 input typecheckbox睡觉 input typecheckbox玩游戏5) 按钮button / submit / reset / file普通按钮typebutton可绑定点击事件。提交按钮typesubmit提交表单数据。重置按钮typereset清空表单。文件上传typefile用于上传文件。input typebutton value这是一个普通按钮 onclickalert(hello) input typesubmit input typereset input typefile⚠️ 注意form标签的action属性可指定提交地址如actionhttps://www.baidu.com。三、label 标签的使用label标签用于提升用户体验点击标签也能选中对应的单选/复选框。使用for属性指定与input的id对应。label formale男/label input typeradio namesex idmale label forfemale女/label input typeradio namesex idfemale四、select 标签下拉菜单用于创建下拉选择框通过option定义选项。使用selectedselected设置默认选中项。select name id option value--请选择年份--/option option value selectedselected--1990--/option option value--1991--/option option value--1992--/option option value--1993--/option option value--1994--/option /select五、textarea 标签用于多行文本输入textarea name id cols30 rows10/textarea六、无语义标签div span无语义标签没有固定用途主要用于网页布局。div独占一行是一个大盒子。span不独占一行是一个小盒子。div span吃饭/span span睡觉/span span玩游戏/span span运动/span /div效果吃饭 睡觉 玩游戏 运动若使用多个divdiv吃饭/div div睡觉/div div玩游戏/div div运动/div效果吃饭 睡觉 玩游戏 运动七、总结通过本文我们系统学习了HTML表单标签的核心用法包括form表单域与input控件的配合使用。多种input类型文本、密码、单选、复选、按钮。label标签提升交互体验。select下拉菜单与textarea多行输入。div与span的基础布局应用。掌握这些基础标签是构建现代Web表单的必经之路。