HTML 表单笔记/练习

表单

概述

表单用于收集用户信息,用户填写表单提交到服务器

  • 一般传参方式:
    • GET
    • POST
    • Cookie
  • 传参要素
    • 传参方式
      • GET
      • POST
    • 参数的名字
    • 目标页面
    • 内容的数据类型(只有在上传文件的时候)

提示信息

  • 一个表单中通常还包含一些说明性的文字,提示用户填写和操作

表单域

  • 相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过表单域定义处理表单数据所提交到的 url 地址,以及数据提交到服务器的方法
  • 如果不定义表单域,则数据将无法提交给服务器

表单声明

<form action="" method=""></form>

<form> 表单属性

  • action 代表提交的地址

  • method 代表提交的方式

    • get 方法会在 url 中显示提交的内容

    • post 方法不会在 url 中显示提交的内容,而会显示在http中

  • target

    • _blank 新标签页打开提交的表单
    • _self 当前标签页打开
  • enctype

    • application/x-www-form-urlencoded 默认传参方式
    • multipart/form-data 只有在文件上传时使用

表单控件

  • 能与用户进行交互的可视化控件
  • 包含了具体的表单功能
  • 包括
    • 单行文本输入框
    • 密码输入框
    • 复选框 (点击选择)
    • 提交按钮
    • 重置按钮等

<input>输入框

<input> 属性
属性说明
type用来区分文本框的类型。
name
id
标签的唯一标识符。 用来表示当前文本框的名字。 要服务器完成完整的交互传参,此属性必不可少
value代表表单元素控件的默认值; 如果没有此属性,需要从用户获得。
disabled代表控件禁用; disabled = “disabled”。
type 属性

默认为 type="text"

type属性描述
textinput 将会接受文本输入
password可用于一些私密性和隐私性的内容(例如:密码)
button、submit、reset实现一个按钮形式,但用于的内容不同,实质上都是实现一个按钮形式,此时可以为 input 元素设置 value 值为按钮贴上文字
radio实现单选框(注意:同一组单选框 name 属性需要相同,否则无法实现单选)
checkbox实现复选框
time时间框
week星期框
month年月框
date日期框
datetime_local本地日期和时间
search实现搜索框,从搜索框字可以看出这个值用于搜索方面的
color实现颜色选择框(例如:ps中的拾色器一样)
image实现图像按钮,将一幅图像作为按钮,点击图像任何位置都会做出响应
file有时我们需要将文件上传至服务器,使用file值将会实现此功能,但是如果只给type属性设置为file,并不能实现完整的上传操作,除需要给form元素中method属性设置为post外,还需要将input元素中的enctype属性设置为multipart/form-data。这样就可以完整的上传文件了
number设置为此属性输入框只能输入数字
range实现数值滚动条
hidden将i元素给隐藏
email、tel、url对邮箱、电话号码、网址等数据进行把关,但是把关方面需要 正则表达式来定义(正则表达式通过pattern属性来定义)
文本输入框
  • 明文显示输入的内容

    <form action=""><input type="">
    </form>  
    
密码输入框
  • 加密显示输入的内容

    <form action=""><input type="password"><!-- 密码输入框,输入的内容无法看到 -->
    </form>  
    

    image-20231018090931364

单选框
  • type="radio"

  • 注意:同一组单选框 name 属性需要相同,否则无法实现单选

    通过 value 属性,可以为每个单选框设置不同的标识值,以便在后端处理表单数据时进行识别和处理。

    <form action=""><input type="radio" name="sex" value=""><input type="radio" name="sex" value="">
    </form>  
    

    image-20231018090943353

复选框
  • type="checkbox"

  • 注意:同一组复选框 name 属性需页要相同

    通过 value 属性,可以为每个单选框设置不同的标识值,以便在后端处理表单数据时进行识别和处理。

    <form action=""><input type="checkbox" name="love" value=""><input type="checkbox" name="love" value=""><input type="checkbox" name="love" value=""><input type="checkbox" name="love" value="">
    </form>  
    

    image-20231018090951674

普通按钮
<input type="button" value="按钮上显示的文字">
提交按钮
  • type="submit"

    <input type="submit">
    

    image-20231018090956866

重置按钮
  • type="reset"

    <input type="reset">
    

    image-20231018091005827

上传文件
  • type=file

    <form><input type="file" name="photo">
    </form>
    

    image-20231018091013944

<textarea> 多行文本框

  • 录入多行数据的文本框

    <textarea name="" id="" cols="30" rows="10"></textarea>
    

    属性

    • name 定义控件名称,提供给服务器用

    • cols 代表每行中的字符数

    • rows 代表显示的行数

    image-20231018091023885

<label> 焦点

  • 用于通过 id 绑定一个表单元素,被绑定的表单元素就会获得输入焦点

    <label for="id">链接名</label>
    

    image-20231018091031225

<select>下拉菜单

  • 使用

    <select><option value="">选择1</option><option value="">选择2</option><option value="">选择3</option>
    </select>
    

练习

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>form</title><style>label{cursor: pointer;display: inline-block;padding: 3px 6px;text-align: right;width: 150px;vertical-align: top;} </style></head><body><h1>用户注册</h1><form action="http://4399.com" method="传参方法"><label>用户名:</label><input type="text" name="username"><br><label>密码:</label><input type="password" name="password"><br><label>确认密码:</label><input type="password"><br><label>性别:</label><input type="radio" name="sex"><input type="radio" name="sex"><br><label>生日:</label><input type="date"><br><label>籍贯:</label><select name="省份" id=""><option value="">选择省份</option><option value="">America</option><option value="">Japan</option><option value="">Australia</option></select><br><label>用户协议:</label><textarea name="" id="" cols="30" rows="10" >免责声明:概不负责</textarea><br><label for="">头像上传:</label><input type="file"><br><label for="">操作:</label><input type="button" value="普通按钮"><input type="reset" value="重置按钮"><input type="submit" value="提交按钮" ></form></body>
</html>

在这里插入图片描述

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

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

相关文章

AI大模型高速发展,Web3还远吗?

在过去的几年里&#xff0c;人工智能&#xff08;AI&#xff09;和Web3技术都经历了令人瞩目的发展。AI大模型&#xff0c;特别是像GPT-3、GPT-4等这样的巨型语言模型&#xff0c;已经成为AI领域的明星&#xff0c;而Web3则代表了下一代互联网的愿景&#xff0c;具有去中心化和…

HarmonyOS 语言基础类库开发指南上线啦!

语言基础类库提供哪些功能&#xff1f;多线程并发如何实现&#xff1f;TaskPool&#xff08;任务池&#xff09;和 Worker 在实现和使用场景上有何不同&#xff1f; 针对开发者关注的并发等语言基础类库的相关能力&#xff0c;我们在新推出的语言基础类库开发指南中提供了详细的…

【temu】分析拼多多跨境电商Temu数据分析数据采集

Temu是拼多多旗下跨境电商平台&#xff0c;于2022年9月1日在美国、加拿大、新加坡、中国台湾、中国香港等市场上线。本文作者从销售额、销量、产品分布等方面&#xff0c;对Temu产品进行了分析&#xff0c;一起来看一下吧。 item_get获得商品详情item_review获得商品评论列表it…

浏览器不能访问阿里云ECS

一、浏览器不能访问端口 在阿里云ECS中构建了工程&#xff0c;nigix或者tomcat或者其他&#xff0c;然后在本地浏览器访问ip端口的时候&#xff0c;连接超时&#xff0c;解决办法&#xff1a; 进入阿里云ECS服务 -> 查看公网ip (外部连接需要使用公网) -> 进入ECS实例的…

Go 函数的健壮性、panic异常处理、defer 机制

Go 函数的健壮性、panic异常处理、defer 机制 文章目录 Go 函数的健壮性、panic异常处理、defer 机制一、函数健壮性的“三不要”原则1.1 原则一&#xff1a;不要相信任何外部输入的参数1.2 原则二&#xff1a;不要忽略任何一个错误1.3 原则三&#xff1a;不要假定异常不会发生…

文件管理系统的基本认识

1.文件的属性 文件的定义:一组有意义的信息的集合。 1.文件名: 由创建文件的用户决定文件名&#xff0c;主要是为了方便用户找到文件&#xff0c;同一目录下不允许有重名文件。 2.标识符: 一个系统内的各文件标识符唯一&#xff0c;对用户来说毫无可读性&#xff0c; 因此…

C#选择排序(Selection Sort)算法

选择排序&#xff08;Selection Sort&#xff09;原理介绍 选择排序&#xff08;Selection Sort&#xff09;是一种简单的排序算法&#xff0c;其实现原理如下&#xff1a; 遍历待排序数组&#xff0c;从第一个元素开始。 假设当前遍历的元素为最小值&#xff0c;将其索引保存…

汽车屏类产品(四):仪表Cluster

###前言 仪表Cluster/仪表盘Dashboard,作为伴随汽车诞生就存在的一个主要零部件之一,从机械到电子到数字,可以说也是逐渐发展到现在的。 目前的主流框图如下,中间processor就是主控芯片,可能有buttons/switches,有display显示屏+backlight背光,有audio->speake…

day08_面向对象_封装_继承_this_super_访问修饰符

今日内容 1.作业 2.封装 3.继承 4.this和super 5.访问修饰符 零、复习 成员变量和局部变量(画表格) this的作用 this是当前对象,当前方法的调用者this可以调用属性和方法this.属性, this.方法名(),this() 构造方法的作用和语法特征 作用: 创建对象,属性初始化特征: 没有返回值,…

STM32的hex文件格式的分析

前言 最近研究Bootloader&#xff0c;通过串口实现STM32程序的更新。需要学习了解STM32的Hex文件格式。在这进行一下总结。 HEX文件格式 我们通过文本形式打开hex文件&#xff0c;可以看到&#xff1a; 这一行就是一条指令数据&#xff0c;这里对数据帧格式进行说明&#xff…

图像检索算法 计算机竞赛

文章目录 1 前言2 图像检索介绍(1) 无监督图像检索(2) 有监督图像检索 3 图像检索步骤4 应用实例5 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 图像检索算法 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff…

金融数学方法:有限差分法

目录 1.原理介绍 1.1 有限差分法介绍 1.2 有限差分法步骤 2.案例分析 2.1 问题重述 2.2 问题求解 1.原理介绍 1.1 有限差分法介绍 有限差分法是一种常用的数值计算方法&#xff0c;用于求解偏微分方程或常微分方程的数值解。它的基本思想是将连续的空间区域离散化为有限…

mysql按照日期分组统计数据(date_formatstr_to_date)

学习链接 mysql按照日期分组统计数据 博主-山茶花开时的 【Mysql专栏学习】 mysql按照日期分组统计数据 Mysql的date_format函数想必大家都使用过吧&#xff0c;一般用于日期时间转化&#xff0c;如下所示 # 可以得出 2023-01-01 08:30:50 select DATE_FORMAT(2023-01-01…

【无标题】光伏逆变器的IEC62109测试,逆变器IEC62109测试项目

光伏逆变器的IEC62109测试&#xff0c;逆变器IEC62109测试项目 逆变器又称电源调整器&#xff0c;根据逆变器在光伏发电系统中的用途可分为独立型电源用和并网用二种。根据波形调制方式又可分为方波逆变器、阶梯波逆变器、正弦波逆变器和组合式三相逆变器。对于用于并网系统的…

【Qt控件之QListWidget】介绍及使用,利用QListWidget、QToolButton、和布局控件实现抽屉式组合控件

概述 QListWidget类提供了基于项目的列表小部件。 QListWidget是一个方便的类&#xff0c;类似于QListView提供的列表视图&#xff0c;但使用经典的基于项目的接口来添加和删除项目。QListWidget使用内部模型来管理列表中的每个QListWidgetItem。 对于更灵活的列表视图小部件…

C++实现AC自动机,剪枝、双数组压缩字典树!详解双数组前缀树(Double-Array Trie)剪枝字典树(Patricia Trie)

代码在&#xff1a;github.com/becomequantum 最近研究了一下字典树&#xff0c;什么AC自动机&#xff0c;双数组压缩字典树&#xff0c;剪枝字典树都自己写代码实现了一下。这本该是本科学数据结构时该玩明白的东西&#xff0c;我到现在才会玩。本视频主要介绍一下双数组和剪…

【JavaEE】计算机是如何工作的

计算机是如何工作的 冯诺依曼体系操作系统操作系统的概念与定位进程和任务操作系统对进程的管理PCB 的相关信息 冯诺依曼体系 现代的大多数计算机, 都遵循冯诺依曼体系 CPU 中央处理器: 进行算术运算和逻辑判断存储器: 分为外存和内存, 用于存储数据(使用二进制方式存储)输入…

竞赛 深度学习乳腺癌分类

文章目录 1 前言2 前言3 数据集3.1 良性样本3.2 病变样本 4 开发环境5 代码实现5.1 实现流程5.2 部分代码实现5.2.1 导入库5.2.2 图像加载5.2.3 标记5.2.4 分组5.2.5 构建模型训练 6 分析指标6.1 精度&#xff0c;召回率和F1度量6.2 混淆矩阵 7 结果和结论8 最后 1 前言 &…

竞赛选题 深度学习YOLO抽烟行为检测 - python opencv

文章目录 1 前言1 课题背景2 实现效果3 Yolov5算法3.1 简介3.2 相关技术 4 数据集处理及实验5 部分核心代码6 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于深度学习YOLO抽烟行为检测 该项目较为新颖&#xff0c;适合作为竞赛课…

简单测试一下 展锐的 UDX710 性能

最近在接触 联通5G CPE VN007 &#xff0c;发现使用的是 展锐的Unisoc UDX710 CPU&#xff0c;正好简单的测试一下这颗CPU CPU信息 UDX710 是一颗 双核 ARM Cortex-A55 处理器&#xff0c;主频高达 1.35GHz processor : 0 BogoMIPS : 52.00 Features : fp…