HTML世界之input标签

<input> 元素在 <form> 元素中使用,用来声明允许用户输入数据的 input 控件。

<input> 元素是空的,它只包含标签属性,规定了用户可以在其中输入数据的输入字段。输入字段可通过多种方式改变,取决于 type 属性。

属性

描述

语法

accept

audio/* 接受所有的声音文件。

video/* 接受所有的视频文件。

image/* 接受所有的图像文件。

MIME_type 一个有效的 MIME 类型,不带参数。请参阅 IANA MIME 类型,获得标准 MIME 类型的完整列表。

规定通过文件上传来提交的文件的类型。 (只针对type="file")

<input accept="audio/*|video/*|image/*|MIME_type">

提示:如需规定多个值,请使用逗号分隔(比如 <input accept="audio/*,video/*,image/*" />)。

alt

text

定义图像输入的替代文本。 (只针对type="image")

<input alt="text">

autocomplete

on 默认。规定启用自动完成功能。

off 规定禁用自动完成功能。

autocomplete 属性规定 <input> 元素输入字段是否应该启用自动完成功能。

<input autocomplete="on|off">

autofocus

autofocus

autofocus 属性规定当页面加载时 <input> 元素应该自动获得焦点。

<input autofocus>

checked

checked

checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio")

<input checked>

disabled

disabled

disabled 属性规定应该禁用的 <input> 元素。

<input disabled>

form

form_id 规定 <input> 元素所属的一个或多个表单的 id 列表,以空格分隔。

form 属性规定 <input> 元素所属的一个或多个表单。

<input form="form_id">

formaction

URL

属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type="submit" 和 type="image")

<input formaction="URL">

formenctype

application/x-www-form-urlencoded 默认。在发送前对所有字符进行编码。将空格转换为 "+" 符号,特殊字符转换为 ASCII HEX 值。

multipart/form-data 不对字符编码。当使用有文件上传控件的表单时,该值是必需的。

text/plain 将空格转换为 "+" 符号,但不编码特殊字符。

属性规定当表单数据提交到服务器时如何编码(只适合 type="submit" 和 type="image")。

<input formenctype="value">

formmethod

get 默认。将表单数据(form-data)以名称/值对的形式附加到 URL:URL?name=value&name=value。

post 以 HTTP post 事务的形式发送表单数据(form-data)。

定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type="submit" 和 type="image")

<input formmethod="get|post">

formnovalidate

formnovalidate

formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。

<input formnovalidate="formnovalidate">

formtarget

_blank 在新窗口/选项卡中显示响应。

_self 在同一框架中显示响应(默认)。

_parent 在父框架中显示响应。

_top 在整个窗口中显示响应。

framename 在指定的 iframe 中显示响应。

framename 规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type="submit" 和 type="image")

<input formtarget="_blank|_self|_parent|_top|framename">

height

pixels

规定 <input>元素的高度。(只针对type="image")

<input height="pixels">

list

datalist_id 规定绑定到 <input> 元素的 datalist 的 id。

属性引用 <datalist> 元素,其中包含 <input> 元素的预定义选项。

<input list="datalist_id">

max

number 数字值。规定输入字段允许的最大值。

date 日期。规定输入字段允许的最大值。

属性规定 <input> 元素的最大值。

<input max="number|date">

maxlength

number

属性规定 <input> 元素中允许的最大字符数。

<input maxlength="number">

min

number 数字值。规定输入字段允许的最大值。

date 日期。规定输入字段允许的最大值。

属性规定 <input>元素的最小值。

<input min="number|date">

multiple

multiple

属性规定允许用户输入到 <input> 元素的多个值。

<input multiple>

name

text

name 属性规定 <input> 元素的名称。

<input name="text">

pattern

regexp

pattern 属性规定用于验证 <input> 元素的值的正则表达式。

<input pattern="regexp">

placeholder

text

placeholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息 。

<input placeholder="text">

readonly

readonly

readonly 属性规定输入字段是只读的。

<input readonly>

required

required

属性规定必需在提交表单之前填写输入字段。

<input required>

size

number

size 属性规定以字符数计的 <input> 元素的可见宽度。

<input size="number">

src

URL

src 属性规定显示为提交按钮的图像的 URL。 (只针对 type="image")

<input src="URL">

step

number

step 属性规定 <input> 元素的合法数字间隔。

<input step="number">

type

button 定义可点击的按钮(通常与 JavaScript 一起使用来启动脚本)。

checkbox 定义复选框。

color 定义拾色器。

date 定义 date 控件(包括年、月、日,不包括时间)。

datetime定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,基于 UTC 时区)。

datetime-local定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,不带时区)。

email 定义用于 e-mail 地址的字段。

file 定义文件选择字段和 "浏览..." 按钮,供文件上传。

hidden 定义隐藏输入字段。

image 定义图像作为提交按钮。

month 定义 month 和 year 控件(不带时区)。

number 定义用于输入数字的字段。

password 定义密码字段(字段中的字符会被遮蔽)。

radio 定义单选按钮。

range 定义用于精确值不重要的输入数字的控件(比如 slider 控件)。

reset 定义重置按钮(重置所有的表单值为默认值)。

search 定义用于输入搜索字符串的文本字段。

submit 定义提交按钮。

telNew 定义用于输入电话号码的字段。

text 默认。定义一个单行的文本字段(默认宽度为 20 个字符)。

time 定义用于输入时间的控件(不带时区)。

url 定义用于输入 URL 的字段。

week 定义 week 和 year 控件(不带时区)。

type 属性规定要显示的 <input> 元素的类型。

<input type="value">

value

text

指定 <input> 元素 value 的值。

<input value="text">

width

pixels

width 属性规定 <input> 元素的宽度。 (只针对type="image")

<input width="pixels">

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

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

相关文章

Postman定义全局变量和环境

Postman定义全局变量和环境 一. 问题二. 配置环境解决 前言 这是我在这个网站整理的笔记,有错误的地方请指出&#xff0c;关注我&#xff0c;接下来还会持续更新。 作者&#xff1a;神的孩子都在歌唱 一. 问题 问题前因&#xff1a;在使用postman调用elasticsearch接口的时候&…

目标检测——YOLOv3算法解读

论文&#xff1a;YOLOv3&#xff1a;An Incremental Improvement 作者&#xff1a;Joseph Redmon, Ali Farhadi 链接&#xff1a;https://arxiv.org/abs/1804.02767 代码&#xff1a;http://pjreddie.com/yolo/ YOLO系列其他文章&#xff1a; YOLOv1通俗易懂版解读SSD算法解读…

rust学习(简单链表)

编写一个简单链表&#xff0c;主要遇到的问题就是next指针&#xff08;按照C的写法&#xff09;的数据如何定义。按照网上的建议&#xff0c;一般定义如下&#xff1a; struct Node {pub value:u32,pub next:Option<Rc<RefCell<Node>>>, //1 }1.用Option主要…

pearlCTF——少部分WP

题型新颖&#xff0c;见识了不少 目录 b4by_jailExcel MayhemRick Roll3 spiesjail_timeWiFi brokenSoundScape b4by_jail 一道沙箱逃逸的题 源代码 #!/usr/local/bin/python import time flag"pearl{f4k3_fl4g}" blacklistlist("abcdefghijklmnopqrstuvwxyz…

设计模式学习笔记 - 规范与重构 - 7.实践:通过一段ID生成器代码,学习如何发现代码质量问题

前言 前面讲了重构相关的知识点。用一句话总结&#xff1a;重构就是发现代码质量问题&#xff0c;并且对其进行优化的过程。 今天借助一个 ID 生成器代码&#xff0c;给你展示以下重构的大致过程。 背景介绍 在软件开发中&#xff0c;ID 常用来表示一些业务信息的唯一标识&…

【计算机图形学】End-to-End Affordance Learning for Robotic Manipulation

对RLAfford&#xff1a;End-to-End Affordance Learning for Robotic Manipulation的简单理解 1. 为什么要做这件事 在交互环境中学习如何操纵3D物体是RL中的挑战性问题。很难去训练出一个能够泛化到具有不同语义类别、不同几何形状和不同功能物体上的策略。 Visual Afforda…

Jmeter(七) - 从入门到精通 - 建立数据库测试计划实战<MySQL数据库>(详解教程)

1.简介 在实际工作中&#xff0c;我们经常会听到数据库的性能和稳定性等等&#xff0c;这些有时候也需要测试工程师去评估和测试&#xff0c;上一篇文章主要介绍了jmeter连接和创建数据库测试计划的过程,在文中通过示例和代码非常详细地介绍给大家&#xff0c;希望对各位小伙伴…

在 Java 中,如何使用文件保存包含文字和数字的 Swing 表格?

要在Java中使用文件保存包含文字和数字的Swing表格&#xff0c;您可以按照以下步骤进行&#xff1a; 1. 首先&#xff0c;您需要创建一个Swing表格&#xff0c;并向其中添加包含文字和数字的数据。 2. 接下来&#xff0c;您可以使用Java中的文件操作类&#xff08;如FileWrit…

Elasticsearch match_bool_prefix的使用

elasticsearch version&#xff1a; 7.10.1 match_bool_prefix 是 Elasticsearch 中用于执行布尔前缀查询的一种查询类型。这种查询类型特别适用于当你想要匹配一个字段的前缀&#xff0c;并且希望这个字段中的词语是按照一定顺序出现的场景。 match_bool_prefix 语法 { &q…

<Senior High School Math>: inequality question

( 1 ) . o m i t (1). omit (1).omit ( 2 ) . ( a 2 − b 2 ) ( x 2 a 2 − y 2 b 2 ) ( x 2 y 2 ) − ( a 2 y 2 b 2 b 2 x 2 a 2 ) ≤ x 2 y 2 − 2 x y ( x − y ) 2 (2). (a^2-b^2)(\frac{x^2}{a^2} - \frac{y^2}{b^2})(x^2y^2)-(\frac{a^2y^2}{b^2}\frac{b^2x^2}{a^…

设置jmeter默认语言为中文

问题描述 通过面板上面的选项修改语言&#xff08;如下图&#xff09;&#xff0c;每次运行程序都需要重新再设置一遍&#xff0c;我需要每次打开都是中文界面 解决方案 进入jmeter的文件目录 bin——> jmeter.properties 打开这个文件 搜索Preferred GUI language在下方添…

微信小程序 uniapp奶茶点单系统r4112

系统功能有&#xff1a;信点单小程序分为小程序部分和后台管理两部分&#xff0c;小程序部分的主要功能包含&#xff1a;用户注册登录&#xff0c;查看商品信息&#xff0c;加入购物车&#xff0c;结算并生成订单&#xff0c;订单管理&#xff0c;资讯管理&#xff0c;个人中心…

hive-批量导出表结构,导入表结构

1、导出hive表结构 datastudio可以连接hive库&#xff0c;通过show databases 语句可以显示hive下建了多少数据库名。 使用use 数据库名&#xff0c;进入某个数据库下&#xff0c;通过show tables可显示该数据库下建了多少张表。 将所有库的表数据整理成库名.表名的形式放入…

2023版IDEA永久破解教程带patch.exe破解程序

2023版IDEA永久破解教程带patch.exe破解程序 第零步&#xff1a;百度云盘获取程序第一步&#xff1a;关闭电脑的病毒和危险防护&#xff08;目的是避免电脑自动清除破解程序&#xff09;1.找到电脑的 病毒和威胁防护2.蓝色按钮表示防护处于开启状态3.关闭成功会展示“实时保护已…

Hadoop完全分布式的搭建

目录 前言 搭建 准备 配置JAVA环境 搭建Hadoop集群 前言 今天我们来学习Hadoop完全分布式的搭建&#xff0c;我们要搭建hadoop完全分布式要掌握哪些东西呢&#xff1f; 首先需要掌握的就是Hadoop的基础知识&#xff0c;了解Hadoop的生态系统&#xff0c;包括Hadoop的核心…

IIOT|QCA9882 vs MT7915: What‘s the difference?

IIOT|QCA9882 vs MT7915: Whats the difference? How to choose? Choosing QCA9882 or MT7915 depends on your specifc needs. lf you need a stable, widely compatible WiFi wireless cardthe QCA9882 is a good choice. lf you need wifi6 solution with DBDC 2.4Ghz 5G…

跨平台数据整合:电商平台如何利用API进行数据分析和决策支持

在当今数据驱动的商业环境中&#xff0c;跨平台数据整合对于电商平台来说至关重要。API&#xff08;应用程序编程接口&#xff09;提供了一种高效的方式来收集、整合和分析来自不同平台的数据&#xff0c;从而支持更明智的商业决策。以下是电商平台如何利用API进行数据分析和决…

PHP 实现http重定向https 或不带www的域名跳转到主域名

通过代码的方式的,比较简洁,容易控制.通过iis管理器的url重写或301重定向,总是出现各种冲突问题 以下代码解释.如果访问的url中,不是https安全链接.或者是不带www的域名,则说明都不符合本站的要求,那么,都需要进行完整链接(https://www.12.com)的跳转,不再做进一步的判断 if …

AI 大模型赋能手机影像,小米14 Ultra 让真实有层次

2月22日&#xff0c;小米龙年第一场重磅发布会&#xff0c;正式发布专业影像旗舰小米14 Ultra。 此前小米发布的两代 Ultra&#xff0c;在不同维度&#xff0c;引领了移动影像行业的走向。最新的小米14 Ultra 在定义的时候&#xff0c;我们反复在思考&#xff1a;怎么才能把移动…

一站式解决方案:uni-app条件编译及多环境配置,appid动态修改攻略!

前言 这篇文章主要介绍uniapp在Hbuilderx 中&#xff0c;通过工程化&#xff0c;区分不同环境、动态修改小程序appid以及自定义条件编译&#xff0c;解决代码发布和运行时手动切换到问题。 背景 在企业级的应用中&#xff0c;通常会分为&#xff0c;开发、联调、生产等多个环…