【前端】input表单 type属性详解
A_aspectJ 2024-08-22 16:33:00 阅读 63
前言
前端页面开发中，html表单是网页中最常见元素之一，通过form元素定义表单,表单中包含各种表单项。
input 元素可以用来生成一个供用户输入数据的简单文本框。 在默认的情况下， 什么样的数据均可以输入。而通过不同的type属性值，可以限制输入的内容。
代码实例：
<code><input type="text" name="userName" required> 定义一个单行输入文本框。code>
<form>
<input type="text" name="yourname"size="30" maxlength="20" code>
readonly value="你只能读不能修改">code>
</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”
<code>type="email"属性：验证只能输入邮箱格式，否则不能通过code>
email:<input type="email" name="userEmail">code>
2. type=“tel”
<code> type="tel"：不进行验证，主要是在移动端打开数字键盘 code>
电话：<input type="tel" name="tel">code>
3.type=“url”
type=“url”： 验证：只能输入合法的网址，必须包含http://
<code>网址：<input type="url" name="url">code>
4.type=“range”
type=“range”：产生一个滑动条
<code> 范围：<input type="range" name="range" min="1" max="10" value="7">code>
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时=为当前值
<code>数字（1到8之间）：<input type="number" name="数字" min="1" max="10" value="5"code>
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就可以了。
<code><form action="#" method="post" id="myform">code>
<input type="text" autofocus/>code>
<input type="button" value="提交">code>
</form>
<input type="email" placeholder="请输入你的邮箱" form="myform">code>
上一篇： svg基本使用
下一篇： SpringBootWeb 篇-深入了解 Filter 过滤器与 Interceptor 拦截器（实现登录校验 Filter + Interceptor + JWT 令牌）
本文标签
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。