表单
组成：由表单域，表单空控件（表单元素），提示信息三大部分组成
1.表单域：是一个包含表单元素的区域
1.用<from>双标签用于定义表单域，以实现用户信息的收集和传递，<from>会把它范围内的表单元素信息提交给服务器
2.表单域常用属性：
action属性 属性值是url地址，用于指定接受并处理表单数据的服务器程序的url地址
method属性 属性值是get/post,用于设置表单数据的提交方式
name属性 属性值是程序员自定义名称，用于指定表单的名称，以区分同一个页面中的多个表单域
3. 以上属性在学习了后端编程时会再了解
<body>
<form action ="url地址" methond="提交方式" name="表单域名称">
各种表单域控件
</form>
</body>
2.表单空控件（表单元素）
1.在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或选择的内容控件
2.分为input输入表单元素，select下拉表单元素，textarea文本域元素
<input>输入表单元素
<input>是一个单标签，其后的反斜杠在HTML5中可以不写<input type="属性值">
<input>标签用于收集用户信息，此标签中包含一个必需的type属性，用type属性来区分输入字段的很多种形式，可以是文本框，复选框，掩码后的文本控件，单选按钮等等；
<input>的type属性可以取得属性值：
type="text",文本框，用于定义单行输入字段，用户可以在其中输入文本，默认宽度是20个字符
type="password",密码框，用于定义密码字段，该字段中的字符会被掩码，即以小黑点显示
type="radio",单选按钮
type="chekbox",复选框
type="submit",提交按钮，提交按钮会把表单数据发送到服务器
提交按钮上有提交二字，可以利用input 的value属性来取代“提交”，显示其他文本形式
type="reset",重置按钮，重置按钮会清除表单中的用户输入的所有数据，恢复到表单的默认形式
重置按钮上有提交二字，可以利用input 的value属性来取代“重置”，显示其他文本形式
type="buttom",普通按钮，定义可点击按钮，点击会来做另一件事，可以利用input 的value属性来显示点击此处的目的文本
type="file",文件域，按此按钮，会上传文件，就是可以选择电脑文件来上传；
<input>标签的其他属性：
name属性：属性值是自定义的，用于定义input元素的名称，
特别注意：单选按钮中的各个选项必须有相同的name,才可实现单选；
复选框中的各个选项必须有相同的name,才可实现多选
value属性：属性值是自定义的，用于定义input元素的值
value="文本"，可以在文本框，有些按钮（上文提到的提交，重置，普通按钮），可以直接显示value 的属性值，即一些文本
checked属性：属性值是checked,即checked=“checked”，主要是针对单选按钮和复选框，它的作用是规定此input元素首次加载时应当被选中，就是当页面打开时，就默认选择的选项,直接写一个checked也可以
<body>
<form action ="url地址" methond="提交方式" name="表单域名称">
<!--单选按钮-->
男<input type="radio" name="sex" value="男" checked>
女<input type="radio" name="sex" value="女" />
<br>
<--!多选框-->
睡觉<input type="checkbox" name="hobby" checked>
吃饭<input type="checkbox" name="hobby">
玩<input type="checkbox" name="hobby" />
</form>
</body>
maxlength属性：属性值是正整数，规定输入字段的字符的最大长度
注意：name和value是每个表单元素都有的属性，主要是给后台开发人员看的
name属性：当前input 表单的名字，后台可以通过这个name属性找到这个表单
主要用来区分不同的表单
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>
此处的action ="biao.html"，是此html文件同级目录下的html文件
<body>
<form action ="biao.html" method="post" name="lianxi">
<!--text文本框 用户可以输入文字，其中value值的文本会显示出来-->
用户名：<input type="text" name="username" value="请输入用户名" maxlength="16"> <br>
<!--password 密码框-->
密码:<input type="password" name="pwd"> <br>
<!--radio单选按钮,实现多选一-->
男<input type="radio" name="sex" checked>
女<input type="radio" name="sex" />
<br>
<!--checkbox多选框-->
睡觉<input type="checkbox" name="hobby" checked>
吃饭<input type="checkbox" name="hobby">
玩<input type="checkbox" name="hobby" />
<br>
<!--submit提交按钮,按钮上显示value的属性值-->
<input type="submit" value="免费注册"> <br>
<!--reset重置按钮,按钮上显示value的属性值-->
<input type="reset" value="重新填写"> <br>
<!--button普通按钮,按钮上显示value的属性值-->
<input type="button" value="获取短信验证码"> <br>
<!--file文件域，上传文件使用-->
上传头像：<input type="file">
</form>
</body>
</html>
<label>标签,经常与input元素搭配使用
- 像“用户名”后跟一个文本框，我们要在文本框中输入内容时，需要先点击一下文本框，才可以往里面输入内容，若鼠标点击“用户名”时就可以输入内容；
或者像各种按钮，有时按钮过小，不易点击，当我们点击按钮旁的文字时就可以选中，使用<label>双标签就可以实现，提高用户体验 - 需要两步：
<label>开始标签里添加for="自定义标记"<label>内容<label>
在相应的标签中添加id="自定义标记"
<!--text文本框 用户可以输入文字，其中value值的文本会显示出来-->
<label for="biao">用户名：</label><input type="text" id="biao" name="username" value="请输入用户名" maxlength="16">
3.select下拉表单元素 ,嵌套在表单<form>中
- 在页面中，如果有多个选项让用户选择，并且想节约页面空间时，可以使用
<select>双标签定义下拉列表 - 语法：
籍贯：
<select>
<option>山东</option>
<option selected="selected">北京</option>
<option>上海</option>
</select>
- 在
<select>中至少包含一对<option> - 在
<option>中定义selected="selected"时，当前项就是默认选中
4.textarea文本域表单元素：嵌套在表单<form>中
- 文本框只能单行写，而文本域可以写好几行，所以当用户输入的内容较多的情况下，就不使用文本框表单
<input type="text">了，使用<textarea>双标签来定义多行文本输入的控件，常用于留言板，评论等
2.<textarea>文本<textarea>，其中的文本可以在文本域中直接显示出来
<textarea>
请开始你的自我介绍：
</textarea>
- 文本域的大小会在css中学习
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！