0
点赞
收藏
分享

微信扫一扫

web前端-表单的使用详解

贵州谢高低 2022-10-17 阅读 130
前端htmlhtml5表单数据Linux系统/运维


🐚作者简介：苏凉（专注于网络爬虫，数据分析）
🐳博客主页：​苏凉.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>

web前端-表单的使用详解_表单

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>

效果：

web前端-表单的使用详解_数据_02

input元素

常见输入类型
  1. text（文本输入）
  2. password（密码字段）
  3. submit（提交）
  4. radio（单选按钮）
  5. checkbox（复选框）
  6. 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>

效果：

web前端-表单的使用详解_html_03

number类型

实例：

输入数字: <input type="number" min="0" max="5" >

web前端-表单的使用详解_html5_04

输入限制

属性

描述

disabled

规定输入字段应该被禁用。

max

规定输入字段的最大值。

maxlength

规定输入字段的最大字符数。

min

规定输入字段的最小值。

pattern

规定通过其检查输入值的正则表达式。

readonly

规定输入字段为只读（无法修改）。

required

规定输入字段是必需的（必需填写）。

size

规定输入字段的宽度（以字符计）。

step

规定输入字段的合法数字间隔。

value

规定输入字段的默认值。

date类型

实例：

<body>
<form action="提交的网页.html">
输入日期：<input type="date" >

</form>
</body>

web前端-表单的使用详解_html5_05


对日期进行限制：

<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>

web前端-表单的使用详解_数据_06

color类型

实例：

<body>
<form action="提交的网页.html">
选择颜色：<input type="color">
<input type="submit">

</form>
</body>

效果：

web前端-表单的使用详解_html5_07

range类型

实例：

<body>
<form action="提交的网页.html">
选择范围：<input type="range" min="10" max="100" >
<input type="submit">
</form>
</body>

效果：

web前端-表单的使用详解_html5_08

时间类型（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>

效果：

web前端-表单的使用详解_html5_09

email类型

实例：

<body>
<form action="提交的网页.html">
email： <input type="email">
<br><input type="submit">

</form>
</body>

效果：

web前端-表单的使用详解_前端_10

search类型（搜索）

常用于搜索框

实例：

<body>
<form action="提交的网页.html">
搜索：<input type="search">
<br><input type="submit">

</form>
</body>

效果：

web前端-表单的使用详解_html_11

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>

效果：

web前端-表单的使用详解_html_12

textarea元素（文本域）

实例：

<body>
<form action="提交的网页.html">
<textarea rows="10" cols="10">
    shuru
</textarea>

<br><input type="submit">
</form>
</body>

效果：

web前端-表单的使用详解_前端_13

button元素（按钮）

实例：

<body>
<form action="提交的网页.html">
按钮：<button onclick="alert('hello world')">我是按钮</button>

<br><input type="submit">
</form>
</body>

效果：

web前端-表单的使用详解_html_14

小结

在学习表单标签之前还不知道居然还有这么多标签元素呢，总结了一下确实收获颇多，还有什么需要补充的欢迎在评论区补充啊。今天咱们就到这，咱们下期再见！！

举报

相关推荐

Web前端html的表单

前端javascriptvue.js

表单标签 [HTML][web前端]

webhtml5css

【前端】input表单 type属性详解

ArkTSHarmonyOS

【Web前端】创建我的第一个 Web 表单

表单数据服务器HTMLweb前端JavaScript前端开发指尖人生

【响应式Web前端设计】常用表单控件

html

web前端-JavaScript中的数组详解

前端javascript开发语言原力计划数组虚拟化云计算

【Web前端】CSS详解(上篇)

前端csscss3

【Web前端】HTML详解(上篇)

前端html

【Web前端】CSS详解(中篇)

css前端css3

Web前端笔记+表单练习+五彩导航

前端笔记
0 条评论