前端基础：form和input用法详解
一、<form>表单标签
这篇文章主要用两个小实验，带大家学习 HTML 表单 <form> 的用法。我们会一步步认识文本框、密码框、单选、多选和文件上传，还能清楚看到数据是怎么提交的，新手也能轻松看懂。
作用：用来包裹输入框、按钮等，把用户输入的数据打包提交
常用属性：
action=提交地址 method=提交方式
注意：
所有输入框、按钮、单选、多选都必须写在 <form> 内部
没有 <form>，数据无法正常提交
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>form表单实验</title> </head> <body> <h2>学生信息登记微信小程序</h2> <!-- 想要行使form标签的所有特性， 内部的元素必须配置name属性 --> <form action=""> <!-- 配置input为文本输入框 --> 账号：<input name="账号" type="text" value="请输入您的账号" size="15rpx" maxlength="11" > <br> <!-- 配置input为密码输入框 --> 密码：<input name="密码" size="15rpx" type="password" value="请输入您的密码"> <br> <!-- 配置input为提交按钮 --> <input name="提交" type="submit"> <!-- 配置input为重置按钮 --> <input name="重置" type="reset"> </form> </body> </html><form action="">是表单的容器，所有输入项都要写在里面
action="" 表示提交到当前页面
想要提交数据生效，内部标签必须写 name 属性
运行结果：
打开后显示：账号、密码两个输入框
输入内容，密码会自动隐藏
点击【提交】：页面会把数据拼在网址上提交
点击【重置】：所有内容清空，回到初始状态
二、input输入框详细介绍
name="账号"：表单数据的名称，提交时用来识别这是“账号”
type="text"：表示这是普通文本输入框
value="请输入您的账号"：输入框默认显示的文字（需要手动删除才能输入）
maxlength="11"：限制最多输入 11 个字符
size="15rpx"：设置输入框长度
<br>：换行标签
代码：
!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单</title> </head> <body> <!-- <form> 是收集 + 提交用户数据的容器，核心属性：action、method 【表单工作流程】 用户填写内容 点击提交按钮 浏览器将所有带 name 的输入数据打包 按照 method 方式发送到 action 地址 服务器接收并处理数据 【必备规则】 内部输入元素必须加 name，服务器才能拿到数据 常用输入：文本、密码、单选、多选、下拉、文件、文本域 提交用 type="submit"，重置用 type="reset" 单选框 name 必须一致，才能实现互斥选择 --> <h2>实验1：直接地址栏查看数据</h2> <!-- 【form标签的常用属性说明】 action = 提交到哪里 method = 提交方式，常用的有GET和POST（GET 查数据，POST 传数据） --> <form action="#" method="GET"> 账号：<input type="text" name="账号"><br> <!-- 若type="password+空格",则密码明文显示 --> 密码：<input type="password" name="密码"><br> <!-- 定义单选按钮时，同一组中的选项必须指定相同name，“单选”才生效 --> 爱好： 篮球<input type="checkbox" name="爱好" value="篮球"> 唱歌<input type="checkbox" name="爱好" value="唱歌"><br> 性别： 男<input type="radio" name="性别" value="男"> 女<input type="radio" name="性别" value="女" checked><br> <input type="reset" value="重置"> <input type="submit" value="提交"> <!-- 普通按钮常常配合javaScript脚本语言使用，定义其功能 --> <input type="button" value="其他普通按钮"> </form> <h2>实验2：提交到测试 API</h2> <!-- 【form标签的常用属性说明】 action = 提交到哪里 method = 提交方式，常用的有GET和POST（GET 查数据，POST 传数据） target="_blank" 提交后在新标签页打开结果，不覆盖当前表单页面 enctype="multipart/form-data" 【重要】表单包含文件上传时，必须加此编码格式；无文件上传时不需要加 --> <form action="https://httpbin.org/post" method="POST" target="_blank" enctype="multipart/form-data" > 账号：<input type="text" name="账号"><br> 密码：<input type="password" name="密码"><br> 爱好： 篮球<input type="checkbox" name="爱好" value="篮球"> 唱歌<input type="checkbox" name="爱好" value="唱歌"><br> 性别： 男<input type="radio" name="性别" value="男"> 女<input type="radio" name="性别" value="女" checked><br> 身份证照片：<input type="file" value="上传你的身份证照片" name="身份证照片"><br> <input type="reset" value="重置"> <input type="submit" value="提交"> </form> </body> </html>复选框 checkbox：允许同时多选，name 相同表示同一组。
单选框 radio：同一组 name 必须相同，只能选一个；
checked：默认选中。
submit：提交表单 reset：清空内容，重置表单 button：普通按钮，一般配合 JS 使用。
运行结果：
这份代码完整展示了：
form 标签的核心属性：action、method、target、enctype
各类 input 类型：text、password、radio、checkbox、submit、reset、button、file
GET 与 POST 的区别 表单数据提交规则（必须加 name） 文件上传的正确配置
通过这两个实验我们能发现，<form> 就是用来收集用户信息的容器。想要表单正常提交数据，每个输入框都必须加 name 属性。
GET 提交会把数据显示在地址栏，POST 更安全还能传文件。学会这些表单用法，就能做出登录、注册这类常见页面了。