HTML表单属性2

news2025/4/10 1:37:08

HTML5针对<input>添加了许多属性:

autofocus属性

页面加载时自动聚焦到输入字段

<form action="action_page.php" >
        名字: <input type="text" name="fnam" autofocus><br>
        姓氏:<input type="text" name="lname"><br>
        <input type="submit">
</form>

form属性

将表单元素与页面中任意 <form>关联

<form action="action_page.php" id="form1" >
        First name <input type="text" name="fname" ><br>
        <input type="submit" value="Submit">
</form>

formaction属性

覆盖表单的默认提交地址:允许为某个提交按钮或图片按钮指定独立的提交 URL,覆盖 <form> 的 action 属性。

<form action="action_page.php" >
        First name<input type="text" name="fnam" ><br>
        Last name<input type="text" name="lname"><br>
        <input type="submit" value="Submit"><br>
        <input type="submit" formaction="demo_adminx.asp" value="Submit as admin">
</form>

formenctype属性

覆盖表单数据的编码类型:指定特定按钮提交时的数据编码方式,覆盖 <form> 的 enctype 属性。

<form action="demo_post_enctype.asp" method="post" >
        First name <input type="text" name="fname" ><br>
        <input type="submit" value="Submit">
        <input type="submit" formenctype="multipart/form-data" value="Submit as Multipart">
</form>

formmethod属性

覆盖表单的 HTTP 方法:指定特定按钮提交时使用的 HTTP 方法(如 GET 或 POST),覆盖<form>的 method 属性。

 <form action="action_page.php" method="get">
        First name<input type="text" name="fnam" ><br>
        Last name<input type="text" name="lname"><br>
        <input type="submit" value="Submit"><br>
        <input type="submit" formmethod= "post" formaction="demo_adminx.asp"  value="Submit as admin">
</form>

formnovalidate属性

为特定提交按钮禁用表单验证

<form action="action_page.php" >
        E-mail: <input type="email" name="userid"><br>
        <input type="submit" value="Submit"><br>
        <input type="submit" formnovalidate="Submit width validation">
</form>

formtarget属性

指定表单提交后响应数据加载的目标窗口或框架

<form action="action_page.php" >
        First name<input type="text" name="fnam" ><br>
        Last name<input type="text" name="lname"><br>
        <input type="submit" value="Submit as admin"><br>
        <input type="submit" formtarget="_blank" value="Submit to a new window/tab">
</form>

height and width属性

定义 <input type="image"> 图片按钮的显示尺寸

<form action="action_page.php">
        First name<input type="text" name="fnam" ><br>
        Last name<input type="text" name="lname"><br>
        <input type="image" src="../img/img_submit.gif" alt="Submit" width="48" height="48">
</form>

list属性

将输入框与 <datalist> 关联,提供下拉候选值

<form action="demo_form.php" method="get">
        <input list="browsers" name="browser">
        <datalist id="browsers">
            <aption value="Internt Explorer"></aption>
            <aption value="Firefox"></aption>
            <aption value="Chrome"></aption>
            <aption value="Opera"></aption>
            <aption value="Safari"></aption>
        </datalist>
        <input type="submit">
</form>

min and max属性

限制数值或日期/时间输入的最小值和最大值。

<form action="action_page.php">
        输入一个 1980-01-01 之前的日期 <br>
        <input type="date" name="body" max="1979-12-31"> <br><br>
        输入一个 2000-01-01 之后的日期: <br>
        <input type="date" name="bday" min="2000-01-02"><br><br>
        数字(1-5):
        <input type="number" name="quantity" min="1" max="5">
        <input type="submit">
</form>

multiple属性

允许用户输入多个值(如文件上传多选或邮箱多输入)。

<form action="action_page.php">
        选择图片:<input type="file" name="img" multiple>
        <input type="submit">
</form>

pattern属性

通过正则表达式验证输入格式。

 <form action="action_page.php">
        国家代码:<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
        <input type="submit">
</form>

placeholder属性

在输入框中显示提示文本(输入内容后消失)。

<form action="action_page.php">
        <input type="text" name="fname" placeholder="First name"><br>
        <input type="text" name="lname" placeholder="Last name"><br>
        <input type="submit" value="Submit">
</form>

required属性

标记字段为必填项(提交前必须填写)

 <form action="action_page.php">
        用户名:<input type="text" name="usrname" required>
        <input type="submit">
</form>

step属性

定义数值输入(number、range、datetime-local 等)的合法间隔

<form action="action_page.php">
        <input type="number" name="points" step="3">
        <input type="submit">
</form>

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

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

相关文章

图片尺寸修改软件下载

【图片尺寸调整工具v1.0&#xff1a;高效便捷的图像处理助手】 图片尺寸调整工具v1.0是一款专为简化图像处理流程设计的轻量级软件&#xff0c;兼顾高效批量处理与个性化单图调整需求。该工具以"零学习成本"为核心设计理念&#xff0c;通过简洁直观的交互界面&#…

MySQL-SQL-DDL语句、表结构创建语句语法、表约束、表数据类型,表结构-查询SQL、修改SQL、删除SQL

一.SQL SQL&#xff1a;一门操作关系型数据库的编程语言&#xff0c;定义操作所有关系型数据库的统一标准 二. DDL-数据库 1. 查询所有数据库 命令&#xff1a;show databases; 2. 查询当前数据库 命令&#xff1a;select database(); 3. 创建数据库 命令&#xff1a;create da…

网络钓鱼攻击的威胁和执法部门的作用(第一部分)

在当今的数字世界中&#xff0c;网络犯罪分子不断开发新技术来利用个人、企业和政府机构。 最普遍和最具破坏性的网络犯罪形式之一是网络钓鱼——一种社会工程手段&#xff0c;用于欺骗人们提供敏感信息&#xff0c;例如登录凭据、财务数据和个人详细信息。 随着网络钓鱼攻击…

鸿蒙版(ArkTs) 贪吃蛇,包含无敌模式 最高分 暂停和继续功能

鸿蒙版(ArkTs) 贪吃蛇&#xff0c;包含无敌模式 最高分 暂停和继续功能; 效果图如下&#xff1a; 代码如下&#xff1a; // 所有import语句必须放在文件开头 import router from ohos.router; import promptAction from ohos.promptAction; // Add this import at the top wit…

解决Win11耳机没有声音的问题

方法一&#xff1a;更新驱动程序&#xff08;有效&#xff09; 进入 “设置”&#xff08;快捷键&#xff1a;WinX&#xff09;&#xff0c;点击 “Windows 更新” → “高级选项” 点击 “可选更新” &#xff0c;然后点击 “驱动程序更新” 【注】&#xff1a;更新后可能会出…

【spring02】Spring 管理 Bean-IOC,基于 XML 配置 bean

文章目录 &#x1f30d;一. bean 创建顺序&#x1f30d;二. bean 对象的单例和多例❄️1. 机制❄️2. 使用细节 &#x1f30d;三. bean 的生命周期&#x1f30d;四. 配置 bean 的后置处理器 【这个比较难】&#x1f30d;五. 通过属性文件给 bean 注入值&#x1f30d;六. 基于 X…

内网渗透(杂项集合) --- 中的多协议与漏洞利用技术(杂项知识点 重点) 持续更新

目录 1. NetBIOS 名称的网络协议在局域网中内网渗透中起到什么作用 2. 使用 UDP 端口耗尽技术强制所有 DNS 查找失败&#xff0c;这个技术如何应用在局域网内网渗透测试中 3. 在本地创建一个 HTTP 服务来伪造 WPAD 服务器 什么是 WPAD 服务器&#xff1f;这个服务器是干嘛的…

el-tabs添加按钮增加点击禁止样式

前置文章 一、vue使用element-ui自定义样式思路分享【实操】 二、vue3&ts&el-tabs多个tab表单校验 现状确认 点击添加按钮&#xff0c;没有点击样式&#xff0c;用户感知不明显没有限制最大的tab添加数量&#xff0c;可以无限添加 调整目标&代码编写 调整目标…

LINUX 5 vim cat zip unzip

dd u撤销 ctrlr取消撤销 q!刚才的操作不做保存 刚才是编辑模式 现在是可视化模式 多行注释

PDFBox渲染生成pdf文档

使用PDFBox可以渲染生成pdf文档&#xff0c;并且自定义程度高&#xff0c;只是比较麻烦&#xff0c;pdf的内容位置都需要手动设置x&#xff08;横向&#xff09;和y&#xff08;纵向&#xff09;绝对位置&#xff0c;但是每个企业的单据都是不一样的&#xff0c;一般来说都会设…

Batch Normalization:深度学习训练的加速引擎

引言 在深度学习的发展历程中&#xff0c;训练深度神经网络一直是一项极具挑战性的任务。随着网络层数的增加&#xff0c;梯度消失、梯度爆炸以及训练过程中的内部协变量偏移&#xff08;Internal Covariate Shift&#xff09;问题愈发严重&#xff0c;极大地影响了模型的收敛…

低空经济基础设施建设方向与展望

随着科技的不断进步&#xff0c;低空经济正逐渐成为推动国家经济发展的新引擎。低空经济&#xff0c;指的是在低空范围内进行的各种经济活动&#xff0c;包括但不限于无人机物流、空中交通管理、低空旅游、农业监测等。本文将探讨低空经济基础设施建设的方向与未来展望。 1. 低…

如何保证RabbitMQ消息的可靠传输?

在这个图中&#xff0c;消息可能丢失的场景是1&#xff0c;2&#xff0c;3 1.在生产者将消息发送给RabbitMQ的时候&#xff0c;消息到底有没有正确的到达服务器呢&#xff0c;RabbitMQ提供了两种解决方案&#xff1a; a. 通过事务机制实现&#xff08;比较消耗性能&#xff0…

Sentinel核心源码分析(上)

文章目录 前言一、客户端与Spring Boot整合二、SphU.entry2.1、构建责任链2.2、调用责任链2.2.1、NodeSelectorSlot2.2.2、ClusterBuilderSlot2.2.3、LogSlot2.2.4、StatisticSlot2.2.5、AuthoritySlot2.2.6、SystemSlot2.2.7、FlowSlot2.2.7.1、selectNodeByRequesterAndStrat…

Systemd安全加密备份系统与智能通知

实训背景 你是一家金融科技公司的系统架构师&#xff0c;需为敏感数据设计一套安全备份系统&#xff0c;满足以下需求&#xff1a; 加密存储&#xff1a;自动解密插入的LUKS加密USB设备&#xff0c;挂载到安全目录。备份验证&#xff1a;备份完成后校验文件完整性&#xff0c…

6.0 使用Qt+ OpenCV+Python加载图片

本例作为python图像处理的入门课程1,使用Qt+ OpenCV+Python加载图片。 主要有如下几个地方需要注意: 1. OpenCV 默认使用 BGR 格式,而 Qt 使用 RGB。显示前需要转换:cv2.cvtColor(img, cv2.COLOR_BGR2RGB),一般使用某个QLabel控件进行显示。 pic = cv2.cvtColor(pic, cv2.C…

【Mac 从 0 到 1 保姆级配置教程 11】- Mac 基础配置 Finder、触控板、常用快捷键等

文章目录 前言配置 Finder1. 把我们的家目录请出来2. 显示文件扩展名3. 展示隐藏文件4. 显示路径栏和状态栏5. 固定文件夹到工具栏 基础快捷键1. Finder 导航快捷键2. 文件操作快捷键3. 视图和显示快捷键4. 搜索和选择快捷键5. 实用技巧6. 关于文件创建 配置触控板1. 右键设置2…

C++Primer - 动态内存管理

欢迎阅读我的 【CPrimer】专栏 专栏简介&#xff1a;本专栏主要面向C初学者&#xff0c;解释C的一些基本概念和基础语言特性&#xff0c;涉及C标准库的用法&#xff0c;面向对象特性&#xff0c;泛型特性高级用法。通过使用标准库中定义的抽象设施&#xff0c;使你更加适应高级…

DeepSeek本地部署(Ollama)

1. Ollama 安装 Ollama 官网地址&#xff1a; https://ollama.com/安装包网盘地址: https://pan.baidu.com 2. Deepseek 部署 根据自己电脑配置和应用需求选择不同模型&#xff0c;配置不足会导致运行时候卡顿。 版本安装指令模型大小硬盘&#xff08;存储&#xff09;显卡…

第二期:深入理解 Spring Web MVC [特殊字符](核心注解 + 进阶开发)

前言&#xff1a; 欢迎来到 Spring Web MVC 深入学习 的第二期&#xff01;在第一期中&#xff0c;我们介绍了 Spring Web MVC 的基础知识&#xff0c;学习了如何 搭建开发环境、配置 Spring MVC、编写第一个应用&#xff0c;并初步了解了 控制器、视图解析、请求处理流程 等核…