Loading... ## 1、表单是什么 使用前面所记录的标签只能完成制作一个**静态网页**。如果要制作**动态网页**，则需要用到**表单**的知识。 简单的说一个网页，仅仅只提供给用户浏览的话那就叫做静态网页。 那么网页内含有（登录、注册、评论等相关元素）则叫做动态网页。 ## 2、form标签 前面已经介绍过表格标签，那么表格的**th、tr、td等标签**都是需要放在**table标签**里面。 我们的表单标签也一样的，需要放到**form标签**里面 ```html <form> <!--各种表单标签--> </form> ``` **form标签的属性** | 属性 | 解释 | | :-----: | :--------: | | name | 表单的名称 | | method | 提交方式 | | action | 提交地址 | | target | 打开方式 | | Enctype | 编码方式 | ### 2.1、name属性 在**页面中**可能**不止一个表单**，每一个**form标签**就是**一个表单**，那么为了区分这些表单就需要**使用name属性给表单命名**。 用法： ```html <form name="表单名字"></form> <form name="myForm"></form> <!--注意驼峰命名规则--> ``` ### 2.2、method属性 method提交方式 表单数据可以作为 URL 变量（method="get"）或者 HTTP post （method="post"）的方式来发送。 **“get”**的安全性比较差，而**“post”**的安全性较好，在实际在发中一般使用**“post”**。 ```html <form method="提交方式"></form> <form method="post"></form> ``` 拓展： - 如果希望获得最佳表单传输性能，可以采用 GET 方法发送只有少数简短字段的小表单。 - 一些服务器操作系统在处理可以立即传递给应用程序的命令行参数时，会限制其数目和长度，在这种情况下，对那些有许多字段或是很长的文本域的表单来说，就应该采用 POST 方法来发送。 - 如果你在编写服务器端的表单处理应用程序方面经验不足，应该选择 GET 方法。如果采用 POST 方法，就要在读取和解码方法做些额外的工作，也许这并不很难，但是也许你不太愿意去处理这些问题。 - 如果安全性是个问题，那么我们建议选用 POST 方法。GET 方法将表单参数直接放在应用程序的 URL 中，这样网络窥探者可以很轻松地捕获它们，还可以从服务器的日志文件中进行摘录。如果参数中包含了信用卡帐号这样的敏感信息，就会在不知不觉中危及用户的安全。而 POST 应用程序就没有安全方面的漏洞，在将参数作为单独的事务传输给服务器进行处理时，至少还可以采用加密的方法。 - 如果想在表单之外调用服务器端的应用程序，而且包括向其传递参数的过程，就要采用 GET 方法，因为该方法允许把表单这样的参数包括进来作为 URL 的一部分。而另一方面，使用 POST 样式的应用程序却希望在 URL 后还能有一个来自浏览器额外的传输过程，其中传输的内容不能作为传统 <a> 标签的内容。 ### 2.3、action属性 在form标签中，action属性用于指定表单数据提交到哪一个地址进行处理 ```html <form action="index.php"></form> ``` ### 2.4、target属性 在form标签中，target属性用于表单打开方式，这里和之前所学的a标签的一样的，一般情况下只会用到**_blank**属性值。 ```html <form target="_blank"></form> ``` ### 2.5、Enctype属性 ```html <form action="提交处理地址" enctype="编码方式"> </form> ``` ## 3、input标签 在HTML中，绝大部表单都是使用input标签来实现的。 ```html <input type="表单类型"> ``` **input标签的一些属性：** | 属性值 | 解释 | | :-------------------: | :--------: | | text | 单行文本框 | | password | 密码文本框 | | radio | 单选框 | | checkbox | 多选框 | | button或submit或reset | 按钮 | | file | 文件上传 | ## 4、text属性，单行文本框 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>input标签</title> </head> <body> <form action="#" > 姓名：<input type="text"><br> 地址：<input type="text"> </form> </body> </html> ``` ![][1] #### 4.1、value属性 **用法：** ```html <input type="text" value="值"> ``` **value属性用于设置单行文本框内默认的值** ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>input标签</title> </head> <body> <form action="" method="post"> 姓名：<input type="text"><br> 姓名：<input type="text" value="张三"> </form> </body> </html> ``` ![][2] #### 4.2、size属性 **用法：** ```html <input type="text" value="值" size="长度"> ``` size属性是用来设置文本框长度的，在实际开发中我们不会，用到这个属性，一般会用CSS去进行控制。 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> </head> <body> <form action="" method="post"> 姓名：<input type="text" size="20"><br> 姓名：<input type="text" size="10"> </form> </body> </html> ``` ![][3] #### 4.3、maxlength属性 **用法：** ```html <input type="text" maxlength="文本框内的长度"> ``` maxlength属性是设置，文本框内最多只能填写多少个字符 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> </head> <body> <form action="" method="post"> 姓名：<input type="text" ><br> 姓名：<input type="text" maxlength="5"> </form> </body> </html> ``` 会发现当我们设置maxlength长度之后文本框内只能输入5个字符。 ![][4] ## 5、password属性，密码文本框 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>input标签</title> </head> <body> <form action="#"> 账户：<input type="text"><br> 密码：<input type="password"> </form> </body> </html> ``` ![][5] 密码文本框的属性值和单行文本框的是一样的 | 属性值 | 解释 | | :-------: | :----------------: | | value | 默认值 | | size | 文本框长度 | | maxlength | 文本框内的填写长度 | ## 6、radio属性，单选框 **用法：** ```html <input type="radio" name="组名"> ``` ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>input标签</title> </head> <body> <form action="#"> 账户：<input type="text"><br> 密码：<input type="password"><br> 性别<input type="radio" name="box" >男 <input type="radio" name="box">女 </form> </body> </html> ``` ![][6] #### 6.1、checked属性，默认勾选 在需要的选项中，加入checked即可变为默认值 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> </head> <body> <form action="" method="post"> <h2>你的学历是？</h2> <input type="radio" name="2" >初中 <input type="radio" name="2">高中 <input type="radio" name="2" checked>大专 <input type="radio" name="2">本科 <input type="radio" name="2">研究生 </form> </body> </html> ``` ![][7] ## 7、checkbox属性，多选框 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>input标签</title> </head> <body> <form action="#"> 你会使用的编程语言： <input type="checkbox" name="box">Java <input type="checkbox" name="box">PHP <input type="checkbox" name="box">Python </form> </body> </html> ``` ![][8] ## 8、button或submit或reset属性，按钮 ```html <input type="button" value="取值"> ``` ```html <!DOCTYPE html> <html lang="zh-CN"> <head> </head> <body> <form action=""> <input type="button" value="按钮"> </form> </body> </html> ``` ![][9] ### 8.1、submit属性 从外观上看**button属性**和**submit属性**没有区别都是按钮，区别在于他们的功能，**submit属性**用于提交给服务器的。 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> </head> <body> <form action=""> <input type="button" value="按钮"> <input type="submit" value="提交"> </form> </body> </html> ``` ![][10] ### 8.2、reset属性 reset属性是重装按钮上具有特殊功能的普通按钮。 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> </head> <body> <form action=""> 账户：<input type="text" ><br> 密码：<input type="password"><br> <input type="reset" value="重置"> </form> </body> </html> ``` ![][11] ## 9、file属性，文件上传 先阶段只需要做出页面效果即可 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> </head> <body> <form method="post"> <input type="file"> </form> </body> </html> ``` ![][12] ## 10、多行文本框 **用法：** ```html <textarea name="名字" id="ID" cols="行数" rows="列数">提示文本</textarea> ``` ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> </head> <body> <form method="get"> <textarea name="" id="" cols="30" rows="10">提示文本</textarea> </form> </body> </html> ``` ![][13] ## 11、下拉列表 **用法：** ```html <form action="" method="post"> <select name="名字" id="ID"> <option>条目1</option> · · · · · <option>条目x</option> </select> </form> ``` ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> </head> <body> <form action="" method="post"> <select name="" id=""> <option>条目1</option> <option>条目2</option> <option>条目3</option> <option>条目4</option> </select> </form> </body> </html> ``` ![][14] ### 11.1、select标签 | 属性 | 解释 | | :------: | :--------------------------: | | multiple | | | size | 设置下拉列表默认显示几个选项 | ##### multiple属性 效果如图： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> </head> <body> <form action="" method="post"> <select name="" id="" multiple > <option>条目1</option> <option>条目2</option> <option>条目3</option> <option>条目4</option> <option>条目5</option> <option>条目6</option> <option>条目7</option> <option>条目8</option> <option>条目9</option> </select> </form> </form> </body> </html> ``` ![][15] ##### size属性 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> </head> <body> <form action="" method="post"> <select name="" id="" size="6" multiple > <option>条目1</option> <option>条目2</option> <option>条目3</option> <option>条目4</option> <option>条目5</option> <option>条目6</option> <option>条目7</option> <option>条目8</option> <option>条目9</option> </select> </form> </form> </body> </html> ``` 一下子显示6个 ![][16] [1]: https://a-hxin.cn/usr/uploads/2022/12/3984019541.png [2]: https://a-hxin.cn/usr/uploads/2022/12/1988771086.png [3]: https://a-hxin.cn/usr/uploads/2022/12/1587671370.png [4]: https://a-hxin.cn/usr/uploads/2022/12/2176067230.png [5]: https://a-hxin.cn/usr/uploads/2022/12/2364250026.png [6]: https://a-hxin.cn/usr/uploads/2022/12/1085864795.png [7]: https://a-hxin.cn/usr/uploads/2022/12/2298601482.png [8]: https://a-hxin.cn/usr/uploads/2022/12/719937445.png [9]: https://a-hxin.cn/usr/uploads/2022/12/1166541385.png [10]: https://a-hxin.cn/usr/uploads/2022/12/2324116941.png [11]: https://a-hxin.cn/usr/uploads/2022/12/850548059.gif [12]: https://a-hxin.cn/usr/uploads/2022/12/2162004220.png [13]: https://a-hxin.cn/usr/uploads/2022/12/984606041.png [14]: https://a-hxin.cn/usr/uploads/2022/12/1232747443.gif [15]: https://a-hxin.cn/usr/uploads/2022/12/1656159825.png [16]: https://a-hxin.cn/usr/uploads/2022/12/2327624228.png 最后修改：2024 年 01 月 24 日 © 允许规范转载 打赏 赞赏作者 赞 咱们谁跟谁，用不着～