本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。
系列文章目录
HTML-1.1 文本字体样式-字体设置、分割线、段落标签、段内回车以及特殊符号
HTML-2.1 文本字体样式之加粗、斜体、回车、下划线、上标标签、下标标签以及字号变小和变大
HTML-2.2 列表--无序列表、有序列表、定义列表
HTML-2.3 超链接-外部链接，内部链接，书签链接
HTML-2.4 滚动字幕marquee
HTML-3.1 表格table
HTML-3.2 表格的跨行跨列（课表制作实例）
HTML中应用CSS样式的三种常见方法
HTML-3.3 表格布局（学校官网简易布局实例）
HTML-3.4 表单form
HTML-实战之 百度百科（影视剧介绍）
目录
系列文章目录
前言
一、表单 Form详解
1、基本结构
2、主要属性
3、常用表单控件
1. 输入框 (input)
2. 单选按钮 (radio) 和复选框 (checkbox)
3. 下拉选择框 (select)
4. 多行文本框 (textarea)
5. 按钮
6. 标签 (label)
4、表单分组 (fieldset 和 legend)
5、数据验证
6、样式和布局
7、现代表单技术
8、示例：完整表单
二、代码实例
总结
前言
小编作为新晋码农一枚，会定期整理一些写的比较好的代码，作为自己的学习笔记，会试着做一下批注和补充，如转载或者参考他人文献会标明出处，非商用，如有侵权会删改！欢迎大家斧正和讨论！
一、表单 Form详解
HTML 表单 (<form>) 是网页中用于收集用户输入的重要元素，允许用户输入文本、选择选项、上传文件等，并将这些数据提交到服务器进行处理。
1、基本结构
<form action="/submit" method="post">
<!-- 表单控件放在这里 -->
<input type="text" name="username">
<input type="submit" value="提交">
</form>2、主要属性
- action - 指定表单数据提交的URL
- method - 提交数据时使用的HTTP方法（通常是
get或post） - enctype - 指定表单数据编码方式（用于文件上传时需要设置为
multipart/form-data） - target - 指定服务器响应显示的位置（如
_blank在新窗口打开） - autocomplete - 控制表单是否启用自动填充功能
3、常用表单控件
1. 输入框 (input)
<input type="text" name="username" placeholder="用户名">
<input type="password" name="pwd" placeholder="密码">
<input type="email" name="email" placeholder="邮箱">
<input type="number" name="age" min="1" max="120">
<input type="date" name="birthday">
<input type="file" name="avatar" accept="image/*">
<input type="hidden" name="token" value="abc123"> <!-- 隐藏字段 -->2. 单选按钮 (radio) 和复选框 (checkbox)
<input type="radio" name="gender" value="male" checked> 男
<input type="radio" name="gender" value="female"> 女
<input type="checkbox" name="hobby" value="reading"> 阅读
<input type="checkbox" name="hobby" value="sports"> 运动3. 下拉选择框 (select)
<select name="city">
<option value="bj">北京</option>
<option value="sh" selected>上海</option>
<option value="gz">广州</option>
</select>
4. 多行文本框 (textarea)
<textarea name="message" rows="4" cols="50" placeholder="请输入留言..."></textarea>5. 按钮
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button" onclick="alert('点击')">普通按钮</button>6. 标签 (label)
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
<!-- 或者 -->
<label>
<input type="checkbox" name="agree"> 我同意协议
</label>4、表单分组 (fieldset 和 legend)
<fieldset>
<legend>用户信息</legend>
<!-- 表单控件 -->
</fieldset>5、数据验证
HTML5 提供了内置的表单验证功能：
<input type="text" name="username" required minlength="3" maxlength="20">
<input type="email" name="email" required>
<input type="number" name="age" min="18" max="100">
<input type="url" name="website">
<input type="pattern" name="phone" pattern="[0-9]{11}" placeholder="11位手机号">6、样式和布局
可以使用CSS美化表单：
form {
width: 300px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
}
input, textarea, select {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
cursor: pointer;
}7、现代表单技术
- HTML5 表单 API - 包括日期选择器、颜色选择器、范围滑块等
- FormData 对象 - 用于通过JavaScript构建表单数据
- AJAX 表单提交 - 使用XMLHttpRequest或Fetch API异步提交表单
- 表单验证API - 自定义验证逻辑
8、示例：完整表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form action="/register" method="post" enctype="multipart/form-data">
<fieldset>
<legend>用户注册</legend>
<div>
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required minlength="3">
</div>
<div>
<label for="pwd">密码:</label>
<input type="password" id="pwd" name="password" required>
</div>
<div>
<label>性别:</label>
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
</div>
<div>
<label for="city">城市:</label>
<select id="city" name="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
</select>
</div>
<div>
<label><input type="checkbox" name="agree" required> 我同意用户协议</label>
</div>
<button type="submit">注册</button>
<button type="reset">重置</button>
</fieldset>
</form>
</body>
</html>
表单是Web开发中用户交互的核心组件，掌握表单的使用对于构建功能完善的网站至关重要。
二、代码实例
代码实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单form</title>
<!-- 表单框架form -->
<style type="text/css">
img{
position: absolute;
left: 45%;
top: 300px;
width: 100px;
}
</style>
</head>
<body>
<!-- 表单框架form -->
<!-- action数据处理文件 -->
<!-- method数据传输方式 post get -->
<!-- <form action="hello.php" method="get">
</form>-->
<!-- input type类型 -->
<!-- 边框fieldset 领域设置-->
<!-- placeholder提示 disabled 只读 -->
<!-- 单选框radio 设置同样的name -->
<!-- 设置默认值checked=“checked” -->
<!-- 下拉列表select option 设置默认值 selected="selected" -->
<!-- 下拉列表为一组 select optgroup option -->
<form action="hello.php" method="post" enctype="multipart/form-data"> <!-- 表单使用POST方法将数据提交到hello.php，使用<fieldset>和<legend>对表单内容进行分组和标题设置 -->
<!-- enctype="multipart/form-data"用于指定表单数据在提交到服务器时的编码方式。这个属性特别重要，尤其是在表单需要上传文件时 -->
<legend>个人信息调查表</legend>
<fieldset >
<legend>个人信息调查表</legend>
<!-- <legend> 元素用于为 <fieldset> 分组提供一个标题或描述。这个标题通常显示在 <fieldset> 的边框上，帮助用户理解该分组的目的 -->
<label for="xm">1.姓名：</label>
<input type="text" name="请输入你的姓名" id="xm" /><br>
<!-- 有一个文本输入框用于输入姓名，name属性使用了中文，虽然可以工作，但建议使用英文，使用了<label>标签关联输入框，提高了可访问性 -->
2.账号：<input type="text" disabled="disabled" /><br> <!-- 禁用的文本输入框，用户无法修改 -->
3.密码：<input type="password" /><br> <!-- 密码输入框，输入内容会显示为圆点或星号 -->
4.性别：男生<input type="radio" name="xb" value="1" />
女生<input type="radio" name="xb" value="0" /><br>
<!-- 两个单选按钮共享相同的name属性，实现互斥选择，分别设置了不同的value值 -->
5.兴趣爱好：唱歌<input type="checkbox" name="hobby" value="11" />
跳舞<input type="checkbox" name="hobby" value="22" />
打篮球<input type="checkbox" name="hobby" value="33" /><br>
<!-- 三个复选框，可以多选，共享相同的name属性，但通常建议为每个复选框使用不同的name或使用数组形式命名 -->
6.出生日期:<input type="date" /><br>
<!-- 使用了HTML5的日期选择器，下面的注释中展示了其他日期时间相关的输入类型 -->
<!-- 6.出生日期:<input type="date-time" /> -->
<!-- 6.出生日期:<input type="datetime-local" /> -->
7.范围：0 <input type="range" value="10" />100 <br> <!-- 范围滑块，默认值为10，范围0-100 -->
8.上传文件：<input type="file" /><br> <!-- 文件上传控件 -->
9.email:<input type="email" /><br> <!-- 邮箱输入框，浏览器会进行基本的邮箱格式验证 -->
10.地址：<!-- 两个下拉选择框，第二个下拉框使用了<optgroup>对选项进行分组 -->
<select name="">
<option value="">临汾市</option>
<option value="">大同市</option>
<option value="" selceted="selected">太原市</option>
<option value="">晋中市</option>
</select>
<select name="">
<optgroup label="山西省">
<option value="0359">临汾市</option>
<option >大同市</option>
<option value="0351">太原市</option>
<option >晋中市</option>
</optgroup>
<optgroup label="陕西省">
<option>西安市</option>
<option >宝鸡市</option>
<option selected="selected">渭南市</option>
</optgroup>
</select>
<br>
11.意见：<!-- 多行文本输入区域，设置了3行高和30列宽 -->
<textarea name="" rows="3" cols="30"></textarea>
<br>
12.提交三种方式button submit images
<!-- 四种按钮：普通按钮(button)、提交按钮(submit)、图片提交按钮(image)、重置按钮(reset) -->
<br>
<input type="button" name="" id="" value="button" />
<input type="submit" name="" id="" value="submit" />
<input type="image" src="../img/提交.webp" width="50px" />
<!-- button可以调用其他方法和事件 -->
<!-- submit只可以提交 image相当于submit -->
<input type="reset" name="" id="" value="重置按钮" /><br>
</fieldset>
</form>
</body>
</html>
代码运行：
注：
文件上传前：
文件上传后：
总结
以上就是今天要讲的内容，本文简单记录了表单form，仅作为一份简单的笔记使用，大家根据注释理解
![【问题】Watt加速github访问速度：好用[特殊字符]](https://i-blog.csdnimg.cn/direct/f495eb5554a74537ae6a9879676c1f99.png)
![[训练和优化] 3. 模型优化](https://i-blog.csdnimg.cn/blog_migrate/tags/671f42ab07fd990f949a1c903140dd83.png#pic_center)
