web前端-表单的使用详解
🐚作者简介：苏凉（专注于网络爬虫，数据分析）
🐳博客主页：苏凉.py的博客
🌐系列专栏：web前端基础教程
👑名言警句：海阔凭鱼跃，天高任鸟飞。
📰要是觉得博主文章写的不错的话，还望大家三连支持一下呀！！！
👉关注✨点赞👍收藏📂
文章目录
- 写在前面
- 小结
写在前面
上篇文章中我们学习了图像，表格和列表的使用，今天我们走进表单的学习：
🚀上期传送锚点：HTML图像，表格，列表的使用
HTML表单
html表单用于搜集不同类型的用户输入。
form元素
元素定义 HTML 表单。HTML 表单包含表单元素。表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
action属性
action 属性定义在提交表单时执行的动作。向服务器提交表单的通常做法是使用提交按钮。通常，表单会被提交到指定的网页。
<form action="xxx.html">实例：
<!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>Document</title></head><body><form action="提交的网页.html" target="_blank"><input type="submit" name="点击提交" ></form></body></html>
method属性（get/post）
method 属性规定在提交表单时所用的 HTTP 方法（get/post）。
<form action="提交的网页.html" method="get"><form action="提交的网页.html" method="post">get注意事项
如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。当您使用 GET 时，表单数据在页面地址栏中是可见的。
注：GET 最适合少量数据的提交。浏览器会设定容量限制。
- 以名称/值对的形式将表单数据追加到 URL
- 永远不要使用 GET 发送敏感数据！（提交的表单数据在 URL 中可见！）
- URL 的长度受到限制（2048 个字符）
- 对于用户希望将结果添加为书签的表单提交很有用
- GET 适用于非安全数据，例如 Google 中的查询字符串
post注意事项
如果表单正在更新数据，或者包含敏感信息（例如密码）。POST 的安全性更好，因为在页面地址栏中被提交的数据是不可见的。
- 将表单数据附加在 HTTP 请求的正文中（不在 URL 中显示提交的表单数据）
- POST 没有大小限制，可用于发送大量数据。
- 带有 POST 的表单提交无法添加书签
target属性
- target 属性规定提交表单后在何处显示响应。
target 属性可设置以下值之一：
| 值 | 描述 |
|---|---|
| _blank | 响应显示在新窗口或选项卡中。 |
| _self | 响应显示在当前窗口中。 |
| _parent | 响应显示在父框架中。 |
| _top | 响应显示在窗口的整个 body 中。 |
| framename | 响应显示在命名的 iframe 中。 |
autocomplete 属性
- autocomplete 属性规定表单是否应打开自动完成功能。启用自动完成功能后，浏览器会根据用户之前输入的值自动填写值。
fieldset组合表单数据
实例：
<!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>Document</title> <style> .biaodan{ margin-right: 500px; } </style></head><body><form action="提交的网页.html" target="_blank" method="post"><fieldset class="biaodan"><legend>登录管理</legend><p>账号：<input type="text" placeholder="请输入账号"></p><p>密码：<input type="password" placeholder="请输入密码"></p><p><input type="submit" name = "点击提交"></p></fieldset></form></body></html>效果：
input元素
常见输入类型
- text（文本输入）
- password（密码字段）
- submit（提交）
- radio（单选按钮）
- checkbox（复选框）
- button（按钮）
实例：
<body><form action="提交的网页.html">文本输入<input type="text" placeholder="文本输入"><br>密码：<input type="password" placeholder="输入密码"><br>提交<input type="submit"><br>单选<input type="radio" checked>男<input type="radio">女<br>多选<input type="checkbox" checked>香蕉<input type="checkbox">苹果<input type="checkbox" checked>橘子<br>按钮<input type="button" value = "我是一个按钮"><br></form></form></body>效果：
number类型
实例：
输入数字: <input type="number" min="0" max="5" >
输入限制
| 属性 | 描述 |
|---|---|
| disabled | 规定输入字段应该被禁用。 |
| max | 规定输入字段的最大值。 |
| maxlength | 规定输入字段的最大字符数。 |
| min | 规定输入字段的最小值。 |
| pattern | 规定通过其检查输入值的正则表达式。 |
| readonly | 规定输入字段为只读（无法修改）。 |
| required | 规定输入字段是必需的（必需填写）。 |
| size | 规定输入字段的宽度（以字符计）。 |
| step | 规定输入字段的合法数字间隔。 |
| value | 规定输入字段的默认值。 |
date类型
实例：
<body><form action="提交的网页.html">输入日期：<input type="date" ></form></body>
对日期进行限制：
<body><form action="提交的网页.html">最大日期：<input type="date" max="2019-12-31"><br>最小日期：<input type="date" min="2020-05-20"><br><input type="submit"></form></body>
color类型
实例：
<body><form action="提交的网页.html">选择颜色：<input type="color"><input type="submit"></form></body>效果：
range类型
实例：
<body><form action="提交的网页.html">选择范围：<input type="range" min="10" max="100" ><input type="submit"></form></body>效果：
时间类型（month,week,time,datetime-local）
实例：
<body><form action="提交的网页.html">month: <input type="month"><br>week: <input type="week"><br>time: <input type="time"><br>datetime_local: <input type="datetime-local"><br><input type="submit"></form></body>效果：
email类型
实例：
<body><form action="提交的网页.html">email： <input type="email"><br><input type="submit"></form></body>效果：
search类型（搜索）
常用于搜索框
实例：
<body><form action="提交的网页.html">搜索：<input type="search"><br><input type="submit"></form></body>效果：
select元素（下拉列表）
元素定义待选择的选项。列表通常会把首个选项显示为被选选项。可通过添加 selected 属性来定义预定义选项。
实例：
<body><form action="提交的网页.html">你喜欢吃的水果是：<select name="下拉列表"> <option value="">橘子</option> <option value="">香蕉</option> <option value="">苹果</option> <option value="">荔枝</option> <option value="" selected>草莓</option></select><br><input type="submit"></form></body>效果：
textarea元素（文本域）
实例：
<body><form action="提交的网页.html"><textarea rows="10" cols="10"> shuru</textarea><br><input type="submit"></form></body>效果：
button元素（按钮）
实例：
<body><form action="提交的网页.html">按钮：<button onclick="alert('hello world')">我是按钮</button><br><input type="submit"></form></body>效果：
小结
在学习表单标签之前还不知道居然还有这么多标签元素呢，总结了一下确实收获颇多，还有什么需要补充的欢迎在评论区补充啊。今天咱们就到这，咱们下期再见！！
