HTML:表单

案例:

<!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.hqwc.cn/news/596343.html

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

相关文章

243.回文链表

给你一个单链表的头节点 head &#xff0c;请你判断该链表是否为 回文链表 。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,2,1] 输出&#xff1a;true示例 2&#xff1a; 输入&#xff1a;head …

复现chatgpt_ros,需要openapi key

&#xff11;&#xff0e; 前置工作&#xff1a; 现在&#xff55;buntu系统是20.04ros1&#xff0c;现在用docker新建并安装ros2&#xff1a; 最简单的&#xff0c;用大佬的一键安装&#xff1a; wget http://fishros.com/install -O fishros && . fishros 其次自己装…

数据挖掘入门项目二手交易车价格预测之建模调参

文章目录 目标步骤1. 调整数据类型&#xff0c;减少数据在内存中占用的空间2. 使用线性回归来简单建模3. 五折交叉验证4. 模拟真实业务情况5. 绘制学习率曲线与验证曲线6. 嵌入式特征选择6. 非线性模型7. 模型调参&#xff08;1&#xff09; 贪心调参&#xff08;2&#xff09;…

Python基于深度学习的动物图片识别技术的研究与实现

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

161 Linux C++ 通讯架构实战15,线程池代码分析

线程池应该使用的地方 和 epoll 技术结合 线程池代码处理数据的地方。 线程池分析&#xff1a; 线程池代码1 threadpool_create //Tencent8888 start threadpool_create函数的目的初始化线程池&#xff0c;对应的struct是 threadpool_t /* 1.先malloc整个线程池的大小 2.这里…

【代码随想录】哈希表

文章目录 242.有效的字母异位词349. 两个数组的交集202. 快乐数1. 两数之和454. 四数相加 II383. 赎金信15. 三数之和18. 四数之和 242.有效的字母异位词 class Solution {public boolean isAnagram(String s, String t) {if(snull || tnull || s.length()!t.length()){return …

推荐一款很强大的SCADA工业组态软件

演示地址&#xff1a;by组态[web组态插件] 可以广泛应用于化工、石化、制药、冶金、建材、市政、环保、电力等几十个行业。 一、产品简介 BY组态是完全自主研发的集实时数据展示、动态交互等一体的全功能可视化平台。帮助物联网、工业互联网、电力能源、水利工程、智慧农业、智…

专注项目管理的Mac工具 - Project Office Pro 最新版

Project Office Pro for Mac是一款功能强大的项目管理软件&#xff0c;旨在帮助用户更好地管理和跟踪项目进展&#xff0c;提高工作效率和质量。以下是该软件的主要功能介绍&#xff1a; 项目创建与编辑&#xff1a;用户可以根据自己的需求自定义项目计划&#xff0c;包括设置…

使用向量检索和rerank 在RAG数据集上实验评估hit_rate和mrr

文章目录 背景简介代码实现自定义检索器向量检索实验向量检索和rerank 实验 代码开源 背景 在前面部分 大模型生成RAG评估数据集并计算hit_rate 和 mrr 介绍了使用大模型生成RAG评估数据集与评估&#xff1b; 在 上文 使用到了BM25 关键词检索器。接下来&#xff0c;想利用向…

wireshark数据流分析学习日记day3-从 Pcap 导出对象

从 HTTP 流量导出文件 过滤http请求 发现get请求上传了两个文件 保存即可 也可以保存网页 点击保存 改文件名为html结尾以便于访问 请谨慎使用此方法。如果从 pcap 中提取恶意 HTML 代码并在 Web 浏览器中查看它&#xff0c;则 HTML 可能会调用恶意域&#xff0c;这就是为什么…

递归实现组合型枚举(acwing)

题目描述&#xff1a; 从 1∼n 这 n 个整数中随机选出 m 个&#xff0c;输出所有可能的选择方案。 输入格式&#xff1a; 两个整数 n,m ,在同一行用空格隔开。 输出格式&#xff1a; 按照从小到大的顺序输出所有方案&#xff0c;每行 1 个。 首先&#xff0c;同一行内的数…

机器学习 - multi-class 数据集训练 (含代码)

直接上代码 # Multi-class datasetimport numpy as np RANDOM_SEED 42 np.random.seed(RANDOM_SEED) N 100 # number of points per class D 2 # dimensionality K 3 # number of classes X np.zeros((N*K, D)) y np.zeros(N*K, dtypeuint8) for j in range(K):ix rang…