【前端】input表单 type属性详解

前言

前端页面开发中,html表单是网页中最常见元素之一,通过form元素定义表单,表单中包含各种表单项。

input 元素可以用来生成一个供用户输入数据的简单文本框。 在默认的情况下, 什么样的数据均可以输入。而通过不同的type属性值,可以限制输入的内容。

代码实例:

<input type="text" name="userName" required> 定义一个单行输入文本框。
<form><input type="text" name="yourname"size="30" maxlength="20" readonly value="你只能读不能修改">
</form>

常见的type属性值

1、text 一个单行文本框,默认属性值 
2、password 隐藏字符的密码框 
3、search 搜索框,在某些浏览器中输入内容会出现叉形标记 
4、submit、reset、button 依次是:提交按钮、重置按钮、普通按钮 
5、number、range 依次是:只能输入数值的框、只能输入在一个指定范围的数值框 
6、checkbox 复选框,一组复选框(name属性值相同)用户可以勾选多个;其中name的值可写可不写,可以一致也可以不一致, 没有多大影响。但是必须设置value值。checked=“checked”:设置单选框默认选中项。

radio 单选按钮,一组单选按钮(name属性值要相同)用户只可以选中一个 ,其中name的值必须一致,否则将不能进行单选,会全部选中。
7、image、图片按钮
8、email 检测电子邮件
9、hidden 生成一个隐藏控件,通常称为隐藏域
10、file 生成一个上传控件 

它们的属性参数【可选】

1、type=”text”

        1)list 指定为文本框提供建议值的 datalist 元素,其值为datalist 元素的 id 值 
        2)maxlength 设置文本最大字符长度 
        3)pattern 用于输入验证的正则表达式 
        4)placeholder 输入提示的文本,当用户输入内容时会自动消失 
        5)readonly 文本框处于只读状态 
        6)disabled 文本框处于禁用状态 
        7)size 设置文本框宽度 
        8)value 设置文本框初始值,会显示在文本框中,显示时优先级比placeholder高,表单提交时优先提交用户输入的内容,如果用户没有输入则提交默认的值 
        9)required 表示用户必须输入一个值,否则无法通过输入验证

2、type=”password”,和type=”text”时所拥的额外属性基本一致,少了一个list属性

3、type=”search” , 和type=”text”所有用的额外属性值一致

4、type分别为submit、reset、button,表示提交表单、重置表单、普通按钮 

5、当type为number、range时 

  •         type=”number” 只能输入数字的文本框 
  •         type=”range” 生成一个通过拖拽调节大小的调节器 

额外属性: 
        1)min 设置可接受的最小值 
        2)max 设定可接受的最大值 
        3)value 指定初始值 
        4)step 指定上下调节值的步长 
        5)required 表明用户必须输入一个值,否则无法通过输入验证 
        6)readonly 设置文本框内容只读

6、当type为checkbox、radio 
        1)不管type等于checkbox还是radio,都必须有属性name和value 
        2)他们还有可选属性checked、required 
注意:复选框和单选按钮都是以一组一组的形式存在,name值相同的即为一组,一组复选框可以同时选中几个,而一组单选按钮同时只能选中一个。

7、当type为image
        当type=”image”时,功能上和type=”submit”一样,前者是用图片作为按钮,当然后者也可以达到同样的效果。
额外属性: 
1)src 指定要显示图像的 URL 
2)alt 提供图片的文字说明,当图片找不到时显示该文字 
3)width 图像的长度,注意这是标签属性,而不是样式属性 
4)height 图片的高度

8、当type为email 为电子邮件格式

9、type=”hidden” 
        1)生成一个隐藏控件,一般用于表单提交时关联主键 ID 提交,而这个数据作为隐藏存在

10、type=”file” 
        生成一个文件上传控件,用于文件的上传。 
额外属性: 
        1)required 表明用户必须提供一个值,否则无法通过验证 
        2)accept 指定接收的MIME类型 例如:accept=”image/gif, image/jpeg, image/png” 

注意:当需要上传文件时,form标签的enctype属性必须设置为multipart/form-data

html5新增的表单type属性值

1.type=“email”

type="email"属性:验证只能输入邮箱格式,否则不能通过email:<input type="email" name="userEmail">

2. type=“tel”

 type="tel":不进行验证,主要是在移动端打开数字键盘 电话:<input type="tel" name="tel">

3.type=“url”

type=“url”: 验证:只能输入合法的网址,必须包含http://

网址:<input type="url" name="url">

4.type=“range”

type=“range”:产生一个滑动条

 范围:<input type="range" name="range" min="1" max="10" value="7">

5.type=“search”

type=“search”:使搜索框更人性化,提供删除“X”符号,来快速清除所输入的内容

6.type=“date”

type=“date”:日期框,可以选择年、月、日

7.type=“time”

type=“time”:可以选择时、分、秒

8.type=“datetime-local”

type=“datetime-local”:选择年月日和现在的时刻

9.type=“number”

type=“number”:只能输入数字的数字框包含小数点 value时=为当前值

数字(1到8之间):<input type="number" name="数字" min="1" max="10" value="5"

 

html5新增的表单属性

1.required

required:限制用户该项为必填项,不能为空。

2.placeholder

placeholder:给input输入框添加默认提示信息

3.autofocus

autofocus:自动获取焦点。

4.autocomplete

autocomplete=“on”:显示历史记录,autocomplete=“off”不显示历史记录
使用自动完成必须同时满足两个条件:
1.必须成功提交过
2.当前添加autocomplete的元素必须有name属性

5.novalidate

在 input输入类型,当提交表单时,会对这些输入内容进行验证。novalidate属性:在提交表单时不对form或input进行验证。

6.multiple

multiple属性用在type值为email和file的input类型中,设置了multiple值后,可以在input中输入多个值,比如在email中输入多个邮箱,中间用逗号隔开。
注意:在选择文件的时候要按住Ctrl键才能同时选择多个文件

7.pattern

pattern:正则表达式,由一系列字符和数字组成,用于匹配某个句法规则.属性适应于text、search、url、telephone、email和password类型的input元素。

8.form

在之前,当我们需要写form表单的时候,必须把form的控件写在<form</form双标签中。现在我们可以脱离form的双标签写在其他控件,只需要在末端加上主要的form表单的id就可以了。

<form action="#" method="post" id="myform"><input type="text" autofocus/><input type="button" value="提交"></form><input type="email" placeholder="请输入你的邮箱" form="myform">

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

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

相关文章

代码随想录算法训练营第四十五天|动态规划|70. 爬楼梯 (进阶)、322. 零钱兑换、279.完全平方数

70. 爬楼梯 &#xff08;进阶&#xff09; 文章 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬至多m (1 < m < n)个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f; 注意&#xff1a;给定 n 是一个正整数。 输入描述&#xff1a;输入共一行&…

Go语言之函数、方法、接口

一、函数 函数的基本语法&#xff1a; func 函数名&#xff08;形参列表&#xff09;&#xff08;返回值列表&#xff09; {执行语句...return 返回值列表 } 1.形参列表&#xff1a;表示函数的输入 2.函数中的语句&#xff1a;表示为了实现某一功能的代码块 3.函数可以有返回…

安卓基础面试题

自定义view Android自定义View-CSDN博客 view和viewgroup View和ViewGroup的区别- view的事件分发 事件分发详解---历史最容易理解 组件化 Android-组件化开发 什么是ANR Android ANR详解-CSDN博客 Android性能优化 Android 优化-CSDN博客 Aroute 原理 Arouter框架原理…

mysql逗号分隔字段拆成行简述

概述 在实际业务中总有一些字段内容是逗号分隔的&#xff0c;然后后续业务需要扩展时就很难受&#xff1b; 所以一般在这种情况下都是需要建立关联表&#xff0c;将字段内容拆分&#xff1b; 当前使用mysql版本 8.0.32 拆分demo 这里要注意mysql.help_topic表的记录行数&a…

【Linux】进程排队的理解进程状态的表述僵尸进程和孤儿进程的理解

一、进程排队的理解 进程不是一直运行的&#xff0c;进程可能会在等待某种软硬件资源。即使把进程加载到CPU中&#xff0c;也不是一直会运行的。而进程排队&#xff0c;一定是在等待某种软硬件资源&#xff08;可以是CPU&#xff0c;键盘&#xff0c;磁盘&#xff0c;网卡等等设…

rabbitmq-spring-boot-start配置使用手册

rabbitmq-spring-boot-start配置使用手册 文章目录 1.yaml配置如下2.引入pom依赖如下2.1 引入项目resources下libs中的jar包依赖如下2.2引入maven私服依赖如下 3.启动类配置如下4.项目中测试发送消息如下5.项目中消费消息代码示例6.mq管理后台交换机队列创建及路由绑定关系如下…

PyTorch学习笔记之基础函数篇(九)

文章目录 统计运算5.1 torch.mean()函数5.2 torch.median()函数5.3 torch.sum()函数5.4 torch.prod()函数5.5 torch.std()函数5.6 torch.var()函数 统计运算 5.1 torch.mean()函数 torch.mean() 是 PyTorch 中的一个函数&#xff0c;用于计算张量&#xff08;Tensor&#xff…

深入探讨Python中的文件操作与文件IO操作【第141篇—Python实现】

&#x1f47d;发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 深入探讨Python中的文件操作与文件IO操作 在Python编程中&#xff0c;文件操作和文件IO操作…

ES集群和分片以及脑裂

文章目录 概要一、概念二、节点角色三、master节点脑裂四、参考 概要 在工作中不可避免会用到ES&#xff0c;而用到ES就不得使用其集群模式了。 单节点的话不得不面临两个重大缺陷&#xff1a;单点故障&#xff08;高可用&#xff09;和海量数据存储搜索。 ES通过集群模式解决…

数据库增删改查复习

增删改查 插入数据 #插入一行 insert into student values(xwz,男&#xff0c;18); #插入多行数据 insert into student values(xwz,男&#xff0c;18)&#xff0c;(jesse,女,12); #插入行的一部分 insert into studnet(name,gender,age) values(xwz,男,18) #插入查询出来的数…

使用动态日志简化开发时间

1.游戏日志的重要性 日志,无论是对于开发环境,还是生产环境,都有着非常重要的作用,具体如下: 跟踪和记录应用程序的运行状态,以便进行故障排查和问题定位。提供应用程序的运行性能数据,以便优化和改进应用程序的性能。收集用户行为和反馈,以便进行用户行为分析和用户体…

JSR规范系列(6)——Jakarta EE 9 规范

Jakarta EE 9 规范 Jakarta EE 9 规范 JSR规范系列&#xff08;1&#xff09;——Java版本、JSR规范和JCP社区流程概述 JSR规范系列&#xff08;2&#xff09;——JavaSE规范、JavaEE规范、JSR规范全面整理——截止201908 JSR规范系列&#xff08;3&#xff09;——Java EE 6规…

Pots

给你两个容量分别为 A 升和 B 升的罐子。可以进行以下操作&#xff1a; FILL(i) 从水龙头向罐子 i&#xff08;1 ≤ i ≤ 2&#xff09;灌满水&#xff1b;DROP(i) 把罐子 i 的水倒空&#xff1b;POUR(i,j) 从罐子 i 向罐子 j 倒水&#xff1b;此操作后&#x…

● 647. 回文子串 ● 516.最长回文子序列 ● 动态规划总结篇

● 647. 回文子串 1.dp数组含义。 之前的题目&#xff0c;差不多都是求什么就怎么定义dp数组&#xff0c;最后返回dp的最后一个元素。但是这里如果定义一维数组dp[i]是[0,i]范围的回文子串的个数的话&#xff0c;怎么根据dp[i-1]得到dp[i]&#xff1f;发现很难找到递归关系…

Linux之gcc_makefile

一、提要 1. 预处理&#xff08;进行宏替换) 2. 编译&#xff08;生成汇编) 3. 汇编&#xff08;生成机器可识别代码&#xff09; 4. 链接&#xff08;生成可执行文件或库文件) 五六十年代&#xff0c;我们编程大多是二进制编程&#xff0c;也就是使用打孔纸带喂给机器 再往后&…

118.Qt入门,实现一个图片查看软件

需要用到的控件 QLabelQLineEditQPushButton 需要实现的功能 打开目录选择图片显示图片的名字显示图片 QLabel基本用法 void setText(const QString &);//设置文本QString text() const;//获取文本void setPixmap(const QPixmap &);设置大小 使用父类QWidget的方法设置…

窗口函数(sample database classicmodels _No.8 )

窗口函数&#xff08;sample database classicmodels _No.8 &#xff09; 准备工作&#xff0c;可以去下载 classicmodels 数据库具体如下 点击&#xff1a;classicmodels 也可以去 下面我的博客资源下载 https://download.csdn.net/download/tomxjc/88685970 文章目录 窗口函…

什么品牌洗地机清洁效果最好?洗地机品牌十大排名:前四名口碑公认

有使用过洗地机的朋友&#xff0c;相信对此都深有感触&#xff0c;洗地机的一洗一吸&#xff0c;清洁效果非常棒&#xff0c;地面的污渍、垃圾、粉尘都坚持不了几秒钟&#xff0c;分分钟可以让家里地面焕然一新&#xff0c;简直不要太香。但是&#xff0c;洗地机那么多&#xf…

Unity类银河恶魔城学习记录11-2 p104 Inventoty源代码

此章节相对较难理解&#xff0c;有时间单独出一章讲一下 Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili InventoryItem.cs…

FMQL45 XADC

通过PL自带的XADC可以读写温度&#xff0c;电压等&#xff0c;但是总是读的不对。开始查找FM_QL_bsp里面少了一个部分就是pl&#xff01;添加&#xff0c;在ewp已经修改了&#xff0c;但是文件不存在&#xff0c;现在给补上了&#xff0c;有点奇怪&#xff0c;有的项目会自动生…