前端进阶之HTML表单

前端之HTML表单

1.HTML表单的定义及概述

HTML 表单用于搜集不同类型的用户输入。

用<form> 元素定义HTML表单

例如：

<form>
 .
form elements
 .
</form>

1.1 HTML 表单包含表单元素：表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

<input> 元素

<input> 元素是最重要的表单元素。

<input>元素有很多形态，根据不同的 type 属性。

在这里插入图片描述

1.2 文本输入

<input type="text"> 定义用于文本输入的单行输入字段：

例如：

<!DOCTYPE html>
<html>
<body>

<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

<p>请注意表单本身是不可见的。</p>

<p>同时请注意文本字段的默认宽度是 20 个字符。</p>

</body>
</html>

结果如下
在这里插入图片描述

1.3 单选按钮输入

<input type="radio">定义单选按钮。

单选按钮允许用户在有限数量的选项中选择其中之一：

例如：

<!DOCTYPE html>
<html>
<body>

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form> 

</body>
</html>

在这里插入图片描述

1.4 提交按钮

<input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮。

表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。

表单处理程序在表单的 action 属性中指定：

<!DOCTYPE html>
<html>
<body>

<form action="/demo/demo_form.asp">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form> 

<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>

</body>
</html>

在这里插入图片描述

1.5 Action 属性

action 属性定义在提交表单时执行的动作。(跟1.4那个东西联合使用)

向服务器提交表单的通常做法是使用提交按钮。

通常，表单会被提交到 web 服务器上的网页。

在上面的例子中，指定了某个服务器脚本来处理被提交表单：

<form action="action_page.php">

1.6 Method 属性

method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：

<form action="action_page.php" method="GET">
<!--或：-->
<form action="action_page.php" method="POST">

GET（默认方法）：

如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。

当您使用 GET 时，表单数据在页面地址栏中是可见的：

注释：GET 最适合少量数据的提交。浏览器会设定容量限制。

POST：

如果表单正在更新数据，或者包含敏感信息（例如密码）。

POST 的安全性更好，因为在页面地址栏中被提交的数据是不可见的

1.7 Name 属性

如果要正确地被提交，每个输入字段必须设置一个 name 属性。

本例只会提交 “Last name” 输入字段：

<!DOCTYPE html>
<html>
<body>

<form action="/demo/demo_form.asp">
First name:<br>
<input type="text" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form> 

<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>

<p>first name 不会被提交，因为此 input 元素没有 name 属性。</p>

</body>
</html>

在这里插入图片描述

1.8 用 组合表单数据

<fieldset>元素组合表单中的相关数据

<legend>元素为<fieldset> 元素定义标题。

<!DOCTYPE html>
<html>
<body>

<form action="/demo/demo_form.asp">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form>

</body>
</html>

在这里插入图片描述

1.9 HTML Form 属性

HTML<form> 元素，已设置所有可能的属性，是这样的：（这个勾八有点像CSS统一设置的那种感觉奥）

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form elements
 .
</form>

在这里插入图片描述
后边再细讲。

2. HTML 表单属性

本节介绍 HTML<form> 元素的不同属性.

2.1 Action 属性

action 属性定义提交表单时要执行的操作。

通常，当用户单击“提交”按钮时，表单数据将发送到服务器上的文件中。

在下面的例子中，表单数据被发送到名为 “action_page.php” 的文件。该文件包含处理表单数据的服务器端脚本：

<!DOCTYPE html>
<html>
<body>

<h1>HTML 表单</h1>

<form action="/demo/html/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Bill"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Gates"><br><br>
  <input type="submit" value="提交">
</form> 

<p>如果您点击提交按钮，form-data 会被发送到名为 "/action_page.php" 的页面。</p>

</body>
</html>

在这里插入图片描述

2.2 Target 属性

target 属性规定提交表单后在何处显示响应。

target 属性可设置以下值之一：
在这里插入图片描述
例如：

<!DOCTYPE html>
<html>
<body>

<h1>form target 属性</h1>

<p>在提交这个表单后，将在新浏览器标签页中打开结果：</p>

<form action="/demo/html/action_page.php" target="_blank">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Bill"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Gates"><br><br>
  <input type="submit" value="Submit">
</form> 

</body>
</html>

在这里插入图片描述

2.3 Method 属性

method 属性指定提交表单数据时要使用的 HTTP 方法。

表单数据可以作为 URL 变量（使用 method=“get”）或作为 HTTP post 事务（使用 method=“post”）发送。

提交表单数据时，默认的 HTTP 方法是 GET。

GET方法的例子：

<!DOCTYPE html>
<html>
<body>

<h1>method 属性</h1>

<p>该表单会使用 GET 方法提交：</p>

<form action="/demo/html/action_page.php" target="_blank" method="get">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Bill"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Gates"><br><br>
  <input type="submit" value="Submit">
</form>

<p>提交后，请注意，表单值在新的浏览器标签页的地址栏中是可见的。</p>

</body>
</html>

在这里插入图片描述
POST方法的例子：

<!DOCTYPE html>
<html>
<body>

<h1>method Attribute</h1>

<p>该表单会使用 POST 方法提交：</p>

<form action="/demo/html/action_page.php" target="_blank" method="post">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Bill"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Gates"><br><br>
  <input type="submit" value="Submit">
</form>

<p>提交后，请注意，与 GET 方法不同，表单值在新浏览器的地址栏中不可见。</p>

</body>
</html>

关于 GET 的注意事项：

  • 以名称/值对的形式将表单数据追加到 URL
  • 永远不要使用 GET 发送敏感数据！（提交的表单数据在 URL 中可见！）
  • URL 的长度受到限制（2048 个字符）
  • 对于用户希望将结果添加为书签的表单提交很有用
  • GET 适用于非安全数据，例如 Google 中的查询字符串
    关于 POST 的注意事项：
  • 将表单数据附加在 HTTP 请求的正文中（不在 URL 中显示提交的表单数据）
  • POST 没有大小限制，可用于发送大量数据。
  • 带有 POST 的表单提交无法添加书签

2.4 Autocomplete 属性

autocomplete 属性规定表单是否应打开自动完成功能。（就是历史记录，记忆你上次输入的东西，就是网页的钥匙库）

启用自动完成功能后，浏览器会根据用户之前输入的值自动填写值。

例子：

<!DOCTYPE html>
<html>
<body>

<h1>form autocomplete 属性</h1>

<p>请填写并提交表单，然后重新加载页面，再次开始填写表单 - 查看 autocomplete 的工作原理。</p>

<p>然后，请尝试把 autocomplete 设置为 "off"。</p>

<form action="/demo/html/action_page.php" autocomplete="on">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="email">Email:</label>
  <input type="text" id="email" name="email"><br><br>
  <input type="submit">
</form>

</body>
</html>

这个结果就不演示了，自己运行一下就明白了

2.5 Novalidate 属性

novalidate 属性是一个布尔属性。

如果已设置，它规定提交时不应验证表单数据。

现在并不知道这个东西有啥用，先放着回头再说。

2.6 表单属性总结

在这里插入图片描述

3. HTML表单元素

3.1 <input>元素

最重要的表单元素是 元素。

<input>元素根据不同的 type 属性，可以变化为多种形态。

3.2 <select>元素（下拉列表）

<select>元素定义下拉列表：

<!DOCTYPE html>
<html>
<body>

<form action="/demo/demo_form.asp">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>

</body>
</html>

在这里插入图片描述
在这里插入图片描述

3.3 <textarea> 元素

<textarea>元素定义多行输入字段（文本域）

<!DOCTYPE html>
<html>
<body>

<h1>Textarea</h1>

<p>textarea 元素定义多行输入字段。</p>

<form action="/demo/html/action_page.php">
  <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
  <br><br>
  <input type="submit">
</form>

</body>
</html>

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/686677.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

成功解决：AssertionError: Torch not compiled with CUDA enabled

成功解决：AssertionError: Torch not compiled with CUDA enabled

在运行pycharm项目的时候，出现了以上的报错，主要可以归结于以下两个个方面： 1、没有安装GPU版本的pytorch，只是使用清华的镜像地址下载了CPU版本的pytorch 2、安装的CUDA和安装的pytorch的版本不相互对应 我使用 pip list 来查看我在该环境下安装了哪些依赖项，发现自…
阅读更多...
前端项目打包、部署的基础 (vue)

前端项目打包、部署的基础 (vue)

详细请看B站视频 BV19n4y1d7Gr 《禹神&#xff1a;前端项目部署指南&#xff0c;前端项目打包上线》&#xff0c;本博客为自用视频笔记。 目录 项目打包vue打包打包前分析项目请求 本地服务器部署问题 & 解决问题1&#xff1a;刷新页面404问题问题2&#xff1a;ajax请求废…
阅读更多...
Java——break、continue和return

Java——break、continue和return

一、break break语句用于立即终止最内层的循环或switch语句。它是一种控制流语句&#xff0c;能够在满足特定条件时跳出循环或结束switch块的执行。 1、在循环中使用 1&#xff09;一般的 break break语句可以用于for、while和do-while循环中。当在循环中遇到break语句时&a…
阅读更多...
剪辑软件大揭秘：解锁图片叠加新技能，轻松将一张图片置于另一张图片之上，创意无限！

剪辑软件大揭秘：解锁图片叠加新技能，轻松将一张图片置于另一张图片之上，创意无限！

在数字时代的浪潮中&#xff0c;视频剪辑已经成为我们生活中不可或缺的一部分。无论是记录生活点滴&#xff0c;还是打造专业影片&#xff0c;一款功能强大的视频剪辑软件都是我们的得力助手。今天&#xff0c;就让我为大家揭秘一款神奇的剪辑软件——媒体梦工厂&#xff0c;它…
阅读更多...
MySQL排序操作

MySQL排序操作

025排序操作 select .. from .. order by 字段 asc/descselect empno, ename, sal from emp order by sal asc;asc 不写的话&#xff0c;默认升序 多个字段排序 查询员工的编号、姓名、薪资&#xff0c;按照薪资升序排列&#xff0c;如果薪资相同的&#xff0c;再按照姓名升…
阅读更多...
5G商用五周年，我们该如何评价它？

5G商用五周年，我们该如何评价它？

今天&#xff0c;对中国通信行业来说&#xff0c;是一个特殊的日子。 五年前&#xff0c;也就是2019年6月6日&#xff0c;工信部正式向中国电信、中国移动、中国联通、中国广电发放了5G商用牌照&#xff0c;标志着国内5G开始正式商用。 换言之&#xff0c;今天&#xff0c;是中…
阅读更多...
Mysql学习（四）——SQL通用语法之DQL

Mysql学习（四）——SQL通用语法之DQL

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 DQLDQL-语法基本查询条件查询聚合函数分组查询排序查询分页查询 DQL DQL数据查询语言&#xff0c;用来查询数据库中表的记录。 DQL-语法 select 字段列表 from 表…
阅读更多...
深度强化学习+大模型综述Survey on Large Language Model-Enhanced Reinforcement Learning

深度强化学习+大模型综述Survey on Large Language Model-Enhanced Reinforcement Learning

论文地址&#xff1a;[2404.00282] Survey on Large Language Model-Enhanced Reinforcement Learning: Concept, Taxonomy, and Methods (arxiv.org) 摘要 对 LLM 增强 RL 中现有文献进行了全面的回顾&#xff0c;并总结了其与传统 RL 方法相比的特征&#xff0c;旨在阐明未…
阅读更多...
【Python短期内快速掌握学习人工智能知识能力】：从零到入门的NLP学习秘籍

【Python短期内快速掌握学习人工智能知识能力】：从零到入门的NLP学习秘籍

⭐️我叫忆_恒心&#xff0c;一名喜欢书写博客的研究生&#x1f468;‍&#x1f393;。 如果觉得本文能帮到您&#xff0c;麻烦点个赞&#x1f44d;呗&#xff01; 近期会不断在专栏里进行更新讲解博客~~~ 有什么问题的小伙伴 欢迎留言提问欧&#xff0c;喜欢的小伙伴给个三连支…
阅读更多...
基于.NetCore和ABP.VNext的项目实战九：集成Hangfire实现定时任务处理

基于.NetCore和ABP.VNext的项目实战九：集成Hangfire实现定时任务处理

Hangfire 是一个开源的.NET 任务调度框架，它提供了内置集成化的控制台，允许用户直观明了地查看作业调度情况。它基于队列的任务处理机制，客户端使用 BackgroundJob 类的静态方法 Enqueue 来调用指定的方法或匿名函数，并将任务持久化到数据库。 本文将完成一个任务调度中心…
阅读更多...
实验五、IPv4地址的子网划分，第1部分《计算机网络》

实验五、IPv4地址的子网划分，第1部分《计算机网络》

但凡你有点本事&#xff0c;也不至于一点本事都没有。 目录 一、实验目的 二、实验内容 三、实验小结 一、实验目的 完成本练习之后&#xff0c;您应该能够确定给定 IP 地址和网络掩码 的网络信息。本练习旨在让您掌握如何根据给定 IP 地址计算网络 IP 地址信息。 二、实验…
阅读更多...
万里长城第一步——尚庭公寓【技术概述】

万里长城第一步——尚庭公寓【技术概述】

简略版&#xff1a; 项目概述主要是移动端&#xff08;房源检索&#xff1b;预约看房&#xff0c;租赁管理&#xff0c;浏览历史&#xff09;和后台管理&#xff08;管理员对房源进行操作&#xff09;&#xff1b; 项目使用前后端分离的方法&#xff0c;主要以后端为主&#xf…
阅读更多...
企业数据挖掘建模平台极简建模流程

企业数据挖掘建模平台极简建模流程

泰迪智能科技企业数据挖掘建模平台是企业自主研发&#xff0c;面向企业级用户的快速数据处理构建模型工具。平台底层算法基于R语言、Python、Spark等引擎&#xff0c;使用JAVA语言开发&#xff0c;采用 B/S 结构&#xff0c;用户无需下载客户端&#xff0c;可直接通过浏览器进…
阅读更多...
CANoe-Trace窗口无法解析SOME/IP报文、Demo License激活方式改变

CANoe-Trace窗口无法解析SOME/IP报文、Demo License激活方式改变

1、Trace窗口无法解析SOME/IP报文 在文章《如何让CANoe或Wireshark自动解析应用层协议》中，我们通过设置指定端口号为SOME/IP报文的方式，可以让CANoe中的Trace窗口对此端口号的报文当成是SOME/IP报文进行解析。 Trace窗口就可以根据传输层端口号对payload数据按照SOME/IP协议…
阅读更多...
【前端面试3+1】18 vue2和vue3父传子通信的差别、props传递的数据在子组件是否可以修改、如何往window上添加自定义属性、【多数元素】

【前端面试3+1】18 vue2和vue3父传子通信的差别、props传递的数据在子组件是否可以修改、如何往window上添加自定义属性、【多数元素】

一、vue2和vue3父传子通信的差别 1、Vue2 父组件向子组件传递数据通常通过props属性来实现。父组件可以在子组件的标签中使用v-bind指令将数据传递给子组件的props属性。在子组件中&#xff0c;可以通过props属性来接收这些数据。这种方式是一种单向数据流的方式&#xff0c;父…
阅读更多...
Astar路径规划算法复现-python实现

Astar路径规划算法复现-python实现

# -*- coding: utf-8 -*- """ Created on Fri May 24 09:04:23 2024"""import os import sys import math import heapq import matplotlib.pyplot as plt import time 传统A*算法 class Astar:AStar set the cost heuristics as the priorityA…
阅读更多...
【C++】 使用CRT 库检测内存泄漏

【C++】 使用CRT 库检测内存泄漏

CRT 库检测内存泄漏 一、CRT 库简介二、CRT 库的使用1、启用内存泄漏检测2、设置应用退出时显示内存泄漏报告3、丰富内存泄漏报告4、演示使用 内存泄漏是 C/C 应用程序中最微妙、最难以发现的 bug&#xff0c;存泄漏是由于之前分配的内存未能正确解除分配而导致的。 最开始的少…
阅读更多...
面试（02）————Java集合篇

面试（02）————Java集合篇

目录 一、为什么数组索引是从0开始&#xff1f;如果从1开始不行吗&#xff1f; 二、ArrayList底层的实现原理是什么&#xff1f; ​编辑三、ArrayList list new ArrayList(10)中的list扩容几次&#xff1f; 四、如何实现数组与List之间的转换&#xff1f; 五、ArrayList…
阅读更多...
计算机图形学入门07：光栅化中的采样与走样

计算机图形学入门07：光栅化中的采样与走样

1.什么是光栅化&#xff1f; 在前面的章节里提过&#xff0c;光栅化(Rasterization)就是将物体投影在屏幕上的图形&#xff0c;依据像素打散&#xff0c;每一个像素中填充不同的颜色。 如下图中的老虎&#xff0c;可以看到屏幕上有各种多边形&#xff0c;这些多边形经过各种变换…
阅读更多...
线性回归模型详解

线性回归模型详解

一、引言 在机器学习中&#xff0c;线性回归模型是最基础也是最重要的预测模型之一&#xff0c;它是监督学习的一个简单但强大的工具&#xff0c;用于预测输出变量&#xff08;Y&#xff09;与一个或多个输入变量&#xff08;X&#xff09;之间的关系。线性回归模型以其容易理…
阅读更多...
最新文章

Copyright @ 2022~2023