HTML:表单

news2024/10/6 4:04:16

案例:

<!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.coloradmin.cn/o/1573711.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Linux】进程初步理解

个人主页 &#xff1a; zxctscl 如有转载请先通知 文章目录 1. 冯诺依曼体系结构1.1 认识冯诺依曼体系结构1.2 存储金字塔 2. 操作系统2.1 概念2.2 结构2.3 操作系统的管理 3. 进程3.1 进程描述3.2 Linux下的PCB 4. task_struct本身内部属性4.1 启动4.2 进程的创建方式4.2.1 父…

如何不编程用 ChatGPT 爬取网站数据?

敢于大胆设想&#xff0c;才能在 AI 时代提出好问题。 需求 很多小伙伴&#xff0c;都需要为研究获取数据。从网上爬取数据&#xff0c;是其中关键一环。以往&#xff0c;这都需要编程来实现。 可最近&#xff0c;一位星友在知识星球提问&#xff1a; 这里涉及到一些个人隐私&a…

秋招刷题4(动态规划)

1.购物单 import java.util.Scanner;public class Main {public static void main(String[] args){Scanner sc new Scanner(System.in);int N sc.nextInt();int m sc.nextInt();Goods[] goods new Goods[m];for(int i 0; i < m; i){goods[i] new Goods();}for(int i …

Dev c++ C语言实现第一个 dll 动态链接库 创建与调用

代码来源&#xff1a; 极简版 C 动态链接库&#xff08;DLL&#xff09;创建与调用 - 知乎 (zhihu.com) 现在移植到Devc 里 首先创建DLL 项目&#xff0c;如果不创建&#xff0c;直接粘贴代码编译不通过&#xff0c;应该是项目里指定了链接类型。 如图&#xff1a; 然后选择…

【数据结构(二)】顺序表与ArrayList

❣博主主页: 33的博客❣ ▶文章专栏分类:数据结构◀ &#x1f69a;我的代码仓库: 33的代码仓库&#x1f69a; &#x1faf5;&#x1faf5;&#x1faf5;关注我带你学更多数据结构知识 目录 1.前言2.定义IList接口3.MyArraylist实现接口3.1定义成员变量与构造方法3.2添加元素3.3…

Jackson 2.x 系列【14】特征配置篇之 MapperFeature

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Jackson 版本 2.17.0 源码地址&#xff1a;https://gitee.com/pearl-organization/study-jaskson-demo 文章目录 1. 前言2. 通用2.1 USE_ANNOTATIONS2.2 USE_GETTERS_AS_SETTERS2.3 PROPAGATE_TR…

c 语言 指数搜索(Exponential Search)

该搜索算法的名称可能会产生误导&#xff0c;因为它的工作时间为 O(Log n)。该名称来自于它搜索元素的方式。 给定一个已排序的数组和要 搜索的元素 x&#xff0c;找到 x 在数组中的位置。 输入&#xff1a;arr[] {10, 20, 40, 45, 55} x 45 输出&#xff1a;在索…

多语言婚恋交友APP开发的关键成功因素

随着移动互联网的快速发展&#xff0c;多语言婚恋交友APP的需求和发展逐渐成为了一个备受关注的话题。在全球范围内&#xff0c;人们希望通过移动应用来寻找爱情、建立关系和拓展社交圈子&#xff0c;因此开发一款具有全球影响力的多语言婚恋交友APP成为了许多开发者的目标。针…

支持编写任何类型的爬虫:基于 Golang 的优雅爬虫框架 | 开源日报 No.216

gocolly/colly Stars: 21.5k License: Apache-2.0 colly 是 Golang 的优雅爬虫和爬虫框架。 该项目提供了一个清晰的接口&#xff0c;用于编写任何类型的爬虫/抓取器/蜘蛛。Colly 可以轻松从网站中提取结构化数据&#xff0c;可用于数据挖掘、数据处理或存档等各种应用。 其主…

使用免费开源AI平台:OCR识别抖音短视频及网络图片中文字内容(可本地部署)

在数字化时代&#xff0c;信息的快速获取和处理变得尤为重要。网络图片文字识别技术作为一项重要的人工智能应用&#xff0c;已经在多个领域展现出其独特的价值。本文将基于思通数科AI开放平台提供的网络图片文字识别服务&#xff0c;探讨该技术的应用场景、特色优势以及如何有…

超声波清洗机哪家强?超声波清洗机排行榜!最强超声波清洗机推荐

眼镜作为日常生活中不可或缺的用品&#xff0c;对于很多人来说是必备的。然而&#xff0c;随着使用时间的增长&#xff0c;眼镜表面往往会沾染灰尘、污垢等&#xff0c;这不仅影响了镜片的透光性&#xff0c;也可能影响到使用者的视力和舒适度。因此&#xff0c;清洁眼镜成了一…

PowerShell正则表达式匹配文件内容并输出到屏幕(或保存到文件)

代码&#xff1a; foreach ($line in Get-Content -path .\test.sql) { if ($line -match bdw_\w*.\w*) {write-output $matches[0]}}思路&#xff1a; 读取文件并遍历 foreach ($line in Get-Content -path .\test.sql) 正则匹配 if ($line -match ‘bdw_\w*.\w*’) 这个匹配…

Spring拓展点之SmartLifecycle如何感知容器启动和关闭

Spring为我们提供了拓展点感知容器的启动与关闭&#xff0c;从而使我们可以在容器启动或者关闭之时进行定制的操作。Spring提供了Lifecycle上层接口&#xff0c;这个接口只有两个方法start和stop两个方法&#xff0c;但是这个接口并不是直接提供给开发者做拓展点&#xff0c;而…

Spring的事务详解

Spring的事务详解 一&#xff0c;什么是Spring事务 Spring 事务是 Spring 框架提供的一种对事务进行管理的机制。在使用 Spring 事务时&#xff0c;可以通过注解或编程方式将需要进行事务管理的方法和代码块标记为事务性操作&#xff0c;当这些操作被执行时&#xff0c;Spring…

吴恩达:AI 智能体工作流

热门文章推荐&#xff1a; &#xff08;1&#xff09;《为什么很多人工作 3 年 却只有 1 年经验&#xff1f;》&#xff08;2&#xff09;《一文掌握大模型提示词技巧&#xff1a;从战略到战术巧》&#xff08;3&#xff09;《AI 时代&#xff0c;程序员的出路在何方&#xff1…

人工智能上手 Pytorch

人工智能上手 Pytorch 1、人工智能框架历史走向 2015年&#xff0c; caffe&#xff0c;优势配置简单&#xff0c;缺点安装麻烦&#xff0c;且不更新维护 2016年&#xff0c;tensorflow 1.x&#xff0c;定义太严格&#xff0c;很复杂。开发成本高。简单的任务&#xff0c;也很…

360勒索病毒:变种360袭击了您的计算机?

引言&#xff1a; 随着科技的发展&#xff0c;网络安全问题变得日益突出&#xff0c;勒索病毒成为了当前网络威胁的一大主要形式之一。其中&#xff0c;360勒索病毒是近期备受关注的一种恶意软件。本文将介绍360勒索病毒的特点以及如何有效地应对此类威胁。如果受感染的数据确…

从三个维度看,你的企业是否需要引入精益管理咨询?

在快速变化的商业环境中&#xff0c;企业不断寻求提升自身运营效率和竞争力的方法。其中&#xff0c;精益管理作为一种追求卓越、消除浪费的管理理念&#xff0c;被越来越多的企业所认可。但是&#xff0c;如何判断自己的组织是否需要进行精益企业管理咨询呢&#xff1f;天行健…

I2C驱动实验:读取AP3216C设备中寄存器的数据

一. 简介 经过前面几篇文章的学习&#xff0c;已经完成了I2C驱动框架&#xff0c;字符设备驱动框架&#xff0c;编写了 读写 I2C设备中寄存器的数据的代码&#xff0c;文章如下&#xff1a; I2C驱动实验&#xff1a;实现读/写I2C设备寄存器的函数-CSDN博客 本文在此基础上&a…

Java | Leetcode Java题解之第14题最长公共前缀

题目&#xff1a; 题解&#xff1a; class Solution {public String longestCommonPrefix(String[] strs) {if (strs null || strs.length 0) {return "";}int minLength Integer.MAX_VALUE;for (String str : strs) {minLength Math.min(minLength, str.length…