了解HTML表单之input元素的23种type类型_html/css_WEB-ITnose
目录传统类型
textpasswordfileradiocheckboxhiddenbuttonimageresetsubmit
新增类型前面的话
随着HTML5的出现，input元素新增了多种类型，用以接受各种类型的用户输入。其中，button、checkbox、file、hidden、image、password、radio、reset、submit、text这10个是传统的输入控件，新增的有color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week共13个
传统类型
text定义单行的输入字段，用户可在其中输入文本
password定义密码字段。该字段中的字符被掩码
file定义输入字段和 "浏览"按钮，供文件上传
radio定义单选按钮
checkbox定义复选框
hidden定义隐藏的输入字段
button定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）
image定义图像形式的提交按钮
reset定义重置按钮。重置按钮会清除表单中的所有数据
submit定义提交按钮。提交按钮会把表单数据发送到服务器
text
type="text"表示一个文本输入框，它是默认的输入类型，是一个单行的控件，一般是一个带有内嵌框的矩形
password
type="password"表示一个密码输入框，它与文本输入框几乎一模一样，功能上唯一的不同的字母输入后会被隐藏，一般是一连串的点
【 默认样式】
chrome/safari/opera padding: 1px 0px; border: 2px inset;firefox padding: 2px; border-width: 1px;ie padding: 2px 1px; border-width: 1px;
【默认宽高】
chrome height: 14px; width: 148px;safari height: 15px; width: 148px;firefox height: 17px; width: 137px;IE9+ height: 14px; width: 147px;IE8- height: 16px; width: 149px;
【重置样式】
padding: 0;border: 1px solid;
[注意]IE6浏览器设置的type="text"或"password"的input元素的宽高为包含padding和border的宽高
<演示框>点击下列相应按钮可进行演示
【tips】模拟密码显示隐藏的功能
说明：现在很多软件在密码框右侧都有一个小眼睛，用于设置密码的显示和隐藏。通过更改input元素的type属性得以实现
<style>body{ margin: 0; font-size: 16px;} #show{ padding: 0; border: 1px solid black; height: 20px; width: 200px; line-height: 20px;}#set{ display: inline-block; height: 22px; background-color: rgba(0,0,0,0.5); color: white; line-height: 18px; margin-left: -72px; cursor: pointer;}</style></head><body><input id="show" type="password" maxlength="6"><span id="set">显示密码</span><script>set.onclick = function(){ if(this.innerHTML == '显示密码'){ this.innerHTML = '隐藏密码'; show.type="text"; }else{ this.innerHTML = '显示密码'; show.type="password"; }} </script>file
type="file"定义输入字段和"浏览"按钮，用于文件上传
【重置样式】
padding: 0; border: 0;
【默认宽高】
chrome height: 21px; width: 238px;safari height: 21px; width: 238px;firefox height: 27px; width: 222px;IE9+ height: 21px; width: 220px;IE8 height: 16px; width: 214px;IE7- height: 15px; width: 210px;
[注意]IE8-浏览器设置的type="file"的input元素的宽高为包含padding和border的宽高
该类型的input元素支持accept属性和multiple属性
关于accept属性的详细信息移步至此
关于multiple属性的详细信息移步至此
radio
type="radio"定义单选按钮，允许用户从给定数目的选择中选一个选项。同一组按钮，name值一定要一致
[注意]radio类型的input元素无法设置padding和border(除IE10-浏览器以外)
【默认样式】
chrome/safari/opera/firefox margin: 3px 3px 0 5px; box-sizing:border-box;ie11 margin: 3px 3px 3px 4px; box-sizing:border-box;ie10- padding: 3px; box-sizing:border-box;
【默认宽高】
chrome/safari/IE height: 13px; width: 13px;firefox height: 16px; width: 16px;
【重置样式】
padding: 0; margin: 0; border: 0;
checkbox
type="checkbox"定义多选按钮，允许用户在给定数目的选择中选择一个或多个选项。同一组的按钮，name取值一定要一致
[注意]checkbox类型的input元素无法设置padding和border(除IE10-浏览器以外)
【默认样式】
chrome/safari/opera/firefox/ie11 margin: 3px 3px 3px 4px; box-sizing:border-box;ie10- padding: 3px; box-sizing:border-box;
【默认宽高】
chrome/safari/IE height: 13px; width: 13px;firefox height: 16px; width: 16px;
【重置样式】
padding: 0; margin: 0; border: 0;
type="radio"或"checkbox"的input元素支持checked属性
关于checked属性的详细情况移步至此
hidden
type="hidden"定义隐藏输入类型用于在表单中增加对用户不可见，但需要提交的额外数据
[注意]disabled属性无法与type="hidden"的input元素一起使用
//点击提交按钮后，隐藏域的内容test=12会包含在URL中<form name="form" action="#"> <input type="hidden" name="test" value="12"> <input type="submit"></form>
button
type="button"的input输入类型定义可点击的按钮，但没有任何行为，常用于在用户点击时启动javascript程序
【button、submit、reset的默认样式】
chrome/safari padding: 1px 6px; border: 2px outset buttonface; box-sizing:border-box;firefox padding: 0 6px; border: 3px outset; box-sizing:border-box;IE9+ padding: 3px 10px; border: 1px outset; box-sizing:border-box; IE8 padding: 3px 10px; border: 1px outset;IE7- padding: 1px 0.5px; border: 1px outset;
[注意]IE8-浏览器的box-sizing:content-box;而其他浏览器的box-sizing:border-box;
<input type="button" value="Click me" onclick="alert(1)" />
type="button"的input输入类型和button元素有很多重叠特性
关于button元素的详细信息移步至此
image
type="image"的input输入类型定义图像形式的提交按钮，该类型可以设置width、height、src、alt这四个属性
用图片作为提交按钮会一起发送点击在图片上的x和y坐标，这样可以与服务器端图片地图结合使用，如果图片有name属性，也会随坐标发送
<form action="#"> <input name="test"> <input type="image" name="imagesubmit" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/submit.jpg" width="99" height="99" alt="测试图片"></form>
submit
type="submit"的input输入类型用于创建提交表单的按钮
reset
type="reset"的input输入类型用于创建重置表单的按钮
<form action="#" method="get"> <input> <input type="reset" value="Reset" /> <input type="submit" value="Submit" /></form>
新增类型
color定义调色板
tel定义包含电话号码的输入域
email定义包含email地址的输入域
url定义包含URL地址的输入域
search定义搜索域
number定义包含数值的输入域
range定义包含一定范围内数字值的输入域
date定义选取日、月、年的输入域
month定义选取月、年的输入域
week定义选取周、年的输入域
time定义选取月、年的输入域
datetime定义选取时间、日 月、年的输入域(UTC时间)
datatime-local
定义选取时间、日 月、年的输入域(本地时间)
color
type="color"的input输入类型会创建一个调色板用来选择颜色，颜色值以URL编码后的十六进制数值提交。如黑色会以%23000000发送，其中%23是#的URL编码
[注意]safari和IE不支持该类型
【默认样式】
chrome width:44px; height:23px; border: 1px solid rgb(169,169,169); padding: 1px 2px;firefox width:46px; height:17px; border: 3px solid rgb(169,169,169); padding: 6px 0;
<input type="color">
tel
type="tel"的input输入类型用于表示语义上的电话输入域，外观上与type="text"的input输入类型没有差异
<form action="#"> <input type="tel" placeholder="请输入11位手机号码" pattern="\d{11}"> <input type="submit"></form>type="email"的input输入类型用于表示语义上的e-mail地址输入域，会自动验证email域的值，外观上与type="text"的input输入类型没有差异
email类型的input元素支持multiple属性
[注意]IE9-浏览器及safari浏览器不支持
<form action="#" > <input type="email" name="email" multiple> <input type="submit"></form>
url
type="url"的input输入类型用于表示语义上的url地址的输入域，会自动验证url域的值，外观上与type="text"的input输入类型没有差异
[注意]IE9-浏览器及safari浏览器不支持
<input type="url">
search
type="search"的input输入类型用于表示语义上的搜索框，外观上与type="text"的input输入类型没有差异
<input type="search">
number
type="number"的input输入类型用于处理数字输入
[注意]IE不支持该类型
【默认样式】
chrome/safari border: 2px inset; padding-left: 1px;firefox border: 1px inset; padding: 2px;
【属性】
max规定允许的最大值
min规定允许的最小值
step规定合法的数字间隔
value规定默认值
[注意]属性的取值可为小数
<input type="number" min="0" max="10" step="0.5" value="6" />
range
type="range"的input输入类型用于处理包含在一定范围内的数字输入，类似于type="number"的input类型
[注意]IE9-不支持该类型
【默认样式】
chrome/safari margin: 2px;firefox border: 1px inset; padding: 1px; margin: 0 9.3px;IE10+ padding: 17px 0 32px;
【属性】
max规定允许的最大值
min规定允许的最小值
step规定合法的数字间隔
value规定默认值
[注意]属性的取值可为小数
<input type="range" min="0" max="10" step="0.5" value="6" />
HTML5拥有多个可供选取日期和时间的新输入类型
date
type="date"的input输入类型用于选取日、月、年
month
type="month"的input输入类型用于选取月、年
week
type="week"的input输入类型用于选取周、年
time
type="time"的input输入类型用于选取时、分
datetime
type="datetime"的input输入类型用于选取时、日、月、年(UTC时间)
datetime-local
type="datetime-local"的input输入类型用于选取时、日、月、年(本地时间)
[注意]IE和firefox这6种日期类型都不支持，chrome不支持datetime类型
【默认样式】
chrome/safari border: 2px inset; padding-left: 1px;
<input type="date"><br><br><input type="month"><br><br><input type="week"><br><br><input type="time"><br><br><input type="datetime"><br><br><input type="datetime-local">
要预设控件的日期和时间，可以用字符串设置value属性
【value属性格式】
date YYYY-MM-DDtime hh:mm:ss.sdatetime YYYY-MM-DDThh:mm:ss:sZdatetime-local YYYY-MM-DDThh:mm:ss:smonth YYYY-MMweek YYYY-Wnn
YYYY=年MM=月DD=日hh=小时mm=分钟ss=秒s=0.1秒T=日期与时间之间的分隔符Z=Zulu时间的时区Wnn=W周数，从1月的第一周开始是1，直到52
该类型的value属性格式还可以用在min和max的属性里，用来创建时间跨度；step可以用来设置移动的刻度
[注意]chrome不支持该类型的step设置
<input type="week" value="2015-W36" step="2" min="2015-W25" max="2015-W40">
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
HTML est-il facile à apprendre pour les débutants?
Apr 07, 2025 am 12:11 AM
HTML convient aux débutants car il est simple et facile à apprendre et peut rapidement voir les résultats. 1) La courbe d'apprentissage de HTML est fluide et facile à démarrer. 2) Il suffit de maîtriser les balises de base pour commencer à créer des pages Web. 3) Flexibilité élevée et peut être utilisée en combinaison avec CSS et JavaScript. 4) Les ressources d'apprentissage riches et les outils modernes soutiennent le processus d'apprentissage.
Les rôles de HTML, CSS et JavaScript: responsabilités de base
Apr 08, 2025 pm 07:05 PM
HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.
Quel est un exemple d'une balise de départ dans HTML?
Apr 06, 2025 am 12:04 AM
Anexampleofastartingtaginhtmlis, qui abinginsaparagraph.startingtagsaressentialtinhtmlastheyinitiateelements, définit les éventualités, et la faculté de réduction des pages et de la construction de la création.
Comprendre HTML, CSS et JavaScript: un guide pour débutant
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.
Gitee Pages STATIQUE Le déploiement du site Web a échoué: comment dépanner et résoudre les erreurs de fichier unique 404?
Apr 04, 2025 pm 11:54 PM
GiteEpages STATIQUE Le déploiement du site Web a échoué: 404 Dépannage des erreurs et résolution lors de l'utilisation de Gitee ...
Comment implémenter la disposition adaptative de la position de l'axe y dans l'annotation Web?
Apr 04, 2025 pm 11:30 PM
L'algorithme adaptatif de la position de l'axe y pour la fonction d'annotation Web Cet article explorera comment implémenter des fonctions d'annotation similaires aux documents de mots, en particulier comment gérer l'intervalle entre les annotations ...
Comment utiliser CSS3 et JavaScript pour réaliser l'effet de la diffusion et de l'agrandissement des images environnantes après avoir cliqué?
Apr 05, 2025 am 06:15 AM
Pour obtenir l'effet de la diffusion et de l'élargissement des images environnantes après avoir cliqué sur l'image, de nombreuses conceptions Web doivent obtenir un effet interactif: cliquez sur une certaine image pour faire les environs ...
HTML, CSS et JavaScript: outils essentiels pour les développeurs Web
Apr 09, 2025 am 12:12 AM
HTML, CSS et JavaScript sont les trois piliers du développement Web. 1. HTML définit la structure de la page Web et utilise des balises telles que, etc. 2. CSS contrôle le style de page Web, en utilisant des sélecteurs et des attributs tels que la couleur, la taille de la police, etc. 3. JavaScript réalise les effets dynamiques et l'interaction, par la surveillance des événements et les opérations DOM.
