【从零到一】HTML表单＜form＞与＜input＞核心用法完全指南
你是否曾为HTML表单中那些"古怪"的行为感到困惑?
- 明明自己写了一组单选按钮，用户却可以全选上？
- 指定地址查看数据提交表单后页面一堆看不明白代码，心里完全没底？
如果你频频点头，那么这篇文章就是为你准备的。许多人在学习表单时，只记住了<input>.<form>几个标签，却忽略了让整个表单“活”起来的关键属性和机制。今天，我们将通过两个直观的实验，从浏览器到服务器，彻底搞懂表单数据从数据.打包到发送的过程是怎么样的。读完本文，你不仅能解决上述问题，更能理解其背后的原理，从此告别盲人摸象式的调试。
一：表单的创建
- 表单的定义：表单是网页中最常用的因素，是网站服务器端与客户端之间沟通的桥梁；网页上由具有可输入表项及项目选择等控件所组成的栏目称为表单。
- 表单是一个容器，可以存放各种表单元素。今天我们所要了解的表单元素有：
表单元素 功能 input 用于定义可输入数据的输入字段 select 用于定义下拉列表/菜单 textarea 用于定义一个多行的文本输入区域。
<input>元素常用属性：
| 属性 | 含义 |
| type | 指定要加入表单项目的类型 |
| name | 表项的控制名 |
| size | 输入字段的可见字符数 |
| maxlength | 允许输入最大字符数目 |
<body> <h2>华晨宇云南玉溪火星2.0调查表</h2> <form action=""> 账号:<input name="账号" type="text" value="请输入你的账号" size="15rpx" maxlength="8" ><br> 密码:<input name="密码" size="15rpx" type="password" value="请输入你的密码"><br> <input name="提交" type="submit"> <input name="重置" type="reset"> </form>以上代码1:form标签涉及到<form>标签中的actions和name属性
| name属性 | 表单的名字，在一个网页中用于唯一识别一个表单。 |
| action属性 | 表单处理的方式。 |
2：input标签涉及到了
| type属性 | 指定要加入表单项目的类型。上述代码运用了submit{将填写在文本域的内容发送到服务器}和reset{将表单输入框的内容恢复初始值}类型 |
| value属性 | 设置该选择钮的控制初始值，用以告诉表单设计者选择的结果。 |
| password属性 | 目的是告诉用户在后面选项应该输入的内容 |
该代码运行结果如下：
二：直接地址栏查看数据
<form action="#" method="GET"> 账号:<input type="text" name="账号"><br> 密码:<input type="password" name="密码"><br> 爱好： 羽毛球<input type="checkbox" name="爱好" value="羽毛球"> 跳舞：<input type="checkbox" name="爱好" value="跳舞"> 画画：<input type="checkbox" name="爱好" value="画画"><br> 性别： 男<input type="radio" name="性别" value="男" checked> 女<input type="radio" name="性别" value="女" checked><br> <input type="button" value="普通按钮,没有实际意义。"><br> <input type="reset" value="重置"> <input type="submit" value="提交"> </form>以上新涉及到3个新的type类型1.checkbox复选框；2.radio单选框；3.button可点击的按钮
三：提交到指定网站
<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="跳舞"> 画画：<input type="checkbox" name="爱好" value="画画"><br> 性别： 男<input type="radio" name="性别" value="男" checked> 女<input type="radio" name="性别" value="女" checked><br> 证件照：<input type="file" value="请上传一张您的证件照" name="证件照"><br> <input type="reset" value="重置"> <input type="submit" value="提交"> </form><form>标签中：
1.method属性:表单数据的传送方向。（GET）是获得表单，（POST）是送出表单。
2.target属性：用于指定在何处打开链接或表单提交结果。上述代码中例：target="_blank"的含义是在新的浏览器窗口或标签页中打开链接。
3.enctype属性：该属性只适用于<form>元素。当我们要上传文件必须用enctype="multipart/form-data"。
<input>标签：file类型：把用户从设备中选择的文件上传到服务器。
运行结果：
今天我们就到此结束啦。让我们敬请期待下一期的内容是什么吧！