🐚作者简介:苏凉(专注于网络爬虫,数据分析)
🐳博客主页:苏凉.py的博客
🌐系列专栏:web前端基础教程
👑名言警句:海阔凭鱼跃,天高任鸟飞。
📰要是觉得博主文章写的不错的话,还望大家三连支持一下呀!!!
👉关注✨点赞👍收藏📂
文章目录
- 写在前面
- 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表单
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类型
实例:
输入数字: <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元素(下拉列表)
< 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>
效果:
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>
效果:
小结
在学习表单标签之前还不知道居然还有这么多标签元素呢,总结了一下确实收获颇多,还有什么需要补充的欢迎在评论区补充啊。今天咱们就到这,咱们下期再见!!