HTML常用标签-表单标签

news/2024/9/19 15:12:43/ 标签: html, 前端

表单标签

  • 1 表单标签
  • 2 表单项标签
    • 2.1 单行文本框
    • 2.2 密码框
    • 2.3 单选框
    • 2.4 复选框
    • 2.5 下拉框
    • 2.6 按钮
    • 2.7 隐藏域
    • 2.8 多行文本框
    • 2.9 文件标签

1 表单标签

表单标签,可以实现让用户在界面上输入各种信息并提交的一种标签. 是向服务端发送数据主要的方式之一

  • form标签,表单标签,其内部用于定义可以让用户输入信息的表单项标签
    • action, form标签的属性之一,用于定义信息提交的服务器的地址

    • method, form标签的属性之一,用于定义信息的提交方式

      • get get方式, 数据会缀到url后,以?作为参数开始的标识,多个参数用&隔开
      • post post方式,数据会通过请求体发送,不会在缀到url后
  • GET和POST区别
    • GET
      • 1 参数会以键值对形式放在url后提交
      • 2 数据直接暴露在地址栏上,相对不安全
      • 3 地址栏长度有限制,所有提交的数据量不大
      • 4 地址栏上,只能是字符,不能提交文件
      • 5 相比于post效率高一些
    • POST
      • 1 参数默认不放到rul后
      • 2 数据不会直接暴露在地址栏上,相对安全
      • 3 数据是单独打包通过请求体发送,提交的数据量比较大
      • 4 请求体中,可以是字符,也可以是字节数据、可以提交文件
      • 5 相比于get效率略低一些
  • input标签,主要的表单项标签,可以用于定义表单项
    • name, input标签的属性之一,用于定义提交的参数名
    • value, input标签的属性之一,用于提交数据
    • type, input标签的属性之一,用于定义表单项类型
      • text 文本框
      • password 密码框
      • submit 提交按钮
      • reset 重置按钮
  • 代码
html">   <form action="http://www.baidu.com" method="get">用户名 <input type="text" name="username" /> <br>&nbsp;&nbsp;&nbsp;<input type="password" name="password" /> <br><input type="submit"  value="登录" /><input type="reset"  value="重置" /></form>
  • 效果
    在这里插入图片描述

2 表单项标签

2.1 单行文本框

  • 代码
html">个性签名:<input type="text" name="signal"/><br/>
  • 效果

2.2 密码框

  • 代码
html">密码:<input type="password" name="secret"/><br/>
  • 效果

2.3 单选框

  • 代码
html">你的性别是:
<input type="radio" name="sex" value="spring" /><input type="radio" name="sex" value="summer" checked="checked" />
  • 效果

  • 说明

    • name属性相同的radio为一组,组内互斥
    • 当用户选择了一个radio并提交表单,这个radio的name属性和value属性组成一个键值对发送给服务器
    • 设置checked="checked"属性设置默认被选中的radio
    • 如果属性名和属性值一样的话,可以省略属性值,只写checked即可

2.4 复选框

  • 代码
html">你喜欢的球队是:
<input type="checkbox" name="team" value="Brazil"/>巴西
<input type="checkbox" name="team" value="German" checked/>德国
<input type="checkbox" name="team" value="France"/>法国
<input type="checkbox" name="team" value="China" checked="checked"/>中国
<input type="checkbox" name="team" value="Italian"/>意大利
  • 效果
    在这里插入图片描述
  • 说明
    • 设置checked="checked"属性设置默认被选中的checkbox

2.5 下拉框

  • 代码
html">你喜欢的运动是:
<select name="interesting"><option value="swimming">游泳</option><option value="running">跑步</option><option value="shooting" selected="selected">射击</option><option value="skating">溜冰</option>
</select>
  • 效果
  • 说明
    • 下拉列表用到了两种标签,其中select标签用来定义下拉列表,而option标签设置列表项。
    • name属性在select标签中设置,value属性在option标签中设置。
    • option标签的标签体是显示出来给用户看的,提交到服务器的是value属性的值。
    • 通过在option标签中设置selected="selected"属性实现默认选中的效果。

2.6 按钮

  • 代码
html"><button type="button">普通按钮</button><input type="button" value="普通按钮"/>
<button type="reset">重置按钮</button><input type="reset" value="重置按钮"/>
<button type="submit">提交按钮</button><input type="submit" value="提交按钮"/>
  • 效果
  • 说明
    • 普通按钮: 点击后无效果,需要通过JavaScript绑定单击响应函数
    • 重置按钮: 点击后将表单内的所有表单项都恢复为默认值
    • 提交按钮: 点击后提交表单

2.7 隐藏域

  • 代码
html"><input type="hidden" name="userId" value="2233"/>
  • 说明
    • 通过表单隐藏域设置的表单项不会显示到页面上,用户看不到。但是提交表单时会一起被提交。用来设置一些需要和表单一起提交但是不希望用户看到的数据,例如:用户id等等。
    • readonly 只读属性 提交时携带信息
    • disabled 不可用 提交时不懈怠信息

2.8 多行文本框

  • 代码
html">自我介绍:<textarea name="desc"></textarea>
  • 效果
  • 说明
    • textarea没有value属性,如果要设置默认值需要写在开始和结束标签之间。

2.9 文件标签

  • 代码
html">头像:<input type="file" name="file"/>
  • 效果
    在这里插入图片描述

http://www.ppmy.cn/news/1461495.html

相关文章

MySQL用SQL取三列中最大的数据值

1、有如下数据&#xff1a; ABC000097.0600330.72330.720069.650027.8827.85086.92086.92219.42219.4219.41 需要展示为如下形式&#xff1a; ABC结果列0000097.06097.060330.72330.72330.7200669.65009.6527.8827.85027.8886.92086.9286.92219.42219.4219.41219.42 解决办…

git仓库使用

git仓库是会限制空间大小限制的 git网络库的容量限制_github仓库大小限制-CSDN博客 git是用于管理github的工具 电脑左下角搜索git打开GitBash.exe 进入到要下载到本地的目录 下载到本地的文件不要更改&#xff01; 如果要使用请务必把文件复制到别的空间去再在这个别的空间…

Linux基础知识面试题

1. 请描述Linux操作系统的安装过程&#xff0c;并说明其中的关键步骤。 Linux操作系统的安装过程通常涉及以下几个关键步骤&#xff1a; 准备安装介质&#xff1a;需要从官网或者其他可靠来源下载Linux发行版的ISO镜像文件&#xff0c;并制作一个启动U盘或者烧录到DVD中。现在…

C++自定义脚本文件执行

FunctionCall.h&#xff1a; #include <sstream> #include <string> #include <vector> // 函数调用 class FunctionCall { public: FunctionCall(); ~FunctionCall(); std::string call(const st…

Kotlin协程中调度器Dispatchers的介绍

关于Kotlin中协程使用的调度器&#xff08;Dispatchers&#xff09;的介绍 viewLifecycleOwner.lifecycleScope.launch(Dispatchers.IO) {// todo }在 Kotlin 的协程中&#xff0c;Dispatchers 是用于指定协程运行的调度器&#xff08;dispatcher&#xff09;&#xff0c;它决…

Jira Server 不维护了,如何将 Jira 平滑迁移到阿里云云效

作者&#xff1a;天彤 Atlassian 在 2020 年官方发布公告&#xff0c;从 2021 年起停止 Jira Server 产品的销售&#xff0c;并且在 2024 年彻底停止 Server 端产品的服务支持&#xff0c;这对于国内使用 Jira 产品的企业和研发团队造成了不小的影响。而此时国内很多 DevOps 产…

分布式链路追踪 Zipkin+Sleuth(8)

项目的源码地址 Spring Cloud Alibaba 工程搭建&#xff08;1&#xff09; Spring Cloud Alibaba 工程搭建连接数据库&#xff08;2&#xff09; Spring Cloud Alibaba 集成 nacos 以及整合 Ribbon 与 Feign 实现负载调用&#xff08;3&#xff09; Spring Cloud Alibaba Ribbo…

C++:位图和布隆过滤器

一&#xff0c;位图 1.1 位图的概念 究竟什么是位图呢&#xff1f;&#xff1f;我们用一道问题来引入 问题&#xff1a;给40亿个不重复的无符号整数&#xff0c;没排过序。给一个无符号整数&#xff0c;如何快速判断一个数是否在 这40亿个数中。【腾讯】 根据这个问题&#x…

Flutter 中的 ListTile 小部件:全面指南

Flutter 中的 ListTile 小部件&#xff1a;全面指南 在Flutter中&#xff0c;ListTile是一个用于快速创建列表项的组件&#xff0c;它通常用于ListView中&#xff0c;以展示包含文本、图标、开关、滑块等元素的行。ListTile不仅使得界面看起来美观&#xff0c;而且提供了一种简…

C++ | Leetcode C++题解之第90题子集II

题目&#xff1a; 题解&#xff1a; class Solution { public:vector<int> t;vector<vector<int>> ans;vector<vector<int>> subsetsWithDup(vector<int> &nums) {sort(nums.begin(), nums.end());int n nums.size();for (int mask …

计算机毕业设计springboot体育馆场地预约管理系统【附源码】

计算机毕业设计springboot体育馆场地预约管理系统[附源码] &#x1f345; 作者主页 网顺技术团队 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; &#x1f345; 文末获取源码联系方式 &#x1f4dd; &#x1f345; 查看下方微信号获取联系方式 承接各种定制…

C# winform opencvsharp 识别轮廓。拟合,找到中心点

在C# WinForms项目中使用OpenCvSharp来识别图像中的轮廓并对其进行拟合以找到中心点&#xff0c;你可以遵循以下步骤&#xff1a; 准备工作 安装OpenCvSharp&#xff1a;确保你的项目中已经通过NuGet包管理器安装了OpenCvSharp4&#xff08;或相应的版本&#xff09;。 导入命…

【scikit-learn001】逻辑回归(Logistic Regression)ML模型实战及经验总结(更新中)

1.一直以来想写下基于scikit-learn训练AI算法的系列文章&#xff0c;作为较火的机器学习框架&#xff0c;也是日常项目开发中常用的一款工具&#xff0c;最近刚好挤时间梳理、总结下这块儿的知识体系。 2.熟悉、梳理、总结下scikit-learn框架逻辑回归&#xff08;Logistic Regr…

海豚调度器如何看工作流是在哪个worker节点执行

用海豚调度器&#xff0c;执行一个工作流时&#xff0c;有时成功&#xff0c;有时失败&#xff0c;怀疑跟worker节点环境配置不一样有关。要怎样看是在哪个worker节点执行&#xff0c;在 海豚调度器 Web UI 中&#xff0c;您可以查看任务实例&#xff0c;里面有一列显示host&a…

队列的讲解

队列的概念 队列:只允许在一端进行插入数据操作&#xff0c;在另一端进行删除数据操作的特殊线性表&#xff0c;队列具有先进先出FIFO(First In First Out) 入队列:进行插入操作的一端称为队尾 出队列:进行删除操作的一端称为队头 一端进另一端出 也就是可以做到&#xff0c;先…

windows下mysql5.6下载安装(多实例安装)

目录 1、下载 2、安装步骤 3、mysql多实例安装 1、下载 http://dev.mysql.com/downloads/windows/installer/5.6.html 2、安装步骤 我们采用自定义安装模式&#xff1a;选择32位或64位 默认即可&#xff1a; 说明&#xff0c;如果没有该页面就上一步&#xff0c;选择高级选…

Android ndk获取手机内部存储卡的根目录方法

如下所示&#xff1a; 代码语言&#xff1a;javascript jclass envcls env- FindClass("android/os/Environment"); //获得类引用if (envcls nullptr) return 0;//找到对应的类&#xff0c;该类是静态的返回值是FilejmethodID id env- GetStaticMethodID(envcls,…

VueRouter使用总结

VueRouter 是 Vue.js 的官方路由管理器&#xff0c;用于构建单页面应用&#xff08;SPA&#xff09;。在使用 VueRouter 时&#xff0c;开发者可以定义路由映射规则&#xff0c;并在 Vue 组件中通过编程式导航或声明式导航的方式控制页面的跳转和展示。以下是 VueRouter 使用的…

C语言中的控制语句:深入解析与案例实践3

11. 动态内存管理 在C语言中&#xff0c;我们可以使用动态内存管理函数来在运行时分配和释放内存。这为我们提供了更大的灵活性&#xff0c;特别是在处理大小可变的数据时。 #include <stdio.h> #include <stdlib.h> int main() {int n, *p, i;printf("Enter…

软件需求工程习题

1.&#xff08;面谈&#xff09;是需求获取活动中发生的需求工程师和用户间面对面的会见。 2.使用原型法进行需求获取&#xff0c;&#xff08;演化式&#xff09;原型必须具有健壮性&#xff0c;代码质量要从一开始就能达到最终系统的要求 3.利用面谈进行需求获取时&#xf…