文章目录
写在前面
HTML表单
form元素
action属性
method属性（get/post）
get注意事项
post注意事项
target属性
autocomplete 属性
fieldset组合表单数据
input元素
常见输入类型
number类型
输入限制
date类型
color类型
range类型
时间类型（month,week,time,datetime-local）
email类型
search类型（搜索）
select元素（下拉列表）
textarea元素（文本域）
button元素（按钮）
小结
HTML表单
html表单用于搜集不同类型的用户输入。
form元素
< 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组合表单数据
< fieldset > 元素组合表单中的相关数据
< legend > 元素为 < 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类型
实例：
输入限制
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>
range类型
实例：
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元素（下拉列表）
< option > 元素定义待选择的选项。列表通常会把首个选项显示为被选选项。可通过添加 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>
<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>
小结
在学习表单标签之前还不知道居然还有这么多标签元素呢，总结了一下确实收获颇多，还有什么需要补充的欢迎在评论区补充啊。今天咱们就到这，咱们下期再见！！
