HTML:表单

目录

案例:

一、form标签

二、input标签

三、textarea标签

四、select标签

五、fieldset 标签


案例:

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>报名表</title>
</head>
<body><form action="demo/welcome.php" method="post">名字:<input type="text" name="name"><br><br>邮箱:<input type="text" name="email"><br><br><button type="submit">提交</button></form>
</body>
</html>

一、form标签

<form> 标签用于为用户输入创建 HTML 表单。可以包含input、select等标签。

属性描述
methodget/post规定发送数据的HTTP方法。
actionURL表单向何处发送数据。

拓展资料:

POST和GET的区别:

1.用法不同:

        GET请求:从指定的资源请求数据,用于获取数据,一般用于搜索排序和筛选之类的操作。

        POST请求:向指定的资源提交要被处理的数据,用于将数据发送给服务器。

2.安全程度:

        GET 请求:它的数据附加在 URL 上,因此对所有人都是可见的,这可能会引起安全问题,特别是当传输敏感数据时。

        POST 请求:其数据在请求体内,对用户不可见,更适合传输敏感信息。

3.大小限制:

        GET 请求:有URL长度限制,只能发送小数据量。

        POST 请求:数据大小限制小,适合发送大数据量。

4.缓存和历史记录:

        GET 请求:会存在在缓存和历史记录中。

        POST 请求:不会存在在缓存和历史记录中。

二、input标签

<input>输入字段,根据type的变化有多种类型,无闭合标签。

属性描述
type

text文本框、password密码、radio单选框、checkbox复选框、submit提交按钮、reset重置按钮

data日期,datetime-local详细时间

根据type不同的取值有不同的类型。
checkedchecked与复选框和单选框搭配表示默认选定该项。
sizenumber表示文本框的宽度。
valuetext表示输入框默认值。
maxlengthnumber表示文本框最大输入字符数。

<lable>标签:它的for属性可与单选框和复选框搭配使用,用来扩大其选中范围。只要保持for的值与复选框或单选框的id值相等即可。

实例:

<form action="" method="post"><input id="跑步" type="checkbox"><label for="跑步">跑步</label>
</form>

效果:

<button>标签:代表自定义按钮,要编写JavaScript脚本函数且用onclick链接。 

三、textarea标签

textarea标签:代表多行文本输入框可以用cols和rows指定列数和行数。

实例:

<form action="" method="post"><textarea cols="15" rows="10"></textarea>
</form>

效果:

 

四、select标签

<select>标签:用来制作下拉列表,内含option标签,有多少个选项就有多少个option标签,其次option标签含selected表示默认被选中。

属性描述
sizenumber指定下拉列表最大可见项数目。
autofocusautofocus指定在页面加载后文本区域自动获得焦点。
multiplemultiple指定该下拉列表支持多个选项,可多选。

实例:

<form action="" method="post"><select multiple="multiple" size="1"><option >hello</option><option >world</option><option >11111</option></select>
</form>

效果: 

五、fieldset 标签

<fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段,可以与legend标签搭配使用。当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素。

<legend>标签用于为fieldset标签添加说明文字。

注意:legend 元素必须是 fieldset 元素的第一个子元素。

 实例:

<fieldset><legend>健康信息</legend>身高:<input type="text" />体重:<input type="text" />
</fieldset>

 效果:

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

FME学习之旅---day22

我们付出一些成本&#xff0c;时间的或者其他&#xff0c;最终总能收获一些什么。 教程&#xff1a;栅格入门 FME 支持读取和写入 70 多种栅格格式。本教程将介绍几个基本示例&#xff0c;展示如何使用 FME 读取、转换和写入栅格数据。 FME 数据检查器不应用任何对比度增强。因…

书生·浦语大模型第二期实战营第二课笔记和基础作业

来源&#xff1a; 作业要求:Homework - Demo 文档教程:轻松玩转书生浦语大模型趣味 Demo B站教程:轻松玩转书生浦语大模型趣味 Demo 1. 笔记 2.基础作业 2.1 作业要求 2.2 算力平台 2.3 新建demo目录&#xff0c;以及新建目录下的文件&#xff0c;下载模型参数 2.4 Intern…

关于GNSS硬件延迟初步学习,电离层提取

1、卫星端偏差分为频间和频内偏差&#xff08;inter or intra frequency&#xff09;&#xff0c;下面以GPS的C1C和C2W组合为例分析对PPP解算的影响&#xff1a; 如果不改正卫星端的inter-frequency&#xff08;即&#xff1a;C1C-C1W&#xff09;偏差&#xff08;因为每颗卫星…

Spring Boot 切面的一种的测试方法,java中级开发面试

void afterReturnName() { Assertions.assertEquals(studentController.getNameById(123L).getName(), "测试姓名Yz");} } 但往往切面中的逻辑并非这么简单&#xff0c;在实际的测试中其实我们也完成没有必要关心在切面中到底发生了什么&#xff08;发生了什么应该在…

旧衣回收市场发展快速,线上小程序为商家提供新机遇

随着人们生活水平的提高&#xff0c;衣服淘汰的速度也在不断加快&#xff0c;每年垃圾站都会有非常多的废弃衣物。旧衣物的废弃不仅对环境有破坏&#xff0c;还造成了资源浪费。 因此&#xff0c;旧衣物回收行业受到了大众的关注&#xff0c;旧衣回收市场具有先天的优势&#…

AOF文件重写

1.2.3.AOF文件重写 因为是记录命令&#xff0c;AOF文件会比RDB文件大的多。而且AOF会记录对同一个key的多次写操作&#xff0c;但只有最后一次写操作才有意义。通过执行bgrewriteaof命令&#xff0c;可以让AOF文件执行重写功能&#xff0c;用最少的命令达到相同效果。 如图&am…

Chrome谷歌下载入口

​hello&#xff0c;我是小索奇 发现好多人说谷歌浏览器在哪里下载呀&#xff0c;哪里可以找到&#xff1f; 你可能会心想&#xff0c;一个浏览器你还不会下载啊&#xff1f; 还真是&#xff0c;有很多伙伴找不到下载入口&#xff0c;为什么呢&#xff1f; Bing进行搜索&am…

Open CASCADE学习|求曲面的参数空间

在三维空间中&#xff0c;任意的曲面都可以通过特定的方法映射到一个二维参数平面上&#xff0c;从而对其进行详细的几何分析和处理。首先&#xff0c;我们需要从三维模型中提取出特定的曲面&#xff0c;这通常被称为“Face”。一个face可以被视为三维空间中的一个封闭区域&…

java程序生成exe文件启动时,在没有java环境计算机运行

1.idea项目配置工件 2. 开始构建java程序成jar包 3. 生成exe启动程序

【第七篇】使用BurpSuite进行主动、被动扫描和主动、被动爬虫

文章目录 前言主动扫描被动扫描主动爬虫被动爬虫前言 Burp Scanner 既可以用作全自动扫描仪,也可以用作增强手动测试工作流程的强大手段。 扫描网站涉及两个阶段: 抓取内容和功能: Burp Scanner 首先在目标站点周围导航,密切反映真实用户的行为。它对站点的结构和内容以及…

【数据库】数据库应用系统生命周期

目录 1.为什么提出”软件工程“的思想&#xff1f; 2.为什么提出”瀑布模型“&#xff1f;缺点是什么&#xff1f; 3.为什么提出”快速原型模型“&#xff1f; 4.为什么提出”螺旋模型“&#xff1f; 5.关于数据库的英文缩写。 6.模型设计中的3条设计主线&#xff1a;数…

106. 跑步锻炼(结果填空)

public class Main { public static void main(String[] args) { int startYear 2000; int startMonth 1; int startDay 1; // 周六 int endYear 2020; int endMonth 10; int endDay 1; // 周四 int totalDistance 0; // 计算开始日期到结束日期之间的每一天 …

《C++程序设计》阅读笔记【7-堆和拷贝构造函数】

&#x1f308;个人主页&#xff1a;godspeed_lucip &#x1f525; 系列专栏&#xff1a;《C程序设计》阅读笔记 本文对应的PDF源文件请关注微信公众号程序员刘同学&#xff0c;回复C程序设计获取下载链接。 1 堆与拷贝构造函数1.1 概述1.2 分配堆对象1.3 拷贝构造函数1.3.1 默…

观察者模式 C++

&#x1f442; Honey Honey - 孙燕姿 - 单曲 - 网易云音乐 目录 &#x1f33c;前言 &#x1f33c;描述 &#x1f382;问题 &#x1f4aa;解决方案 &#x1f232;现实场景 代码 场景1 -- 报纸发行 场景 解释 代码 场景2 -- 气象资料发布 场景3 -- 过红绿灯 &#x…

Partition分区案例实操

文章目录 问题引出和分析需求代码实现运行结果分区总结 问题引出和分析 要求将统计结果按照条件输出到不同的文件中&#xff08;分区&#xff09;&#xff0c;比如将统计结果按照手机归属地不同省份输出到不同的文件中。 默认的分区&#xff1a; 默认的分区是根据key的hashCo…

文件处理的神器,一键上传签署,安全又高效!

客户介绍 某技术股份有限公司是一家在高科技领域深耕多年的知名企业&#xff0c;专注于技术创新与产品研发&#xff0c;致力于为客户提供前沿、高效的解决方案。在业务范围方面&#xff0c;该公司涵盖了多个领域&#xff0c;包括智能制造、新能源、信息技术等。公司凭借卓越的…

ITK 重采样 resample

Itk 重新采样有二多种情况&#xff0c;这里说二种情况 1. 输入参数 &#xff0c;和输出相关数据&#xff0c;输出范围&#xff0c;spacing &#xff1b; typedef itk::Image< float, 3 > itkFloatImageType;typedef itk::ResampleImageFilter < itkFloatImageType, i…

docker 创建容器过程

结合下图&#xff0c;本文讨论docker 创建容器过程&#xff1a; START└── [用户通过Docker Client发出指令]└── (1) docker run 或 docker create 命令├── (2) Docker Client与Docker Daemon建立通信连接└── (3) Docker Daemon接收到创建容器请求├── (4) 检查…

【MySQL数据库 | 第二十五篇】深入探讨MVCC底层原理

前言&#xff1a; 在当今互联网时代&#xff0c;数据库扮演着数据存储和管理的关键角色。对于大型Web应用程序和企业级系统而言&#xff0c;高效地处理并发访问和事务管理是至关重要的。多版本并发控制&#xff08;MVCC&#xff09;是一种数据库事务处理的技术&#xff0c;旨…

【复现】用友NC-Cloud文件上传漏洞_70

目录 一.概述 二 .漏洞影响 三.漏洞复现 1. 漏洞一&#xff1a; 四.修复建议&#xff1a; 五. 搜索语法&#xff1a; 六.免责声明 一.概述 用友NC Cloud大型企业数字化平台&#xff0c;深度应用新一代数字智能技术&#xff0c;完全基于云原生架构&#xff0c;打造开放、…